Coloured block around post category

[nomadiceman]

I am using the Avery theme and trying to have a coloured block around the category name

https://gpsites.co/avery/category/lifestyle/

I want to give each category its own colour for the block

Im struggling to figure that out in CSS.

Any ideas out to achieve that?

Thank you again for your help

[David]

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

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

[nomadiceman]

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

[David]

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

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

[JOAQUIM GALANTE]

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

[JOAQUIM GALANTE]

I discover it. Thanks a lot David

[David]

Glad to be of help

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

[nomadiceman]

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

Thanks David for your help once again

[nomadiceman]

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

[nomadiceman]

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.

[David]

Glad to hear that

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

[Author]

Posts