Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Custom CSS and the online manual

SOLVED
Go to solution
‎09-12-2018 01:41 PM
‎09-12-2018 01:41 PM

Custom CSS and the online manual

Hi all,

I'll keep it as brief as possible. I've followed this manual:

https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css-themes.html

 

So I've added a thm.css file:

app/design/frontend/myplace/thistheme/web/css/thm.css

Copied default_head_blocks.xml:

app/design/frontend/myplace/thistheme/Magento_Theme/layout/default_head_blocks.xml

That code contains:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css"/>
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print"/>
        <css src="css/thm.css">
        <meta name="format-detection" content="telephone=no"/>
    </head>
</page>

Also tried:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css"/>
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print"/>
        <css src="app/design/frontend/myplace/thistheme/web/css/thm.css">
        <meta name="format-detection" content="telephone=no"/>
    </head>
</page>

Then I've flushed the magento cache:

bin/magento cache:flush

Which results in:

Cleaned cache types:
config
layout
block_html
collections
reflection
db_ddl
eav
customer_notification
config_integration
config_integration_api
full_page
translate
config_webservice

Then I refresh the store front with CTRL+F5. Followed by CTRL+U to look at the source.

Then CTRL+F  and search for "thm.css".

 

.. with no results.

 

What have I overlooked?

 

Thank you in advance!

 

0 Kudos
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
‎09-14-2018 07:05 AM
‎09-14-2018 07:05 AM

[SOLVED]: Custom CSS and the online manual

Found it! I've totaly missed the the forward slash to close the css element node.

 

My mistake in my default_head_blocks.xml:

<css src="css/thm.css">

Should have been closed like this:

<css src="css/thm.css" />

Thank you @Mayur Bhuva & @gelanivishal for your time and effort Smiley Happy

View solution in original post

0 Kudos
Reply
6 REPLIES 6
‎09-12-2018 11:05 PM
‎09-12-2018 11:05 PM

Re: Custom CSS and the online manual

@john_sim

 

You have to run the following command to deploy your CSS.

 

php -d memory_limit=2G bin/magento setup:static-content:deploy -f
If you find my answer useful, Please click Kudos & Accept as Solution.
Reply
‎09-12-2018 11:19 PM
‎09-12-2018 11:19 PM

Re: Custom CSS and the online manual

Hello @john_sim,

 

If you are facing problem of css and js page load design after installation in magento2

please follow the following step-:

open the terminal and navigate to magento web root

 $ cd /var/www/html/magento2 
 $ php bin/magento setup:static-content:deploy -f 
 $ php bin/magento cache:flush

Let us know if you still got the same issue.

 

--
If my answer is useful, please Accept as Solution & give Kudos

 

Reply
‎09-14-2018 01:18 AM
‎09-14-2018 01:18 AM

Re: Custom CSS and the online manual

Done the following:

 

$ php bin/magento setup:static-content:deploy -f
$ php bin/magento cache:flush

and why do I have to prepend php to the command, while it also works without?

$ bin/magento setup:static-content:deploy -f
$ bin/magento cache:flush

Either commands still didn't bring up the custom CSS file.

I've checked If I've selected the correct theme in the store view in the admin panel (Content > Configuration) and it's set to the correct theme.

 

Is my default_head_blocks.xml setup correctly?

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    	<css src="css/thm.css">
        <css src="css/print.css" media="print"/>        
        <meta name="format-detection" content="telephone=no"/>
    </head>
</page>

 

0 Kudos
Reply
‎09-14-2018 03:45 AM
‎09-14-2018 03:45 AM

Re: Custom CSS and the online manual

Okay, I've tried something else: css_quick_guide_approach

 

I've done the following:

Copied from the Magento Blank theme the _module.less:

 

app/design/frontend/myplace/thistheme/web/css/source/_module.less

I understand that _*.less files are added to the main .less file.

 

After doing this, I've refreshed the caches via composer thru the deploy and cache command. But I saw no change.

 

But...

When I go to the admin controlpanel and click the 'Flush Static Files Cache', the css changes were visible!

 

So this new question comes forward: Why aren't these composer commands cleaning up the static cached files?

$ php bin/magento setup:static-content:deploy -f
$ php bin/magento cache:flush

What static content does static-content:deploy deploy and what does the cache:flush flush?

 

[EDIT]

Did another test: Renamed _module.less to _extend.less and changed the body background color.

Then I did:

$ rm -R pub/static/*

But nothing changed.

Then I went to the admin controlpanel again and clicked the 'Flush Static Files Cache.

The changes were visible. Why doesn't this command clear the static files?

 

The original question remains

So I'm able to override/add CSS thru mirroring the original Magento Blank Theme files in my own <vendor>/<theme> folder.

But why can't I add new CSS (not .less files) to my web/css folder and add it to my HTML head section?

 

 

 

 

0 Kudos
Reply
‎09-14-2018 07:05 AM
‎09-14-2018 07:05 AM

[SOLVED]: Custom CSS and the online manual

Found it! I've totaly missed the the forward slash to close the css element node.

 

My mistake in my default_head_blocks.xml:

<css src="css/thm.css">

Should have been closed like this:

<css src="css/thm.css" />

Thank you @Mayur Bhuva & @gelanivishal for your time and effort Smiley Happy

0 Kudos
Reply
‎08-30-2024 01:39 AM
‎08-30-2024 01:39 AM

Re: Custom CSS and the online manual

Пользовательские стили CSS (Custom CSS) позволяют вам изменять внешний вид веб-страниц или интерфейсов в соответствии с вашими предпочтениями. Это может быть полезно для улучшения читабельности, настройки интерфейсов или просто для персонализации вашего опыта в Интернете. Это интересный и тяжелый процесс, такой же интересный как и фестивали воздушных шаров. Если вас это заинтересует переходите на сайт https://www.inastana.kz/list/470234. А вообще если вы создаете свой сайт или приложение, пользовательский CSS может помочь вам настроить стили так, чтобы они соответствовали вашим предпочтениям или предпочтениям вашей аудитории.

0 Kudos
Reply