[Resolved] Different color for category label

Home Forums Support [Resolved] Different color for category label

Home Forums Support Different color for category label

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2313187
    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

    #2313345
    David
    Staff
    Customer Support

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

    Great! Thank you!

    #2314114
    David
    Staff
    Customer Support

    You’re welcome

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.