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:
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>
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;
-
}










3 Trackbacks
[...] like my tutorial on how to customize Wordpress widgets with CSS was quite popular. One of my readers asked me if there’s a way to add round corners to [...]
[...] Source; http://rubiqube.com/ [...]
[...] were Top 5 Projects You Should Run Away From and the two Wordpress tutorials that I wrote recently: Customizing Widgets Using CSS and Adding Rounded Corners to Widgets Using [...]
6 Comments
Hi,
Sorry for my english I’m french..
I really want to customize the design of my wordpress blog. Actually my widgets are too “simple”, and I would like to integrate them in a “rounded corner box”. Here is a good example : http://themes.wordpressfanclub.net/pix/greenplasma-1.jpg
I desperatly looked on the web for some help and advices but didn’t found any.
PS : I have the complete theme (css, images, etc…) of the image.
Thanks a lot
Jay
Hello Jay! That requires a bit more work. I’ll create Part 2 of the widget customization tutorial this week-end and will include tips on how to add round corners. You can subscribe to my RSS. Thanks!
Thank you so much for this? By chance, is this how I can customize the titles to the topics in my sidebar, like on this blog?
http://www.pearsonified.com/
I’d really love to do this. I was looking into just disabling the widget feature, but they really are handy.
Yes. Using these steps you can have that same look and feel for your sidebar widgets.
Quick question - where do I find the CSS for widgets? I know how to SEE the source code, but not where to go to edit it. Is it with my other CSS for my theme?
Thanks in advance!
Yes it should be in styles.css. Your current theme doesn’t appear to have styles for widgets. So you can go to Presentation > Theme Editor and just add the styles for widget.
For example: to style the Recent Posts widget, you need to style “widget_recent_entries ul li”, to style the Categories “widget_categories ul li”, and so on…
If you have trouble with this, use the contact form to get in touch. Good luck!