0

I am quite new to magento 2 and am trying to get my head around less and scss (new to this too). At the moment I just want to change the orange border at the bottom of the active Magento navigation items. Before when modifying CSS i would just go into developer mode in chrome or whichever browser view the rules and the line within the CSS file and modify this.

I want to know the best way to find where these LESS rules are stored before they are compiled but cannot find an easy way to do it, they seem to be all over the place and that particular one i am looking for i cannot see referenced in navigation.less. I have tried searching for the rules with grep using SSH however this is not working too well for me either.

I have created my own theme based on the luma theme and have been overiding files which i want changed by copying them into this theme in the same location. However for the below rule i cannot find what is creating it. I have searched the design and code folders for .level-top but cannot find anything relating to the border or border color.

@media (min-width: 768px), print styles-l.css:630 .navigation .level0.active > .level-top, .navigation .level0.has-active > .level-top { border-color: #ff5501; border-style: solid; border-width: 0 0 3px; color: #333333; text-decoration: none; display: inline-block; }

Is there a way anyone can recommend for me to find this?

Improve this question
2
  • Did you see this post? magento.stackexchange.com/questions/102994/… it will help you.
    – Adams Xiao
    Commented Mar 8, 2017 at 12:49
  • Yeah have seen that thanks. More confused here about what to overide or extend as i have no way of easily finding the rule in question and where it resides. I have tried searching which seems by best bet at the moment but searching the whole design folder i have not found this particular rule in question.
    – harri
    Commented Mar 8, 2017 at 14:16

2 Answers 2

Reset to default
2

It is not a good idea to edit the core magento2 files. You are going to run into horrible maintenance problems when you come to try and upgrade to the next version (which you should always be able to do promptly and without extra fuss).

Fortunately the magento devs have a solution. You have two choices for adding css rules, modules or themes. Modules are mostly suited for actual programming changes. For pure design work themes are the way to go.

A good guide to creating a theme is in the documentation: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-create.html

This guide does lead you to base your theme on Magento/blank which is...blank. You sound like you want to use the default Luma theme as your base. So theme.xml should look something like:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>New theme</title> <!-- your theme's name -->
     <parent>Magento/luma</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>  </theme>

This theme will initially look just like luma, however you can now make changes to override the design. Your custom css files can then be added to the web/css folder (see the link above for the folder structure).

To load them into all pages you need to create Magento_Theme/layout/default_head_blocks.xml with roughly the content.

<?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/custom.css" />
  </head>
</page>

To apply your theme follow http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-apply.html

This approach seems like more work but it will be much easier to maintain than lots of little changes.

Improve this answer
8
  • Thanks but yeah i have made my theme and am not modifying core files here. I am just after the location of these files and how to quickly find them. I have added my own stylesheet like you have suggested but it loads the orange then changes to my colour on full page load. So would rather just have my theme override the LESS in question originally without adding styles on top of styles.
    – harri
    Commented Mar 8, 2017 at 12:59
  • Ah OK, you didn't mention you'd made a theme. The less files should be in app/design/frontend/Vendor/theme/web/css/source where vendor and theme are appropriate for your theme. They should have the same name as the css file that chrome reports the rule is from (turn off merge and minify). You are normally best extending existing themes (the parent theme doesn't have to be a magento one) and making your own style sheets.
    – Chris Lingwood
    Commented Mar 8, 2017 at 14:17
  • The thing is i have only taken over files which i am modifying from the default so in my theme this rule is not present not when searching for .level-top anyway and am unsure where it does sit. I have searched the code and design directory from there which includes all modules and themese (blank luma and my own) however no luck. I want to find it and then put this single file in my theme i'm hoping magento will then compile this instead of the original but will worry about this after i've found it.
    – harri
    Commented Mar 8, 2017 at 14:24
  • Just add another rule to your custom css which overrides the original rule. Then you don't need to know where it came from.
    – Chris Lingwood
    Commented Mar 8, 2017 at 14:30
  • Yeah think this could be my quickest option. Will give this a go and just add a rule to my navigation.less file for it.
    – harri
    Commented Mar 8, 2017 at 14:45
1

If you have created a new theme that uses the blank theme as a parent then all the styling will be coming from LESS files within vendor/magento/theme-frontend-blank.

You will need to search this directory for the element you want to modify. For example searching for .block-static-block will return magento/theme-frontend-blank/Magento_Cms/web/css/source/_widgets.less. The problem here is that you should never modify these files so you'll need to extend or overwrite the styling in your own theme.

So now we know it's part of the Magento_Cms module we can extend the styling (if you're redesigning the whole CMS area it may make sense to overwrite the styling instead of extending it).

To do this create the following file:

app/design/frontend/PartyShowroom/default/Magento_Cms/web/css/source/_extend.less

And add your code within the correct media query like so:

//
//  Common
//  _____________________________________________
& when (@media-common = true) {
    .block-static-block {
        color: #fff;
    }
}


//
//  Mobile
//  _____________________________________________

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

}

//
//  Tablet
//  _____________________________________________

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

}

//
//  Desktop
//  _____________________________________________

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

}

You'll then need to clear caches, delete var/view_proprocessed and delete pub/static/frontend then refresh.

Improve this answer
4
  • Ok i have looked in that folder and in my installation i have no folder called theme-frontend-blank in vendor/magento. I have my own theme and have been copying the LESS files from the Blank Luma files to override them in my own theme but the rule for navigation below i just cannot see in there. Do you know where this might be is i have no vendor files? .level0.active > .level-top, .navigation .level0.has-active > .level-top { border-color: #ff5501; border-style: solid; border-width: 0 0 3px; color: #333333; text-decoration: none; display: inline-block; }
    – harri
    Commented Mar 8, 2017 at 13:05
  • Try searching for .level-top - If you search for the whole selector it won't return anything as it will be nested inside the LESS.
    – Ben Crook
    Commented Mar 8, 2017 at 13:11
  • Yeah that is what i tried, but that was in the design folder. Should i have the vendor folder
    – harri
    Commented Mar 8, 2017 at 14:03
  • It depends how you installed Magento 2 tbh, if it was through Composer you should have a vendor folder. Have you setup your new theme? Changes should only be made in your theme and/or module.
    – Ben Crook
    Commented Mar 8, 2017 at 14:55

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.