10

I'm working on a Magento 2 site at the moment for a client. Suppose my client's brand is boofar and the theme I'm trying to extend/override is foobar I've set as the parent theme using frontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Then under frontend/Foobarthemes/boofar/web/css/source/_theme.less I've written the CSS code that I want to override. I have also tried this with _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

I'm forced to use !important for anything to work here. None of the font and text stuff works in the above code.

Have I not understood the Magento 2 frontend workflow correctly?

8
+50

You only want to have your styles in the _theme.less file if you want to override the parent theme's _theme.less file. For that file, only one of them is loaded, and it will always be the selected theme if the file exists there. From there, it will use the fallback scheme to find that file and use it.

So in your case, using the _extend.less file is the right file to use.

This is a bit confusing though, as the code that is put into the _extend.less file is loaded last in the when Magento compiles all the styles that exist in the site. So i'm wondering if there is something messing with the load order.

Looking over the way you have it set up, try setting your theme up in a different namespace and not in the same theme. This might not solve the problem, as the way you have your theme set up is the same as Magento has the luma/blank theme set up. But for all the work i have done, i have my vender namespace that then will extend from either a 3rd party theme, or from luma/blank.

The next thing to try would be wrapping your code in the built in media queries. I go into more detail here, but basically it stops your styles from being loaded twice into the styles-l.css and the styles-m.css files.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

From there, it all comes down to CSS specificity. If there is something else the is higher then yours, you need to be more specific in your class/id definition in the styles. You might want to post a picture of the DOM structure to show what you are targeting and what is over riding what you are looking to target.

  • good point - maybe the theme I'm using (3rd party) is doing something weird but by what you're saying if I do the same override for the default theme, I should not have to use !important. Is it worth a try? – Francis Kim Feb 10 '17 at 4:35
  • 1
    I think so, you can just create a quick theme with just the registration.php, theme.xml and the web folder. Recompile and then select it in the admin and see what happens. I'm thinking something else is going on, but this popped into my head as a possibility. – circlesix Feb 10 '17 at 5:04
  • 1
    Also, just as a sanity check, you could put in a value that is unique in your styles (i like to use background-color: tomato as no one would ever use that color) and check to see in the compiled styles where in the sheet it's ending up. look in pub/static/frontend/{package}/{theme}/en_us/css for both styles files. if this isn't at the end of the file, something is screwing with the default load order. – circlesix Feb 10 '17 at 5:09
4

If you are able to have your styles apply in _extend.less file, this means that you have problems with css specificity. Since Magento2 uses less compilation, most styles are very specific. To override them, your styles selectors must be more or equally specific. I will not post details of the concept itself here as there are plenty of articles can be found online.

3

If you're using the default LESS setup then make sure ALL your LESS is written inside the M2 LESS media queries. If you don't you'll end up with duplicate CSS and probably specificity problems.


This all comes down to specificity and load order, your CSS should be loading after the parent themes (or modules) so to overrule this all you need to do is meet their specificity.

For example if the parent theme uses

.parent-selector .selector {
    ...
}

Then you'd need to write the same selector, if for some reason that doesn't work you just need to add another selector before it. An easy way is to add body before it, as it covers every selector and adds specificity. Like so:

body .parent-selector .selector {
    ...
}

This article contains some good information on CSS specificity.

Alternatively you can overwrite the whole file

If you are making a lot of customisations it's better practice to overwrite the whole file instead of extending. To do this just add the file to your theme using the same file path and name.

0

For higher priority you can duplicate selector:

  .home.home {
    display: none;
  }
  • Good tip! But unfortunately not what I'm after. – Francis Kim Feb 5 '17 at 0:25
0

You have to override same .less file of parent theme you want to override, like if you want to override _theme.less file, then you have to copy this file to child theme over here (make sure same path of parent theme)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

you can override your css here.

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.