[Resolved] How to change the background colour of category link on Scribe template

[nomadiceman]

Is there a way to have different colour backgrounds for the different category links that are above each image for the post.

You can see on the home page of the Scribe template https://gpsites.co/scribe/

You can see the category links background above each post is a purple, how can I make each category have a different background colour?

Previously I managed to do this using this CSS:

.cat-links a[href*="/mycategory"] {
    background-color: #43AA8B;
}

Thanks guys for your help

[Fernando]

Hi Nomadice,

Can you try adding this through Appearance > Customize > Additional CSS?:

.home article .gb-button-wrapper .gb-button.term-business {
    background-color: #ff0000;
}

Replace business with the term slug, and the color value with your preferred color.

[nomadiceman]

Thank you. Can you explain what you mean by:

“Replace business with the term slug, and the color value with your preferred color.”

Not sure I understand correctly 🙏

[Fernando]

In the code above, replace business with whatever the category term slug is. Example: https://share.getcloudapp.com/7Kujox7b

Replace #ff0000 with the color value you wish to use. Example: #43AA8B

[nomadiceman]

I understand thank you 🙏

[Fernando]

You’re welcome!

[nomadiceman]

Hi, this works great on teh home page, but not on the author archives.

What code do I need to use to make this work on the author archive pages?

Thank you so much

[David]

Hi there,

remove the .home class from the selector eg.

article .gb-button-wrapper .gb-button.term-business {
    background-color: #ff0000;
}

Then that will apply wherever there is a linked term being displayed by a GB Button.

[nomadiceman]

Oh yeah, seems obvious now.

Thank you very much for your help

Happy New Year 🥳

[David]

Happy New Year!
Glad to be of help

[nomadiceman]

Hi guys.

It seems now that it stops working when you’ve previously visited that category. The button stays as blue. See attached link to my site

How can I stop that?

Thank you so much

[Fernando]

I see. Can you try this syntax to stop that?:

article .gb-button-wrapper .gb-button.term-insights:is(:visited, :link) {
    background-color: #ff0000;
}

Replace term-insights with your preferred term.

[nomadiceman]

thank you, worked perfect 🙏

[Fernando]

You’re welcome! 🙏

[Author]

Posts