Archived topic
Different color per category
7 replies · Started by Tri Ryuzaki on December 14, 2021
Hi there, how can I define different color for each category on blog archive (as well as on single post page). Thanks
https://imgur.com/iQOEX9k
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?
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 ?