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?

Improve this question

4 Answers 4

Reset to default
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
Improve this answer
11
  • 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
    Commented Jan 17, 2017 at 11:03
  • 1
    CLI command to deploy: php bin/magento setup:static-content:deploy
    – Joshua34
    Commented Jan 17, 2017 at 14:39
  • What should I put in the two new CSS files I created? Just pure CSS??
    – styzzz
    Commented Jul 13, 2017 at 14:58
  • 1
    @styzzz yes, raw css is ok.
    – Joshua34
    Commented Jul 13, 2017 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
    Commented Jul 13, 2017 at 15:16
20

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>
Improve this answer
5
  • Including Vendor_Module is not working for me. Removing it working fine.
    – Saravanan DS
    Commented Mar 12, 2018 at 10:39
  • @SaravananDS you need to replace with your package and module name.
    – Manish
    Commented Mar 13, 2018 at 5:28
  • Yes. After replacing with my custom Vendor_Module only it is not working.
    – Saravanan DS
    Commented Mar 13, 2018 at 6:02
  • @Manish, can we load custom css file only in search result page?
    – Jafar Pinjar
    Commented Dec 18, 2018 at 10:13
  • Here not need to use child-theme ?
    – HaFiz Umer
    Commented Jun 25, 2019 at 8:00
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>
Improve this answer
5
  • thank you, you saved my day. I ddint want to work with .less files and compile everytime I edit them.
    – bourax
    Commented Feb 14, 2018 at 14:40
  • here not need to make custom theme first ?
    – HaFiz Umer
    Commented Jun 25, 2019 at 8: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
    Commented Jun 25, 2019 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
    Commented Apr 14, 2021 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
    Commented Apr 28, 2021 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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.