4

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?

4

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
  • 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 Apr 6 '16 at 16:37
  • This worked for me in Magento 2.2. The deploy command is not necessary in default and developer modes. – jdhildeb Sep 13 '17 at 16:18
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

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

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.