Paintbits

Customizing your WordPress Sidebar

I’ve had some people asking me how did I customize the right sidebar of my blog, from the RSS Feed link at the top till the categories below. I’m writing this article to try to help you achieve something like I did on Paintbits on your WordPress Blog.

Sidebar by Nicholas T.

Before I begin with the tips, let me tell you that all that I’m writing here is not rocket science. All of this is simple CSS, I didn’t read any guide to do it, just looked at the generated WordPress HTML code and applied a bit of CSS to change the look of the sidebar to fit my taste. The CSS used is also very simple, nothing fancy, everything comes in the manual! ;) With that said, let’s start.

RSS Feed Link with a Rollover Image

Making an RSS Feed Link using an Image to create a Rollover effect, just like you can achieve using Javascript is very easy, it only takes a bit of CSS.

I’m using K2 theme with a style made by me so some things might be different if you use another theme. K2 replaces the Widget system with a different system so the code generated for the widgets is slightly different. Using K2, I created a new Text, HTML and PHP Widget (that allows you to write HTML and PHP), positioned it at the top with the following code inside:

<a id="rss_sidelink" href="http://feeds.feedburner.com/Paintbits"
title="Subscribe to my RSS Feed"></a>

As you can see it’s a simple link to the Feed with a CSS ID, in this case rss_sidelink.

Now to achieve the Rollover effect you need an image containing the 2 States. You can see the image I used below as example.

Now to make the Image change we just add a bit of CSS, I’ll show you what I used here on paintbits.

#rss_sidelink
{
height: 60px;
width: 230px;
text-indent: 10000px;
overflow: hidden;
background: url(/wp-content/themes/k2/styles/lumen/images/rss.jpg)
top left no-repeat;
display: block;
}

#rss_sidelink:hover
{
background-position: bottom left;
}

Styling the Sidebar Widgets

With the RSS Feed Image done let’s focus on the other Widgets. I’ll give you one example using the Popular Posts Widget. K2 brings its own Popular Posts Widget, if it isn’t the case with your theme, you can find one easily in WordPress Plugin Directory. Anyway this is just the main idea, you can apply the same styling to the other widgets as their HTML is very similar.

Moving on…

Design a nice Image to serve as header for your Widgets, or simply add a custom text. I went with an image, you can see it below or on my sidebar.

Let’s look at the WordPress HTML generated code (take into consideration that my Widget structure might be slightly different from yours due to the use of K2 in my blog).

<div id="popular" class="widget module module5 WPPP_print_widget">
<ul class='wppp_list'>
	<li></li>
	<li></li>
	<li></li>
</ul>
</div>

The structure of all Widgets using K2 is all fairly simple. They are simple Unordered Lists (UL) with a specific class (in this case wppp_list) with several List Items (li) enclosed in a div (id=”popular” class=”widget module module5 WPPP_print_widget”).

So, to modify it’s appearance we just create some CSS styling this specific classes. The same can be done to the other classes generated in the other Widgets (like the Tag Cloud, Post Categories, etc…).

#popular
{
background: url('http://www.paintbits.com/Imagens/tags_pp.png')
top left no-repeat;
}

#popular .wppp_list

{
padding-top:40px;
}

#popular .wppp_list li

{
border-bottom: 1px dotted #21303b;
{

With this little guide I hope I gave you a fairly idea on how to style your WordPress sidebar. Now be creative, create something unique. Your imagination is the limit… ;)

Related Posts

• Building and Customizing your Blog

21 Comments