Q11: Colour Code the Category Widget

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.

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