29

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?

42

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
  • 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
15

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>
    
  • Including Vendor_Module is not working for me. Removing it working fine. – Saravanan DS Mar 12 '18 at 10:39
  • @SaravananDS you need to replace with your package and module name. – Manish Mar 13 '18 at 5:28
  • Yes. After replacing with my custom Vendor_Module only it is not working. – Saravanan DS Mar 13 '18 at 6:02
  • @Manish, can we load custom css file only in search result page? – jafar pinjar Dec 18 '18 at 10:13
  • Here not need to use child-theme ? – HaFiz Umer Jun 25 at 8:00
5

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:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>
  • 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 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 Jun 25 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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