Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
My good friend and fellow Divier, Randy A Brown was recently looking for a tutorial on how to style the category widget so he could colour code his categories for a new project. He pointed out that there was very little in the way of tutorials for the sidebar so I agreed to help him out and write one.
This Quick Snack would work great with the Blog Grid with Categorised Colours tutorial by Leslie Bernal of A Girl And Her Mac.
So let’s get cooking!
Ingredients
Some post categories set up, they will only show if they have content so make sure you have some posts assigned to them.
Cooking time
This should take you around 5 minutes max.
Preparation
Let’s set up our widget
Go to Appearance > Widgets and add the default WordPress Categories Widget to the default Sidebar area.
You can add a custom title if you want but leave the check boxes un-ticked.
Method
Now we just need to add a little CSS, here is what we are doing:
First off, we are setting the display of the category links to block, this allows us to then set the width to 100% so they will look more like buttons than hyperlinks, we also add a little padding and set the text colour of the links.
.et_pb_widget.widget_categories ul li a { display: block; width: 100%; padding: 10px; color: #000; }
Next we add a transition effect so that when we hover over the links, the change is smooth rather than abrupt.
.et_pb_widget.widget_categories ul li { -webkit-transition: .2s ease; -moz-transition: .2s ease; transition: .2s ease; }
Now we can set our category colours, we are using the nth-child pseudo class to target each of our list items. I have 4 categories in my demo so I have 4 declarations, just swap out the background colour codes for your own and if you have more categories, just copy/paste the last declaration and change the nth-child number to 5, and so on.
.et_pb_widget.widget_categories ul li:nth-child(1) { background: #baded1; } .et_pb_widget.widget_categories ul li:nth-child(2) { background: #cccfc0; } .et_pb_widget.widget_categories ul li:nth-child(3) { background: #e0b6a6; } .et_pb_widget.widget_categories ul li:nth-child(4) { background: #a18075; }
Finally, our hover styling. I just have this set to reduce the opacity on hover but you could change this to a background colour or even get a little more adventurous and use a box shadow or transform effect.
.et_pb_widget.widget_categories ul li:hover { opacity: .7; }
Here is all the CSS together. Copy and paste into your Child Theme Stylesheet or Divi theme options custom CSS box.
Colour Coded Category CSS
/*------------------------------------------------------*/ /*-----Colour Code the Category Widget by Divi Soup-----*/ /*------------------------------------------------------*/ /*Make the category links fullwidth and set the colour & padding*/ .et_pb_widget.widget_categories ul li a { display: block; width: 100%; padding: 10px; color: #000; } /*Add a transition for a smooth hover effect*/ .et_pb_widget.widget_categories ul li { -webkit-transition: .2s ease; -moz-transition: .2s ease; transition: .2s ease; } /*Set the colours for each list item, copy/paste the last declaration and change the nth-child number to add more categories*/ .et_pb_widget.widget_categories ul li:nth-child(1) { background: #baded1; } .et_pb_widget.widget_categories ul li:nth-child(2) { background: #cccfc0; } .et_pb_widget.widget_categories ul li:nth-child(3) { background: #e0b6a6; } .et_pb_widget.widget_categories ul li:nth-child(4) { background: #a18075; } /*Reduce opacity on hover*/ .et_pb_widget.widget_categories ul li:hover { opacity: .7; } /*------------------------------------------------------*/ /*---End Colour Code the Category Widget by Divi Soup---*/ /*------------------------------------------------------*/
And that’s it.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
hello, thank you for the great tutorial!
Is there a way to do the same for custom menu sidebar? Or how to include in categories widjet only some of the categories? Because I have too many categories and want to display only five of them. So I made custom menu sidebar with theses categories..
Thank you in advance!
Can’t help without a link to the page to inspect it Aneta
Michelle, this is great. Is there a tweak to this that can be used for Sidebar headers? I’m always struggling with Divi’s Sidbar and my attempts to make it like Extra haven’t really worked. I can use code and make a sidebar module have the desired header; I’d prefer to use the native sidebar if possible.
Thank you for any thoughts…
Yes David, this should work and then adjust styling to your needs:
#sidebar h4 {
background: #000;
color: #fff;
padding: 10px;
margin-bottom: 5px;
}
Michelle, every new snack or recipe is the answer to my latest design question. You are a mind reader! And a priceless access to our community. Continued thanks.
That is very kind Sue thank you
Hi Michelle, another really tasty-sounding snack … but on your demo site I don’t see anything different than the usual sidebar (Windows 10, Chrome), best, Sarah
That is very strange Sarah, I am on Windows 10 Chrome too, maybe try clearing your cache?
Thanks for this quick and easy to use snack:)
You are very welcome