0

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

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

Thanks in advance to all of you

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

  • Have you tried above way ? – hweb87 May 8 '18 at 5:42
  • No, I will try and let you know.Thanks for your help and support. – Sanjay Satapathy May 8 '18 at 5:49
  • Hi ,I have tried your solution but my css not overrides the existing one. – Sanjay Satapathy May 9 '18 at 6:47
  • @SanjaySatapathy could you please share with me your file structure – hweb87 May 9 '18 at 11:23
  • app/design/frontend/Pixel/Porto/web/css/source/_module.less – Sanjay Satapathy May 10 '18 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
  • 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 – Sanjay Satapathy May 8 '18 at 5:36
  • Using inspect element, check in the browser if any other css is overriding this or not? – Dinesh Yadav May 8 '18 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 – Sanjay Satapathy May 8 '18 at 5:51
  • Yes, because you haven't compiled and executed _extend.less file using grunt. – mighty_hk Jun 19 '18 at 5:12
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;
}
  • It's not correct way to use !important because magento provide us less for header css – hweb87 May 8 '18 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. – Sanjay Satapathy May 8 '18 at 6:05
  • Okay, if nothing works, do try this. – mighty_hk May 8 '18 at 6:22

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.