Always want to assigns icons to the widgets in the sidebar? I show you how it´s done just by adding a few lines to your theme’s CSS. This tutorial is intended for people with basic XHTML / CSS skills.
Structure
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
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 Padges widget is widget_pages.
The HTML generated by each WordPress widget is also a bulleted list and it looks something like this:
<ul> <li><a href="http://www.themebuilder.nl">Link Text 1</a></li> <li><a href="http://www.themebuilder.nl">Link Text 2</a></li> <li><a href="http://www.themebuilder.nl">Link Text 3</a></li> </ul>
Styling
First you need to upload the icon file to your theme’s images folder.For example the pages icon is called articles.png. I’ve added these lines of code to the style.css:
.widget_pages { background: url(images/articles.png) no-repeat; background-position: 17px 8px; } <!--more--><!--more-->
You have to replace .widget_pages 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.
Keep styling
Getting the hang of it? Try styling the title and background also.
