CODEWITHSUNDEEP
htmlcss
Sylvester
Sylvester

Reputation: 195

How to use custom css only for one page

Sample theme: https://martfury03.magebig.com/

I need on category page: https://martfury03.magebig.com/consumer-electric.html

Change bg color.

So I add custom css change code:

.page-wrapper {
    background: black;
}

enter image description here

But when I save this custom css, then the color on the home page will also change, the color on the product card, the color in the shopping cart, etc.

(naturally because this element .page-wrapper is present on all pages)

and here I have a question, (I cannot interfere with .phtml files to rename e.g. .page-wrapper-2 on category page.

  1. Is there any other way to only apply a color changes to category page example via pure css code? (so that it has no confilict on other pages)?

Upvotes: 0

Views: 875

Answers (3)

Engimath
Engimath

Reputation: 524

It seems that, when you enter in a category, you have an HTML code like this:

<body class="... catalog-category-view ...">
   ...
   <div class="... page-wrapper ...">
   ...
   </div>
   ...
</body>

Maybe you could use a CSS selector like this:

.catalog-category-view > .page-wrapper {
    background: black;
}

Upvotes: 3

ANewbieDeveloper
ANewbieDeveloper

Reputation: 118

If you have access to the code you should add another class on the element you want to change and define the CSS rules you want just on that specific class. You could use the "magebig-container" if it's only used on that page

If you don't have access to the code you could be much more specific on the element you want to change with "CSS Selectors" so in your CSS file you could do for example:

div > p

Selects all < p > elements where the parent is a element

You can do that with classes too!
For example in your case:

.category-consumer-electric >.magebig-container{
background: black;

}

Selects loading-mask where the parent is .magebig-container

For more CSS Selectors you could check: CSS Selectors here.

Upvotes: 2

fabc
fabc

Reputation: 182

After reviewing the html body through Google Chrome's Developer tools, I've noticed that the body itself changes classes according to the category you're searching in... Therefore you can simply make use of "body.category-consumer-electric" tag as the parent to .page-wrapper. Like so:

body.category-consumer-electric .page-wrapper {
    background: black;
}

Do note that you shouldn't use ">" merely a " ", because we don't want it to be a direct child.

If you require more direction in regards to CSS selectors, I recommend taking a look at W3Schoools' CSS tutorials.

Hopefully this answers your question.

Upvotes: 3

Related Questions