0

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.

0

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.

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.