This is the next part of the WordPress series. In the last part, Modifying a WordPress Theme - Part 1, you styled the header and navigation bar. In this part you shall style the sidebar. To do this part you need to have completed the last part or at least download the modified files.

In the Sandbox theme, the sidebar is made up of two columns one on top of the other. Open up sidebar.php in HTML-kit. The first line is:

<div id="primary" class="sidebar">

Then if go down to line 31 you will see:

<div id="secondary" class="sidebar">

This allows you to use widgets in one and plugins in the other. If you have a look in the admin area under Presentation > Widgets, you will see sidebar 1 and sidebar 2, so that you can do this. You can leave it as it is or change it to suit yourself.

This is purely my own opinion. I do not like the way this sidebar is laid out. If you look at it in a browser, it has the search box and rss subscriptions down at the bottom. Look at any design out there and you will see the rss at or near the top. Why? Because that area is one of the focal points for the eye and generally you want to increase rss subscriptions.

At the top of the Sidebar we see the Pages. Again, WHY? They are already in the navigation bar, so having them again is just a waste of space. The same goes for the Archives. How often do you look for something by date? Once in a blue moon, maybe. Instead you search for something by subject using either categories or tags.

I also like to take the search box out of the side bar and put it into the Navigation bar. If you have a lot of buttons and a narrow browser this will not work so well. Depending on what the header looks like you could put it up there instead.

Finally, there is the Meta section at the bottom. What is the point of this? Why should visitors log in to the site? Some blogs I have been to require that you register and login to leave a comment. Do you think I will do that to leave a comment? No, I won’t. You want to make it as easy as possible for a visitor to leave comments. The more barriers you put in their way, the less comments you will have.

Modify The Sidebar

This part is optional, but I advise you to do it so that you know how to do it. We shall modify the sidebar so that the top column you have the search box and rss subscriptions in the top column and everything else in the bottom column. Just to be safe, load in sidebar.php and save it as orig-sidebar.php, close it and then load sidebar.php and then edit it. If you mess up, delete sidebar.php and rename orig-sidebar.php back to sidebar.php.

1. Highlight lines 5-10, the Pages, and press backspace to delete them.
2. Highlight lines 49-58, the Meta section, and press backspace to delete them.
3. Highlight lines 29-37 and press Ctrl-X, click on line 4 and press Ctrl-C to copy the Search box to the top.
4. Highlight lines 41-47 and press Ctrl-X, click on line 14 and press Ctrl-C to copy the RSS Subscriptions to just below the search box.
5. Highlight lines 29-35, the Archives, and press backspace to delete them.
6. Highlight lines 21-27 and press Ctrl-X, click on line 31 and press Ctrl-C to copy the Categories to the top of the lower column.

This is okay, but I’m still not happy. The first time you saw a blog did you know what an RSS Feed was? Probably not. So let’s make it a bit more newbie friendly and change it.

On line 15:

<h3><?php _e('RSS Feeds', 'sandbox') ?></h3>

Change RSS Feeds to Subscribe to:

<h3><?php _e('Subscribe To:', 'sandbox') ?></h3>

Save the file (Ctrl-S) and refresh the Browser. This is a lot cleaner now. Search and RSS Subscriptions are at the top. Categories is at the bottom, this can be replaced by widgets, left as is or other plugins can be added below it. You can now close sidebar.php.

Styling The Sidebar

You have a choice here, depending on your tastes. If you like the minimalist design, you could leave it as is. If you like to "tart" it up a bit then you can continue with the exercise. Again, I recommend that you continue so that you know how to do it for when the need arises.

The first question is do you want the sidebar to have a colored background? We already have a basically blue header, if the sidebar was also blue and we left the content area as white then it would focus a visitors attention on the content. Another way is to change the color of all the text in the sidebar to a medium gray, so that it hasn’t got the same tonal value as the main content. The choice is yours.

You can try the second approach by going to line 72 of the style.css (it should be blank) and adding:

