0

I want to extend .less values from another theme, in my theme I've added the following file "web\css\source\ _extend.less" that is containing:

/* Import: Layouts extensions */
@import '_layouts_themes_extend.less';

Because I want the changes seperated in multiple files (like told here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_approach.html#structured_extend)

The file "web\css\source\ _layouts_themes_extend.less" contains:

.header-container{
        .top-link-container{
            .block-search{ 
                float: left;
                padding-left:0px;
            }
       }
 }

Now in the end I see the following in chrome developer tool: //themes.css .header-container .top-link-container .block-search { float: right; position: relative; display: block; width: auto; margin-left: 20px; } //styles-l.css .header-container .top-link-container .block-search { float: left; padding-left: 0px; } //styles-m.css .header-container .top-link-container .block-search { float: left; padding-left: 0px; } So the themes.css overwrites my values set in the extended file... Is my structure not right?

0

probably a dumb question, have you tried !important?

Another dumb one... are you developing a custom theme? If so, I would go ahead and create an override because it looks like by extending you have created a conflict.

Simple way to do so would be to copy the file _layouts_themes.less into your own theme directory, and then change the styles that you want.

Leave the name the same (so no _extends).

  • Yes important works, but I think that is not a good practice. It would create a file full of !important items, that makes No sense to me. I'm extending An excisting theme, and I want to extend because the patent theme can be updates and I want to have those updates. The magrnto documentatie says extending is the wat to go... So I am looking at the wat to do that, and why it currently isn't working. – BvdVen Oct 4 '16 at 18:51
0

There are a lot of different ways that a file can be pulled into a site in M2. In this case, .header-container .top-link-container .block-search seems to be picking up styles from a few different .less files and getting combined in the theme.css final file which is in turn loaded last when M2 calls all the css into the head of the site.

One place this could be set is in a default_head_blocks.xml of the theme you are inheriting from (that's my assumption, that you are inheriting your theme from the custom theme). But this can only call in a css file into the head block of the site, so i don't think your issue is here.

Another place where this file could be complied is in the Grunt config file /dev/tools/grunt/configs/themes.js. The code in this file looks like this:

luma: {
    area: 'frontend',
    name: 'Magento/luma',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},

In here the theme could be setting up a file to be compiled into a theme.css file.

I think you will need to track down that file and how it's being complied to figure out how to correctly order your styles to have priority.

A side note:

Your styles that isn't going to be the solution to your problem but will help out keeping the styles clean is to use the default M2 breakpoints to keep the styles from showing twice.

There are three defaults,

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

Wrap your styles in this one when you want them to show up on mobile and desktop views.

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

Use this one for desktop styles that will not be compiled into the styles-l.css file

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {}

And use this one for mobile only styles and complied into the styles-m.css.

Using these you will not have the same styles show up in both files when you don't want them too. This will also help to fix further issues with css specificity within your own styles.

  • hmm, that was not the answer I was expecting. I thought the thing I want to do was possible... without diving into generating order. – BvdVen Oct 5 '16 at 8:43
  • I might not be understanding you then. In css you have three options to have your styles override another, you can control the order of the cascade (so your styles come last and 'win') you can have specificity (so that the weight of you css is higher then the other and you 'win') or you can use an !important tag. Could you explain more about the theme setup you have running? – circlesix Oct 5 '16 at 17:52

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.