[Resolved] Different Background color per category

[Stefan]

Hello,

I would like to have a custom background color for blog articles of a special category.
For the archive page this CSS works.

.archive.category-XX {
background-color: #61c1c9;
}

I have tried this but it does not work.

.post.category-xxx {
background-color: #61c1c9;
}

Do you have any idea that how I set this up for the articles?

Thanks in advance!

… – and happy easter 🙂

[David]

Hi there,

1. Add this PHP Snippet to your site:

add_filter( 'body_class', function( $classes ) {
    if ( is_single() ) {
        global $post;

        foreach( ( get_the_category( $post->ID ) ) as $category ) {
            $classes[] = 'cat-' . $category->category_nicename;
        }
    }

    return $classes;
} );

This will add a class of cat-slug to your single post body tag.

2. Then you can use this CSS:

.single.cat-slug {
    /* your css styles here */
}

Change the slug to match your category term

[Stefan]

Wow! It works!

Perfect and thanks a lot for the quick reply

[David]

Awesome – glad to hear that!

[Author]

Posts