cancel
Showing results for 
Search instead for 
Did you mean: 

Less overrides and inheritance

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Less overrides and inheritance

I'm having some difficulty understanding the inheritance/override model I think. I'm creating a theme that's overriding the Luma theme which overrides the Base theme. For an example, I want to change the Header Background Color which is found in web/css/source/_module.less as @header__background-color. By default this is set to "false" in both Base and Luma so I copied the entire file into my theme directory and changed the variable to a custom color variable that was added to "_colors.less" (which I know is working based on some other changes using this color which are working) so now my file has a line

 

@header__background-color: @color-blue-dark;

 

(I have client-side compile turned on during testing) When I refresh the page, the header doesn't have a background color. I ended up having to add that line to my "_theme.less" for it to work.

 

Another example, I want to change the border color for ".page-header .panel.wrapper", inside "_module.less" is 

 

...
        .panel.wrapper {
            border-bottom: 1px solid @secondary__color;
        }
...

Which I changed to 

...
        .panel.wrapper {
            border-bottom: 1px solid @header-panel__background-color;
        }
...

Which is already defined at the top of the default file, so I just changed the variable value to one of my custom colors. It doesn't work. Again, I had to define that variable in the "_theme.less" for it to work.

 

Now I'm trying to change the background color of the navigation container which is inside "web/css/source/module/_collapsible_navigation.less", but like before if I change the value in that file nothing happens. This time however, adding a line to the "_theme.less" doesn't do anything either.

 

I don't understand.. I should mention all changes I'm making are to files in my custom theme directory by first copying the contents of the default theme file then customizing->uploading. I've placed all the custom files in "web/css/source" (_variables.less, _theme.less, _module.less, lib/_colors.less, module/_collapsible_navigation.less).