Blog posts can be assigned to different post categories. This tutorial can help to apply different styles to posts assigned to different categories.
Step 1: Adding a Custom CSS Class
The CSS class should be added to affect one module only. Open the Blog module settings > Advanced settings > CSS ID & Class. Then add "et_custom_blog" to the CSS class field:
Step 2: Finding the Category Slug
Open Dashboard > Posts > Categories. On the right side, you will see a list of categories with the "slug" column:
Step 3: Apply CSS for Different Categories
Replace "category-new-category" with your specific category slug in the CSS selector:
.et_custom_blog .category-new-category
Here are different code snippets that can be used to change style, you can add them to the Divi > Theme Options > Custom CSS box, change the category slug and adjust the code.
For the entire post:
.et_custom_blog .category-new-category.et_pb_post {
background:red;
}
For the featured image:
.et_custom_blog .category-new-category.et_pb_post .entry-featued-image-url img {
border:5px solid red;
}
For the title:
.et_custom_blog .category-new-category.et_pb_post .entry-title a {
color:green;
}
For the post meta:
.et_custom_blog .category-new-category.et_pb_post .post-meta,
.et_custom_blog .category-new-category.et_pb_post .post-meta a {
color:green;
}
For the excerpt:
.et_custom_blog .category-new-category.et_pb_post p {
color:orange;
}
For the read more button:
.et_custom_blog .category-new-category.et_pb_post a.more-link {
font-size:40px;
}Ensure you replace "category-new-category" with the actual slug of the category you wish to style differently. These CSS snippets will help you customize the appearance of posts based on their categories.