3

Which file should I edit in my custom theme to change the background color and any other CSS of the catalog product view page?

  • 3
    always use _extend.less in your theme module for any custom css changes ... – Manoj Deswal Oct 26 '17 at 9:17
  • I tried to add .page-wrapper { background-color: red; } to VENDOR/THEME/Magento_Catalog/web/css/source/_extend.less, it works but for all page, my goal is to set it to the product page only. – DevonDahon Oct 26 '17 at 9:41
  • 1
    In 2nd way , I have mentioned module specific only , and yes ".page-wrapper" is global class used on all the pages . So you need to be little sharp with your CSS code ... For that assign a parent class for the wrapper ..... like use this way .. ".catalog-product-view .page-wrapper{} " this will work only for product page – Manoj Deswal Oct 26 '17 at 9:51
  • is it working after using parent class ? – Manoj Deswal Oct 26 '17 at 9:58
  • 1
    Thanks a lot, that works perfectly in _extend.less. How do you find this .catalog-product-view ? – DevonDahon Oct 26 '17 at 10:31
5

1) To edit catalog product page CSS or any other custom CSS always use _extend.less

You can inspect the product page find the responsible class and use in _extend.less.

  • Using less give you power to use VARIABLES, MIXINS, NESTING and many more

  • You will learn on going technology not the out dated

Here is detailed ANSWER how to add custom CSS or change existing CSS in your custom theme

Another Question for same thing , How to add custom CSS ?

2) Extend your module and change the responsible CSS , like in your case

You can change product page css inside _module.less,

app/design/frontend/vendor-name/theme-name/Magento_Catalog/web/css/source

Note: When you change the Global CSS which is used on all the pages , then you should assign parent class to them to make them work only on required page .

For example: As you are changing color of .page-wrapper{} class which is used by other pages as well, so will effect all the pages.

  • To work only on catalog product view page , use page parent class .catalog-product-view{} So it will look like .catalog-product-view .page-wrapper{}

Here in image to locate your page class

enter image description here

I hope this will help you and others as well.

| improve this answer | |
  • I moved my _extend.less file to _module.less (in app/design/frontend/vendor-name/theme-name/Magento_Catalog/web/css/source) but it breaks my css. – DevonDahon Oct 26 '17 at 10:32
  • Do not use module.less for custom adding , only change exiting there , for adding custom best way is using "_extend.less." in theme module as I mentioned in 1st way... use _extend.less. there only – Manoj Deswal Oct 26 '17 at 10:37
1

You can change it from common css.

Go to following path in your theme and add css in it.

{root}/app/design/frontend/Magento/{your-theme}/web/css/styles-m.css
| improve this answer | |
  • ! you are keeping the styles-m.css inside above path and you might be taking this file from pub/static folder to this location ... However Magento do not suggest for this ... Moreover this way he can't take benfits of using less , as whole magento is using less ... – Manoj Deswal Oct 26 '17 at 9:22
  • I've used this way in all of my projects, its working very smoothly. and this is the easiest way, normally all people are not aware with .less, so you can add your css in this file. – Aasim Goriya Oct 26 '17 at 9:30
  • yes this is the easiest way but not the MAGENTO WAY , as LESS , SCSS are trending and FUTURE CSS so its better to learn them at time . Moreover , you are loosing power of using variables, mixins and nesting of CSS .. that will more clean and sharp coding – Manoj Deswal Oct 26 '17 at 9:32

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.