When it comes to design, I have an obsession with details. As you can see, most of the widgets on my sidebar have some relevant icons. In this tutorial I will explain how you can spice up the widgets in your sidebar, by adding icons and some other customizations, just by adding a few lines to your theme’s CSS. This tutorial is intended for people with basic XHTML / CSS skills.

The sidebar structure

First let’s take a look under the hood: how does the widget generated HTML look like. Let’s say you drag & dropped a couple of widgets on your sidebar. Widget ready themes are built in such a way that each widget acts as an item of a bulleted list. So your sidebar HTML will look something like this:

<ul>
	<li id="widget1" class="widget widget_1">Widget1 Content</li>
	<li id="widget2" class="widget widget_2">Widget2 Content</li>
	<li id="widget3" class="widget widget_3">Widget3 Content</li>
</ul>

The widget structure

Notice how each list item has an id attribute and a class attribute. Each widget has a generic style (widget) and a specific style (widget_1, widget_2, etc.). For example, the style for the Most Viewed Posts widget is widget_views_most_viewed. This is generated by the plugin and we’ll be using this style later on.

The HTML generated by each WordPress widget is also a bulleted list and it looks something like this:

<ul>
	<li><a href="http://www.example.com">Link Text 1</a></li>
	<li><a href="http://www.example.com">Link Text 2</a></li>
	<li><a href="http://www.example.com">Link Text 3</a></li>
</ul>

Styling the widget

First you need to upload the icon file to your theme’s images folder. In this case the litle flame icon called ico_hotpost.gif. Next you have to add these lines of code to style.css:

.widget_views_most_viewed ul li {
	padding: 6px 0 6px 21px;
	border-bottom: 1px dotted #CCCCCC;
	background: url(images/ico_hotpost.gif) no-repeat top left;
	background-position: 3px 4px;
	font-size: 90%;
}

You have to replace .widget_views_most_viewed with the class name for the widget you are trying to style. How will you know that? Just drag and drop the widget, open your blog, do a View Source and search for the widget name. You should then be able to identify both the id and the class attributes mentioned above. You can also use the id, in this case I can replace .widget_views_most_viewed with #most-viewed.

It’s pretty obvious what those lines of code do:

  • the first one adds some space above, below and to the left of a list item (21 pixels left to make room for the icon)
  • the second one add that dotted border, to separate the list items
  • the third one specifies and positions the icon image
  • the fourth line shifts the icon image a few pixels, for fine tuning
  • the fifth makes the font a bit smaller than the one used for posts

The widget title

I almost forgot about it. If you look at the source code, you will notice that before the widget bulleted list there’s the widget title, between h3 tags. It also has a class called widgettitle. You can style this like any other element. Here’s my code:

.widgettitle {
	font-size: 120%;
	font-weight: normal;
	border-bottom: 3px solid #F0F0F0;
	padding: 0  0 5px 3px;
}