0

I am new to Magento 2 development and am stuck on changing the .header .content CSS class. I have tried by creating a _theme. less file inside my local theme but the CSS is not overriding.

Can you please suggest to me how to override some of the existing CSS inside my local theme? My theme is inherited from a blank theme.

Thanks in advance to all of you.

3 Answers 3

0

Override below css in your theme :

/vendor/magento/theme-frontend-blank/Magento_Theme/web/css/source/_module.less

Your Theme

/app/design/frontend/Vendor/YourTheme/Magento_Theme/web/css/source/_module.less

Now you can apply your changes in your theme

12
  • Have you tried above way ? Commented May 8, 2018 at 5:42
  • No, I will try and let you know.Thanks for your help and support. Commented May 8, 2018 at 5:49
  • Hi ,I have tried your solution but my css not overrides the existing one. Commented May 9, 2018 at 6:47
  • @SanjaySatapathy could you please share with me your file structure Commented May 9, 2018 at 11:23
  • app/design/frontend/Pixel/Porto/web/css/source/_module.less Commented May 10, 2018 at 17:02
0

Create the following file

app/design/frontend/vendor/theme/web/css/source/_extend.less

Add your css in _extend.less file.

Then run following CLI command.

php bin/magento setup:static-content:deploy -f
5
  • I have already tried this approach but still the issue persists .I have crated _extemd.less file inside the defined path you mentioned but the css not overriding Commented May 8, 2018 at 5:36
  • Using inspect element, check in the browser if any other css is overriding this or not? Commented May 8, 2018 at 5:42
  • Hi Dinesh ,I have already checked in the console and I can't able to see my modified css.also I have checked inside style-l.css inside pub/static folder Commented May 8, 2018 at 5:51
  • Yes, because you haven't compiled and executed _extend.less file using grunt.
    – mighty_hk
    Commented Jun 19, 2018 at 5:12
  • In extend.less, for change header color, @header-panel__background-color: @color-red10; not working, any hep thanks.
    – zus
    Commented Dec 5, 2020 at 8:51
0

You can add your css file in default.xml in your theme like below :

Path : app/design/frontend/{Packaname}/{themename}/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>    
        <css src="Magento_Theme::css/custom.css"/>      
    </head>
</page>

In css file you can override styling by marking it !important like below :

.header
{
    font-size: 18px !important;
}
3
  • It's not correct way to use !important because magento provide us less for header css Commented May 8, 2018 at 5:53
  • Yes,I need only to override some css classes of parent theme without using ! important.else it will again cause problem for responsiveness. Commented May 8, 2018 at 6:05
  • Okay, if nothing works, do try this.
    – mighty_hk
    Commented May 8, 2018 at 6:22

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.