Site logo

Archived topic

Make posts in grid different colors based on category

1 reply · Started by Andrei on September 26, 2020

Viewing posts 1–2 of 2

Hi! I need to make posts in a grid of posts display different colors based on post category.
The intent is to have premium listings and standard listings for various products and services, and they need to display different colors so they are easy to spot.
What are some smart and elegant ways to implement that?
It is important to note that the spectrum of categories may expand so the solution should allow for such adjustments.
Ideally, the solution would enable me to make changes to all aspects of the posts as displayed in post grids or similar layouts.
Thanks!

Hi there,

each post in the grid has the category-slug added as a class to the article container.
e.g .category-slug

You can target those posts and the element within them using CSS - for example this CSS would change the background color of the iniside article:

body:not(.single) .post.category-slug .inside-article {
    background-color: #f00;
}

You would need to create a CSS rule for each category-slug you would want to style.

This archived topic is closed to new replies.