[Resolved] Different Colour per Category via Elements (Blog as Homepage)

[Tristan]

Hey there,

My site is setup with the Blog as the homepage.
I have created a post template via Elements with some styling, including categories with a little coloured rectangular box (they are displayed below each post title that you can click on and it sorts the posts by topic).
I’m wondering if it’s possible via CSS to edit this category styling and make each category have a different coloured box behind the text.

I’ve tried a few different codes I found in previous topics but this only seems to target the background box colour in individual posts and doesn’t affect the main blog page.

Any ideas?

Cheers

[Fernando]

Hi Tristan,

To clarify, are you referring to modifying the background color of just the Headline Block?

If so, you can add my-text to the class list of the Headline Block: https://share.getcloudapp.com/Qwun5QGb, and then add this CSS through Appearance > Customize > Additonal CSS:

body.category-broadcast .my-text{
    background-color: rgb(255,0,0);
}

This CSS would take effect on the category with slug – broadcast. Kindly copy and paste this code, and modify broadcast to the specific category slug of the category page you wish to modify the color for.

Hope this helps!

[Tristan]

Hey Fernando,

Thanks for the response.

I am trying to modify the category label colours – so anything categorised as C4D = blue label/white text, AE = purple label/white text etc etc

[Fernando]

Yes, the code should work for any category. You’ll just need to add my-text class to the Headline Block.

For C4D, for instance, the code would be:

body.category-cinema-4d .my-text{
    background-color: rgb(0,0,255);
}

body.category-cinema-4d .my-text > a {
    color: rgb(255,255,255);
}

An alternative would be to create multiple Block Elements specifically for every Category, and just set the colors there.

Hope this clarifies.

[Tristan]

Thanks again for the help,

I updated the Headline Block and added the above CSS, it seems to be only targeting the image colour once you click on the category (eg c4d posts now have a blue colour to the images).

Do you have any idea how to target the grey labels underneath the post titles?

I found this code on another post which (kind of) achieves what I want, but this only works within the posts themselves:

#main span.cat-links a[href*="affiliate-marketing"] {
    background-color: red;
    color: white;
}

#main span.cat-links a[href*="on-page-seo"] {
    background-color: blue;
    color: white;
}

Thanks!

[Fernando]

You can add my-button class to the Buttons Block, and then the corresponding CSS would be:

body.category-cinema-4d .gb-button-wrapper.my-button > .gb-button {
    background-color: rgb(0,0,255);
}

body.category-cinema-4d .gb-button-wrapper.my-button > .gb-button {
    color: rgb(255,255,255);
}

Hope this helps!

[Tristan]

I was convinced this would work… but it doesn’t seem to be doing anything! Have added the class to the button and the CSS. Not sure why. Sorry for the hassle

[Fernando]

No problem, we’re here to help. 🙂

You’ll need to add the class to the Buttons Block instead of the Button Blocks.

Example: https://share.getcloudapp.com/X6uRlD4r

Kindly let us know how it goes.

[Tristan]

Ah I see!! I’ve made this change and also picked a few colours via CSS per category.

Unfortunately the tags are all still grey on the blog homepage, but if you click on a specific category it applies that category colour to all the tags.

Any ideas?

[David]

Hi there,

remove the CSS you have added so far.
When you use the dynamic data option to display the terms it adds a term-* class to the terms <a> element.

Try this:

.gb-button-wrapper a.term-cinema-4d {
    background-color: #f00;
}

[Tristan]

This did the trick!! Thanks very much, appreciate it

[Tristan]

Just bringing this up again, the categories seem to be reverting to dark grey once they are clicked on once and going back to the homepage. This happens to each category once you click on it and go back, the colours disappear.
Any ideas on this one?

[Fernando]

Try modifying your current CSS into this:

.gb-button-wrapper a.term-cinema-4d, .gb-button-wrapper a.term-cinema-4d:visited {
    background-color: #89D4D9;
}

This would set the background color to your preference when the button is clicked/visited as well.

Kindly let us know how it goes.

[Tristan]

Genius again, worked a treat. Thanks so much

[Fernando]

You’re welcome Tristan!

[Author]

Posts