How to use custom css only for one page

Question

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;
}

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.

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)?

Engimath · Accepted Answer · 2021-03-29 12:43:45Z

3

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;
}

edited Mar 29, 2021 at 12:43

answered Mar 29, 2021 at 11:01

Engimath

5241 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sylvester Over a year ago

Really thanks, it works great! I just wanted to ask you about one thing. Because you can see below .row { } prnt.sc/10yxz0e I would also like to set the margin to 0px for the product category only. I try use this code: .catalog-category-view > .row { margin-right: 0px; margin-left: 0px; } but in this case it doesn't work. Could you give me a hint? Thanks!

Engimath Over a year ago

If the element with the .row class is not a direct descendant of the body, then you should use a selector like this: .catalog-category-view .row {}

fabc · Accepted Answer · 2021-03-29 10:54:55Z

3

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.

answered Mar 29, 2021 at 10:54

fabc

18210 bronze badges

Comments

ANewbieDeveloper · Accepted Answer · 2021-03-29 11:02:31Z

2

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.

edited Mar 29, 2021 at 11:02

answered Mar 29, 2021 at 10:55

ANewbieDeveloper

1288 bronze badges

Collectives™ on Stack Overflow

How to use custom css only for one page

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related