[Support request] Customize Category Tags

[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.

GeneratePress 2.2.2

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts