Magento – How to Override Less File

csslessoverrides

im work on a new magento 2 page. Now i want change a css class over my custom theme.less file. But how can i override the css class?

I want override the padding from the .header.content class which is located in the layout.less

.navigation,
.breadcrumbs,
.page-header .header.panel,
.header.content,
.footer.content,
.page-wrapper > .widget,
.page-wrapper > .page-bottom,
.block.category.event,
.top-container,
.page-main {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: @layout__max-width;
    padding-left: @layout-indent__width;
    padding-right: @layout-indent__width;
    width: auto;
}

Thanks for help.

Best Answer

Go to your theme and create a file at app/design/frontend/{Your_Vendor_Namespace}/{Your_Theme}/web/css/source/_extend.less. Inside this file place what ever code you would like to override, i.e.:

.header.content {
    padding-left: 25px;
    padding-right: 25px;
}

After you have made this change, there are a few different ways to compile the file to show on your front end, This guide goes into more detail. I would recommend setting up grunt to do your compilation, it's by far the fastest and most dependable.

Why this works

Magento will scan through the specific folders in the install for .less files, and when it finds them, it will compile them into the two .css files that get loaded into the head of your site styles-m.css and styles-l.css. As long as your file is named correctly, it will get pulled in, and since your file is in your theme, it will be loaded last and comiled at the bottom of the sheet, so your style will have css specifisity in the cascade.

A quick note about the _theme.less file. Only one of those files gets pulling into compilation, with your theme's file having the priority. This means that if you are inheriting from the Luma theme, that Luma theme's _theme.less file will not be loaded if you have one in your theme. This can cause unexpected results, so if you are using this file to change a few things, copy the content of the inherited theme's _theme.less into your file and then make your edits at the bottom.

Related Solutions

Magento 2 – How to Utilize Existing LESS Variables in New LESS File

As you already figured out how to use the variables, I'll briefly explain the 2 ways recommended by Magento to override or extend the styles from a parent theme:

1. Simple way

Extend:

In your theme directory, create a web/css/source sub-directory. (You've already done this part)

Create a _extend.less file there. According to the documentation: "Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles."
Override:

Instead of creating the _extend.less file, you create a _theme.less file.

In this case you need to copy all variables you need from the parent _theme.less, including those which will not be changed. Then make your changes.

Drawback: "You need to monitor and manually update your files whenever the parent’s _theme.less is updated."

2. Structured way

Extend

This method lets you organize your code in a better way. Your changes will be structured. Instead of using a single _extend.less file to include all your changes, you create a extend file for each component from the Magento UI library you want to change.

Say you want to extend styles from button and navigation components. In your theme directory create 2 files:

_buttons_extend.less and _navigation_extend.less, then add your changes for each component in the corresponding file.

Then you create the _extend.less file adding this code:
- @import '_buttons_extend.less';
- @import '_navigation_extend.less';
Override:

In your theme, create a copy of the file corresponding to the UI component you want to change _buttons.less, _navigation.less etc This file will override the _buttons.less of the parent theme.

It is important to notice the difference between override and extend.

Magento – Override link color in custom less file, Magento2

Override variable value in your active theme's _theme.less file like below:

@link__color: red;

You can view all variables name for override in your theme _theme.less at <root_project>/lib/web/css/source/lib/variables.

Best Answer

Related Solutions

Magento 2 – How to Utilize Existing LESS Variables in New LESS File

Magento – Override link color in custom less file, Magento2

Related Topic