•  07-10-2020
  •  | 
  •  

Question

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?

Était-ce utile?

La solution

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.

Autres conseils

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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange
scroll top