All Collections
FAQ's and Troubleshooting
How to change blog post style based on the category in the Blog module
How to change blog post style based on the category in the Blog module

How to change styles of the post boxes based on the post category in the Blog module using CSS code and category CSS class

Andrei N avatar
Written by Andrei N
Updated over a week ago

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:

Custom CSS class in the Blog module

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:

Category slug in the dashboard > categories

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 {

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 {

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 {

For the excerpt:

.et_custom_blog .category-new-category.et_pb_post p {

For the read more button:

.et_custom_blog .category-new-category.et_pb_post a.more-link {

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.

Did this answer your question?