[Resolved] Different color per category

[Tri Ryuzaki]

Hi there, how can I define different color for each category on blog archive (as well as on single post page). Thanks

View post on imgur.com

https://fiverrguy.com/blog/

[Elvin]

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. 😀

[Tri Ryuzaki]

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?

View post on imgur.com

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

[Elvin]

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

[Tri Ryuzaki]

Hi, it works great, thank you =)

[Elvin]

No problem. 😀

[Jens]

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

[David]

Hi there,

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

[Author]

Posts