[Resolved] Custom CSS for page hero in one category

[Rust]

Hello.
I need to custom page hero colors just for one category posts only.
But i can’t, because, i have this custom CSS for all site pages:
.page-hero {
background-image: linear-gradient(-30deg,#00004d,#5333ed 49%,#2cd4d9);
}
How can i enable this CSS just for one category only?
.page-hero {
background-color: black;
}

[Leo]

Hi there,

Are you referring to the category archives or single posts under a specific category?

[Rust]

single posts under a specific category

[Leo]

What if you create a separate page hero/header element specific for the single posts in that category using display rules like this?
https://www.screencast.com/t/IXS4Db6Zx

[Rust]

did, did not help, because i have GLOBAL custom .page-hero css code

[Leo]

The best way would be to add a custom CSS class:
https://docs.generatepress.com/article/header-element-overview/#element-classes

For example, if you add a class called gradient, then you can target your CSS specifically:

.page-hero.gradient {
    background-image: linear-gradient(-30deg,#00004d,#5333ed 49%,#2cd4d9);
}

[Rust]

Thanks, Leo, great support!

[Leo]

No problem 🙂

[Author]

Posts