5

I've already created a custom.css file which include some properties that I use in my custom theme (inherits from Blank theme).
I can apply successfully those custom properties, however some properties dont apply since they interfere with the default CSS properties in Blank theme.

For example:

.font { red; } - styles.css (default CSS magento file)

.font { blue; } - custom.css (my own CSS file)

The font appears red instead of blue. What should I do to override property values from the default CSS magento files?

Improve this question
1

3 Answers 3

Reset to default
7

In order to do add custom css which will override parent theme, you must do the following:

Add these 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>

Apply your theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html

Deploy static resources (SSH to magento root):

php bin/magento setup:static-content:deploy
Improve this answer
3
  • I've already created those files. However some properties dont apply since they are defined twice: in my custom css and in the default magento css files. It only works if I add !important to my properties but I think there sould be a bettery way to have my styles override the default ones
    – Luis Garcia
    Commented Apr 6, 2016 at 16:37
  • This worked for me in Magento 2.2. The deploy command is not necessary in default and developer modes.
    – jdhildeb
    Commented Sep 13, 2017 at 16:18
  • in my experience, I can't get _extend.less to work. had to resolve to using css instead with this solution instead.
    – Earlee
    Commented Aug 18, 2020 at 2:25
1

in header block 

    <?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/custome.css" order="100" />

  </head>
</page>

order="100" : it'll load after default css, and it'll be overide

Improve this answer
0

You have two choices;

Use the !IMPORTANT tag as you are doing at the moment

Or, create a copy of the CSS you are modifying into your new theme and edit everything there i.e. app/design/frontend/customtheme/modulename/web/css/filename.less

BE CAREFUL, if you empty the CSS file then no css file will load. You need to copy the full CSS file and then edit whatever you want in that CSS file

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.