36

Is there a way to create my own CSS file that loads last in the cascade?

If so, how and where do I add my custom CSS file?

H. Ferrence
  • 1,041
  • 4
  • 17
  • 26

4 Answers4

61

In order to do add custom css and load last, you must set up a custom theme.

  1. Create theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Make sure that you set your Magento application to the developer mode.
  3. Add the following folders to your custom theme

--

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Create the following files:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

place this code within default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  1. Apply your theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. Deploy static resources (SSH to magento root):

--

php bin/magento setup:static-content:deploy
Joshua34
  • 2,307
  • 1
  • 18
  • 25
  • Hi, I just did so, but the css file I add, doesn't load, and when I inspect the page it gives me a GET error for the file, with a 500 (Internal Server Error) have you got any idea what it might be? – alexcr Jan 17 '17 at 11:03
  • 1
    CLI command to deploy: php bin/magento setup:static-content:deploy – Joshua34 Jan 17 '17 at 14:39
  • What should I put in the two new CSS files I created? Just pure CSS?? – styzzz Jul 13 '17 at 14:58
  • 1
    @styzzz yes, raw css is ok. – Joshua34 Jul 13 '17 at 15:01
  • Yup. I just did that, uploaded the local-m.css and local-l.css files to web/css....cleared cache and ran php bin/magento setup:static-content:deploy. I am in developer mode. Its still not picking them up. My default_head_blocks.xml is exactly like above. But its still not using those stypes I set in the CSS – styzzz Jul 13 '17 at 15:16
  • i do still have .less files from the blank theme in my theme in CSS folder. Should I delete all .less files and just keep the .css ones in there? – styzzz Jul 13 '17 at 15:22
  • You should be placing the css files within your custom theme. Check link under 1. – Joshua34 Jul 13 '17 at 15:23
  • yes, they are in my custom theme. I deleted all the other files and its still not pulling my css files in my custom theme. My custom theme is glocally set and works - parent is blank theme – styzzz Jul 13 '17 at 15:25
  • Still not working for me. The local.css files are not showing up in my header :( – styzzz Jul 14 '17 at 16:48
  • This is not working for me too. but how this is marked as correct answer – Alaksandar Jesus Gene May 25 '18 at 08:09
  • @Joshua34, how to load our cutsom css file to include first? – Jafar Pinjar Dec 28 '18 at 12:10
18

In order to add custom css and load last

  1. Follow the directory structure

    app / code / vendor / modulename / view / frontend(for admin adminhtml) / web /css / filename.css

  2. Add the css file path to the corresponding layout file as given below

    <head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
nukala satish
  • 451
  • 8
  • 20
Manish
  • 3,106
  • 7
  • 31
  • 47
6

You can add the media attribute which magento 2 will put to the end of the css in the head section. Setting a width of only 1px will enable it on all devices. default_head_blocks.xml will contain:

<?xml version="1.0"?>
<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/custom.css" media="all and (min-width: 1px)"/>
    </head>
</page>
Cypher909
  • 308
  • 3
  • 9
  • thank you, you saved my day. I ddint want to work with .less files and compile everytime I edit them. – bourax Feb 14 '18 at 14:40
  • here not need to make custom theme first ? – HaFiz Umer Jun 25 '19 at 08:01
  • @HaFizUmer You should make a custom theme first. Follow the instructions from the accepted answer and then use the method I show here. – Cypher909 Jun 25 '19 at 14:27
  • I did that, but it gets inserted as the first file. Is there a way to force it to be the last? – Michael Walter Apr 14 '21 at 10:40
  • @MichaelWalter Make sure that you are following the steps from the accepted answer first then add your custom css file after the magento default css files with the media tag as shown in my answer. Just tested as working in magento 2.3.6. Updated my answer for clarity. – Cypher909 Apr 28 '21 at 20:38
1

Custom theme call css :

app/design/frontend/package/theme/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<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/custom.css" />
    </head>
</page>

Custom Module css call only limited module

app/code/Package/Module/view/frontend/layout/package_module_index.xml

Or Call Global Css in on website

app/code/Package/Module/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Package_Module::css/custom.css"/>
    </head>
    <body>
            <!-- Custom Code -->
    </body>
</page>
Milan Maniya
  • 330
  • 3
  • 11