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?

7
  • 3
    always use _extend.less in your theme module for any custom css changes ... Oct 26, 2017 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, 2017 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 Oct 26, 2017 at 9:51
  • is it working after using parent class ? Oct 26, 2017 at 9:58
  • 1
    Thanks a lot, that works perfectly in _extend.less. How do you find this .catalog-product-view ?
    – DevonDahon
    Oct 26, 2017 at 10:31

2 Answers 2

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.

2
  • 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, 2017 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 Oct 26, 2017 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
3
  • ! 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 ... Oct 26, 2017 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. Oct 26, 2017 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 Oct 26, 2017 at 9:32

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.