[Support request] Customize Category Tags

Home Forums Support [Support request] Customize Category Tags

Home Forums Support Customize Category Tags

  • This topic has 1 reply, 2 voices, and was last updated 5 years ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #846471
    David

    I would like to have a different color background to identify each category tag displayed on my blog posts. I’ve copied the following CSS from another support topic similar to mine, referencing the site library: volume:

    .entry-meta .cat-links a {
        background-color: #ff3366;
        color: #fff !important;
        padding: 6px 12px;
        border-radius: 3px;
        font-size: 0.7em;
        text-transform: uppercase;
    }

    I’m having a hard time figuring out how to make each category a unique color.

    I would also like to replace the commas between categories with a space. I tried the code at this link but it turns my categories into a bulleted list.

    #846679
    David
    Staff
    Customer Support

    Hi there,

    that would require custom development with a child theme to create your own post loop template as the category-slug classes are only present in the Post article not the cat-links.

    If you were only displaying one category for each of your posts then you can target the links like so example slug: balanced-living :

    .post.category-balanced-living .cat-links a {
        background-color: red;
    }

    To remove the comma you can use this CSS:

    .cat-links {
        font-size: 0;
    }
    
    .cat-links:before,
    .cat-links a {
        font-size: 12px !important;
        margin-right: 5px;
        margin-bottom: 5px;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.