Coloured block around post category

Hi there,

if the block is just around the title then use this CSS for the default color:

.category .page-hero h1 {
    display: inline;
    padding: 20px;
    background-color: red;
}

then you will need to add after that rule a separate CSS rule for each Category eg.

.category-lifestyle .page-hero h1 {
    background-color: yellow;
}

Thank you for this. I’ll give it a try

The block was going to be around just the category name on the archive and also single pages

For example, the “music” category would have a green coloured background as a block. The “books” category would have a brown block

I need to also remove the little folder symbol too that’s near the category tags

Try this method:

/* Remove icon */

.cat-links:before {
    display: none;
}

/* Remove comma delimiters */

.cat-links {
    display: block;
    font-size: 0;
    margin-bottom: 20px;
}

/* Base style tag */

.cat-links a {
    font-size: 14px;
    margin-right: 5px;
    padding: 5px;
    background-color: red;
    color: #fff !important;
}

/* Style specific category */

.cat-links a[href*="/inspiration"] {
    background-color: green;
}

Nice David, but now the color is red for all categories, how can ia personalize the colors to put diffrent colors for each category ?

I discover it. Thanks a lot David

Glad to be of help

JOAQUIM GALANTE any chance you can share how you did it?

Thanks David for your help once again

ive figured it out

change the url for each category and colour in this part of the code

/* Style specific category */

.cat-links a[href*="/inspiration"] {
    background-color: green;
}

awesome. thanks guys. I wouldn't have been able to figure that one out. :)

Great Ive just figured this out. I have the WP Show Posts and using it on the front page. This css works to do the same thing :) I believe it is correct

.wp-show-posts-terms {
    display: block;
    font-size: 0;
    margin-bottom: 20px;
}

.wp-show-posts-terms a {
    font-size: 14px;
    margin-right: 5px;
    padding: 5px;
    background-color: red;
    color: #fff !important;
}

.wp-show-posts-terms a[href*="/inspiration"] {
    background-color: green;
}

Thanks for your help again mate.

Glad to hear that