Different Colour per Category via Elements (Blog as Homepage)

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!

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

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.

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!

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!

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

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.

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?

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

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

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?

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.

Genius again, worked a treat. Thanks so much

You’re welcome Tristan!