Q11: Colour Code the Category Widget

by | Mar 8, 2017 | CSS Tips & Tricks, Quick Snacks, Sidebar

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Quick Snack: 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.

Colour code the category widget in Divi tutorial

 

 

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

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

     

Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!