Customising the theme of your WordPress website: tutorial #2

A guide written for talk about local by Najm Clayton:

Links, description & background

Continuing from were we left off in the previous tutorial we will now expand on the new colour theme.

Once again the following changes can be made in both self hosted and wordpress.com hosted blogs BUT remember you will need to pay for an upgrade if you want to keep the changes for a blog hosted on wordpress.com.

1. The Side Menu

The current menu links are blue with purple visited links. Using a line of CSS we will change them to orange, keeping them more inline with the current scheme. At the same time we will change the menu titles from black to grey.

Add the following CSS to the bottom of the Style Sheet (see Tutorial #1 on how to do access this file.)

.widget-area ul a {color:#FF3300;}
h3.widget-title {color:#999999;}

Click on the update file button and check the changes.

2. The Description

With the Twenty Ten theme our description is forced onto a second line because it is too long for the width of space allocated. Although this is fine it doesn’t look very nice, especially as it is only one word on the second line.

We can fix this by increasing the width of the description slightly from 220px to 230px:

#site-description {width:230px;}

Click update file and check the results.

3. The Background

Finally we will now add some colour to the otherwise drab background.

There are a number of ways to create a background effect but with this blog we will use a tiled effect. This involves using CSS to repeat a small image in order to cover the entire background of the page regardless of its length.

If you create the image yourself make sure that it can be repeated seamlessly. However, there are lots of sites offering free website backgrounds to make it easier.