div.sidebar * {color: #888;}

Here we are saying make the foreground color of everything (*) in the div.sidebar a medium gray (#888). Save it and refresh the browser to see what it does.

This is another point at which you might be happy with the way it looks. But we shall carry on and explore other choices. First of all delete the contents of line 72 leaving it blank.

Styling The Links

On any page, it is the content that should get the attention of your visitor, so anything we do to change the sidebar’s appearance should not pull attention away from the content. This means the effects should be subtle. The sidebar sits there unnoticed until it is needed. Bearing ths in mind, you shall now experiment with different ways of styling the links.

Again, just to be safe, load in style.css and save it as orig-style.css, close it and then load style.css and then edit it. If you mess up, delete style.css and rename orig-style.css back to style.css.

I am going to take a cook-book approach here by showing you different effects that you can combine as your taste permits.

The first effect is to remove the bullet-points on each link. In style.css go to line 79:

div.sidebar ul ul li{list-style:disc;margin:0;}

And change the word disc to none like so:

div.sidebar ul ul li{list-style:none;margin:0;}

Save and preview in the browser.

The next effect is to change the color of the link when the mouse is over it. At the end of the style sheet add:

div.sidebar a {color: #888; }
div.sidebar a:hover {color: black;}

Save and preview in the browser. This will give you light gray links that turn black when the mouse is over it. If you wanted to make it look like a link then you could add:

div.sidebar a:hover {color: black; text-decoration: underline;}


The next effect is changing the background color of the link. Change the two lines to:

div.sidebar a {background: white; }
div.sidebar a:hover {background: #999; color: white;}

Save and preview in the browser. The second line changes the background to gray and the text to white. This is okay, but not great. If you change the first line to:

div.sidebar a {display: block; background: white; }


This looks better, but you could improve it by adding some space between the edge of the gray and the text:

div.sidebar a {display: block; padding: 3px; background: white; }

This will add 3 pixels of space all around the text. If you want to remove the space to left of each link, go to line 78 and change it to:

div.sidebar ul ul{margin:0;}


If you can’t make out the text when the mouse is over it, change the second line to:

div.sidebar a:hover {background: #999; color: white;font-weight: bold;}

Here all you are doing is making the text bold.

Another effect, that you might like, that I have seen is a vertical bar appears on rollover. Change the second line to:

div.sidebar a:hover {
  background: #999;
  color: white;
  font-weight: bold;
  border-left: 4px solid black;
}

Here you are adding a border to the anchor, but only on the left side.

Change The Sidebar Background

On some sites the sidebar has a different background color. In this example we have a basically blue header, we could also change the sidebar to a blue background and leave the content area white so that focus is kept on the content.

So let’s try to do this. The obvious way is to add a background color to the side bar like:

div.sidebar { background: #94b6fd; }

See what happens? There is blue only where there is text. It does not extend from top to bottom. Not a very good solution! If you look at the diagram to the left, at the top is how the divs are laid out at present. If you look at the second one down you will see an additional box in red, this wraps around both the content and sidebar boxes.

In the third one down the red box has a red background but only on the right. This gives us a colored background to the whole height of the sidebar. It doesn’t matter wether the sidebar is taller than the content or visa-versa.

So how do we translate this to code? First of all open index.php and add the following at line 2:

<div id="wrapper">

Then go down to lines 42-43 and change them to:

<?php get_sidebar() ?>
</div><!-- #wrapper -->
<?php get_footer() ?>

This will add the div box that wraps around both the content and sidebar. Now we need to have a colored background behind ONLY the sidebar. To do this we create an image the width of the sidebar and about five or ten pixels high.

To find the width of the sidebar, open the file 2c-r.css, look for div.sidebar and see what the width is. In this case that’s on line 16 and it says 180px. So open your art package, create an image that is 180 pixels wide and 5 pixels high. Then fill it with the color b4bcfb or RGB = 180, 188, 251. Save it as sbg.gif at:

FLASHSTICK:\www\wordpress\wp-content\themes\sandbox\images

Here is the one I made, right-click and save image to download.

Then in the style sheet delete the:

div.sidebar { background: #94b6fd; }

And replace it with:

div#wrapper { background: url(images/sbg.gif) right repeat-y; }

This tells the browser to put the image on the right side of the wrapper and copy it in only the vertical direction. Because the sidebar and content are inside the wrapper, whatever is in them appears on top of the background. We now have to restyle the links.
Change:

div.sidebar a {display: block; padding: 3px 5px;}

To:

div.sidebar a {display: block; padding: 3px 5px; color: black;}

This changes the color of the links to black.
Then change:

div.sidebar a:hover {
  background: #999;
  color: white;
  font-weight: bold;
  border-left: 6px solid black;
}

To:

div.sidebar a:hover {
  background: #3e76e8;
  color: white;
  font-weight: bold;
  border-left: 4px solid black;
}

This changes the rollover colors, background is a darker blue and I have thickened the bar to 6 pixels. Lastly, change line 74:

div.sidebar h3{font-size:1.2em;}

To:

div.sidebar h3{font-size:1.2em; text-align: center; color: #1c50b9;}

This centers the headers in the sidebar and makes them a darker blue. Save and preview in browser and you have almost finished. You can see above what it should look like, the All Comments show what the rollover looks like.

RSS

Before we finish, I’ll show you how to add a background to part of the sidebar. In particular you want the rss to stand out so that visitors will subscribe.

Here is the image that I made, it is 180 pixels wide like the sidebar. I have made it taller than needed in case you enlarge the text, add more spacing between the lines. Right-click and save image as rssbg.jpg, then you can copy it to:

FLASHSTICK:\www\wordpress\wp-content\themes\sandbox\images


If you look at sidebar.php, you will see that the rss bit is inside a div box named rss-links and it is an id, so all you have to do is add the following at the end of the style sheet:

div.sidebar #rss-links {
  background: url(images/rssbg.jpg) no-repeat;
}

The no-repeat just means that the image will not be repeated horizontally or vertically. You will also need to modify the links:

div.sidebar #rss-links a {
  font-weight:bold;
}

This just makes it easier to see against the background. This is not exactly the most beautiful example I could use, but it shows you the principal involved. As in the past save it and preview in browser.

That about wraps it up for this lesson. Here are the modified files in case you run into problems, style.css, sidebar.php and index.php. Don’t forget to rename them before trying to use them, for example rename style2.txt to style.css. If you have any questions leave a comment here. Next time we shall style the posts.