Blog Grid with Categorized Colors (Background or Top Border)
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.
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.
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! 😉
Leslie, your site is just an amazing freshness. So totally cool – something you actually want to scroll up and down just to see all the neat features and styling.
Thanks again for the mention. Warmest big hugs! Now I have some motivation to update my site lol
Keep up the awesomeness. Your idea is very practical with Divi, and you tutorial makes the idea very special. Hopefully your viewers will be encouraged to take advantage of an idea on how to make a site look even better!
THANK YOU Terry for all your encouragement and for the help you give all of us!! It’s a pleasure being your friend 🙂
Wow.. Very nice…. Never even realized this was possible.. Exceptional work… Love the colors on this site too.
Thanks Dehn!! I know right? I thought it would take much more work!
Love this!! Such a great idea. Totally going to tweak this for an Extra site I have coming up. Thanks!
I’ve never tried it with extra, let me know if it works!
Your site is cool and this is a great way to target individual posts in a Divi Blog Grid … But do you know another way to target them without using categories? I was trying to use nth-child to loop through a few different background colors (but so far I am only able to change the background color of each row).
Nice work.
I had to try assigning the posts to more than one category. The results we predictable 🙂 Last CSS rule applies.
Ha! Well that makes sense! 😀
Thanks so much for this, Gail! It really spiced up a design I was working on – one of those things you don’t know you need until you see it. 🙂
Very easy-to-follow code, too. Keep up the good work!
Hello Leslie:
I have implemented the code as you described it in my Web project, with DIVI 3.0, but I do not see any results. Are there any significant changes in Divi 3.0 so that this css code can not be added ??
Any help will be welcome …
Thank you very much
Hey, love the site and this great post. How did you get your actual blog posts, images and read more boxes, etc looking so good?
The default Divi blog does not look that good!
Thanks Ben! Pretty much everything I customized was with CSS. I’ll try to do some tutorials on the things you mentioned 🙂
Yes if you could that would be brilliant or maybe just send me over the CSS if you wouldn’t mind?
Re-vamping our site at the moment and the blog definitely needs some work.
Hello,
First of all thanks for the awesome turtorial!
I’m having a few problems in getting different categories to come up with different colours… i’ve tried inputting the above code into the additional CSS area (under customisation) with no such luck…
I’m using Grid Blog by MyThemeShop
My website URL is – http://digifam.philkin.com/
I’m also very new to editing CSS and PHP haha, so please bare with me…
Thanks for any guidance,
Dec
Hi Dec 🙂 My tutorials are written for the Divi theme by Elegant Themes. This layout and code will not work as is on your site, sorry about that!
No worries – very similar names of themes (Grid Blog / Blog Grid)
Sorry for the confusion and thanks for the prompt reply
all the best, Dec
Just discovered this, Leslie. Thank you so much! I’ve been torn between Divi and Extra for my blog (my new sites are in Divi—I’m still tweaking). This is the one feature I really liked in the Extra theme! So, this is great! And thanks to Terry Hale for being happy for you to share this.
Thanks so much Kerrie, appreciate you stopping by! 🙂
Hey this is so clever. I have been looking for ages for this. It works so well and simply. Can you advise me on two things to make my life complete: How would I have it change the title color on each post in the same way, and how would I make it work on the full-width module. If you can fix that my website will be so much nicer. many thanks
Hi Andy! Sorry for the delay in responding, I’m glad you found it helpful. Both of those things are possible, for the title try this code and change my “travel”category to yours like before:
.et_pb_blog_grid .et_pb_post.category-travel>h2 {
color: red;
}
To make this fullwidth you should be able to do that in the row settings > design > make fullwidth
Let me know if that doesn’t work 🙂
Dear Leslie,
thank you so very much for butting you work out there.
I have followed your tutorial but am running into the following problem:
My button text will not display as white, nor does the button turn black on hover.
What could be the problem?
Thank you for your help
Hi, i’m trying to do the second example but i’m not seeing any changes at all.
I’m using the latest WordPress of this date, and divi
any ideas?
I’m putting this in the custom css box in the divi theme options.
Hi Andy! I’m afraid I can’t really help without a link to inspect your code, are you able to share one?