BlogsWeek.com

In this post we’ll modify the appearance of the standard WordPress sidebar using CSS rules. In six easy steps, we’ll transform a Kubrick sidebar (see screen 1) into an “Almost Spring” sidebar (see screen 7); Kubrick is the standard WordPress theme, while “Almost Spring” is a WordPress theme designed by Becca Wei. For your convenience, the modified files are available in the Download page.

The method shown can be applied to design different sidebar styles, according to our preferences. These instructions have been tested with Internet Explorer 6.0, Firefox 1.5 and Konqueror 3.2.3.

Our starting point is a clean Kubrick theme, whose sidebar is reproduced in screen 1.

Screen 1

First we go to the wp-content/themes folder of our WordPress installation, and make a backup copy of the default folder with all its content; actually we only need to modify two files, sidebar.php and style.css in the default folder, but a complete backup copy does never hurt, does it?

Now we open the file sidebar.php in the default folder with our favorite text editor.

As we can see, the Kubrick theme builds the sidebar as a single div section, named “sidebar”, containing a single big ul (unordered list), whose li (list items) are the sidebar sections (Archives, Categories, and so on).

Each of these sections is made of a h2 title, followed by another ul, whose li are the individual section items (links to monthly archives, or categories, or whatever).

Now we need to deactivate all the current CSS rules related to the sidebar, so we just change the name of the whole div section to “mysidebar”, or another name we like, as follows:

<div id=”sidebar”>

<div id=”mysidebar”>

Then we make a few changes to the search box section, to make it look like the other sidebar sections, as follows:

<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

<h2>Search</h2>
<ul><li>
<form method=”get” action=”<?php bloginfo(‘home’); ?>/”>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” />
</form>
</li></ul>

The last modification we make to sidebar.php removes the optional post count after each category name:

<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>

<?php wp_list_cats(‘sort_column=name&optioncount=0&hierarchical=0’); ?>

Now we close sidebar.php and refresh our browser window: the result is shown in screen 2. We can notice that most sidebar styles are gone, the search box section looks like the other sections, and there are no post counters in the Categories section.

Screen 2

We have to add now the “mysidebar” CSS rules. We open style.css in the default folder, and add two rules at the end of the file. The #mysidebar rule specifies the position of the sidebar inside the WordPress screen, while the #mysidebar ul rule specifies the position of the main unordered list inside the sidebar, and removes the list bullets:

#mysidebar {
margin: 0 0 0 527px;
padding: 0;
width: 223px;
}

#mysidebar ul {
margin: 0;
padding: 15px 15px;
list-style: none;
}

The result is shown in screen 3. The sidebar is now correctly positioned, and the list bullets have been removed.

Screen 3

We add now two more rules: the #mysidebar ul ul rule defines the top border color of a sidebar section, and the #mysidebar ul ul li rule defines background and bottom border of a section item.

#mysidebar ul ul {
margin: 0;
padding: 0;
border-top: 1px solid #6c83b0;
}

#mysidebar ul ul li {
background: #eaedf3;
border-bottom: 1px solid #b0c1e5;
}

The result of this step is shown in screen 4. We are beginning to see how the final result will look like.

Screen 4

The next rules we add will define the appearance and behavior of links inside the section elements, as follows:

#mysidebar ul ul li a {
margin: 0;
padding: 4px 10px 2px 10px;
display: block;
text-decoration: none;
}

#mysidebar ul ul li a:link, ul ul li a:visited {
color: #6c83b0;
}

#mysidebar ul ul li a:hover, ul ul li a:active {
color: #e58712;
background: white;
}

The result of this step is shown in screen 5.

Screen 5

Then we have to specify the CSS rule for the title of a sidebar section:

#mysidebar h2 {
margin: 0;
padding: 14px 0px;
font-size: 1.2em;
color: #6c83b0;
}

The result is shown in screen 6.

Screen 6

And the last refinement is for the search box section, as follows:

#mysidebar form {
margin: 0;
padding: 2px 10px;
}

The final result is shown in screen 7.

Screen 7

Of course we can modify these CSS rules to suit our preferences (about fonts, size, colors, spacing, …), and build our ideal WordPress sidebar.

For your convenience, the two modified files sidebar.php and style.css are available in the Download page; you can use them as they are, or as a base for your own experiments.

Credits: thanks to Becca Wei, designer of the Almost Spring WordPress theme.