Archived topic
Different color for category label
3 replies · Started by Jens on August 15, 2022
I'm using a website from the site library called "Construction".
On the page Projects there are category labels shown upon every project.
I would like to change the color of the labels per category.
Hi there,
you would need to use some Custom CSS follow these steps:
1. Go to Appearance > Elements and edit the Post Content Template block element.
1.1 Select the Headline Block that is displaying the Terms.
1.2 Remove the Spacing > padding and Colors including background from the headline.
1.3 Publish those changes.
2. Now we need some CSS to put back our basic styles that will apply to all terms:
/* basic styles */
.dynamic-term-class .post-term-item a {
display: block;
padding: 8px 16px;
background-color: #f00;
color: #aaa;
}
.dynamic-term-class .post-term-item a:hover {
background-color: #0f0;
color: #f00;
}
3. Now you need to create individual styles for each of the different terms:
/* term specific styles */
.dynamic-term-class .post-term-item.term-residential a {
background-color: #00f;
}
Note this selector: term-residential this is auto generated based upon the category term.
So if you have a Category of Cheese then it would result in the term-cheese and your CSS for that term would look like:
/* term specific styles */
.dynamic-term-class .post-term-item.term-cheese a {
background-color: #00f;
}
Great! Thank you!
You're welcome