[Resolved] Different color for category label

[Jens]

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.

What it is
What I want

[David]

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

[Jens]

Great! Thank you!

[David]

You’re welcome

[Author]

Posts