Blog Grid with Categorized Colors (Background or Top Border)

Nov 3, 2016 | CSS Tutorial | 19 comments

This tutorial came about because of a question that came up in a Facebook group that I’m in. I only know how to do this because of the help of my good friend and super-awesome web developer Terry Hale of Mizagorn, Ink. He pointed me in the right direction, I just put it to use.

I was sure this would require PHP so I never attempted this even though I’d wanted this look for a while, but I was surprised to find out it could be done with just CSS. What this won’t do is affect your category archive page, that would need a bit more work and involve child files, but there are Divi plugins that can help with that part if you need.

Demo 1 – Full Background Color

The background color changes based on the category name.

Divi Tutorial | A Girl and Her Mac

Instructions

Using a 1-column section I add a blog module. In the blog module I’m changing the following:

  • Header text color: white
  • Meta text color: white
  • Body text color: white

Show or hide whatever you’d like, I’m just showing the date, categories, and read more button. The following goes in your child stylesheet, Divi Custom CSS box or your page CSS box. **You will need to change the category slugs to match yours**

{;} css code

/*** REMOVES BORDER - OPTIONAL ***/
.et_pb_blog_grid .et_pb_post {
    border: none;
}
/*** FEATURED IMAGE DOES NOT GO EDGE TO EDGE - OPTIONAL ***/
.et_pb_image_container {
    margin: 0;
}
/*** REPLACE THE CATEGORY SLUGS WITH YOURS AND CHANGE THE COLORS ***/
.et_pb_blog_grid .et_pb_post.category-travel {
    background: #EF233C;
}
.et_pb_blog_grid .et_pb_post.category-wildlife {
    background: #084C61;
}
.et_pb_blog_grid .et_pb_post.category-under-the-sea {
    background: #0DAB76;
}
.et_pb_blog_grid .et_pb_post.category-food {
    background: #EB4600;
}
/*** READ MORE BUTTON STYLING ***/
a.more-link {
    text-transform: uppercase;
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    margin-top: 10px;
    border-radius: 3px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
a.more-link:hover {
    background: rgba(0, 0, 0, 0.5);
}
/*** CHANGE META LINK COLOR ***/
.post-meta a {
    color: #fff !important;
}

Demo 2 – Top Border Color and Button Color

A top border color and matching button are used based on the category name.

Divi Tutorial | A Girl and Her Mac

Instructions

Using a 1-column section I add a blog module. In the blog module I’m changing the following:

  • Grid tile background color: #f5f5f5

Same here, show or hide whatever you’d like. I’m just showing the date, categories, and read more button. The following goes in your child stylesheet, Divi Custom CSS box or your page CSS box. **You will need to change the category slugs to match yours**

{;} css code

/*** REMOVES DEFAULT BORDER AND ADJUSTS PADDING - OPTIONAL ***/
.et_pb_blog_grid .et_pb_post {
    border: none;
    padding: 20px;
}
/*** REPLACE THE CATEGORY SLUGS WITH YOURS AND CHANGE THE COLORS ***/
.et_pb_blog_grid .et_pb_post.category-travel {
    border-top: 12px solid #EF233C;
}
.et_pb_blog_grid .et_pb_post.category-wildlife {
    border-top: 12px solid #084C61;
}
.et_pb_blog_grid .et_pb_post.category-under-the-sea {
    border-top: 12px solid #0DAB76;
}
.et_pb_blog_grid .et_pb_post.category-food {
    border-top: 12px solid #EB4600;
}
/*** READ MORE BUTTON STYLING - REPLACE WITH YOUR CATEGORY SLUGS AND COLORS ***/
.et_pb_post.category-travel a.more-link {
    background: #EF233C;
}
.et_pb_post.category-wildlife a.more-link {
    background: #084C61;
}
.et_pb_post.category-under-the-sea a.more-link {
    background: #0DAB76;
}
.et_pb_post.category-food a.more-link {
    background: #EB4600;
}
a.more-link {
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    padding: 4px 10px;
    margin-top: 10px;
    border-radius: 3px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
/*** ALL BUTTONS ON HOVER TURN BLACK ***/
.et_pb_post.category-travel a.more-link:hover,
.et_pb_post.category-wildlife a.more-link:hover,
.et_pb_post.category-under-the-sea a.more-link:hover,
.et_pb_post.category-food a.more-link:hover {
    background: #000;
}

Notes

  • This is meant to be used on blogs that have posts that only have one category assigned.
  • If you’re gonna get funky and combine the code to use both on a single grid layout I advise you to proceed with caution and have a good grasp of design so you don’t end up with a hot mess! 😉