Site logo

Archived topic

Different color per category

7 replies · Started by Tri Ryuzaki on December 14, 2021

Viewing posts 1–8 of 8

Hi there,

You can style these links through their href attribute. (category slug)

Example:

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

You create a CSS entry for each category you want to style. :D

Hi Elvin, it works perfectly on the default blog page, thanks. How can I achieve the same effect on the custom blocks / layouts which are created with "Element Blocks"?. For example, the post header is created using Block Element (Page Hero type), and the category is created by using "Headline" block element, how can we achieve the same effect on those custom category text?

https://imgur.com/gBUTErF

https://fiverrguy.com/how-to-make-a-graph-in-google-sheets/

We can modify the format of the code to something like this:

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

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

Hi, it works great, thank you =)

No problem. :D

The code doesn't change the color of the .dynamic-term-class but only the background color of the text.

Hi there,

can you raise a new topic and share a link to your site where we can see the issue ?

This archived topic is closed to new replies.