Magento 2 – Change Background Color of Catalog Product View Page

cssmagento2magento2.2

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

Best Answer

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.

Related Topic