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.

Once we have our image we need to add it to the site.

In the admin dashboard select Media > Add New

Click the Select Files button and browse for your image file – click Open to add it to your media library.

Locate the image address and copy it – make sure that you have the entire address highlighted.

Tip: Click inside the box and use ctrl-A or cmd-A to select it’s entire content.

Add the following CSS to the bottom of your style sheet:

body {background:url(paste the full image address you copied between these brackets) repeat;}

Important: there must not be any space between url and the first bracket i.e. it needs to be: url(image address)

Tip: To repeat the image horizontally only use repeat-x To repeat it vertically use repeat-y and to not repeat the image at all use no-repeat.

That brings us to the end of this tutorial – The style sheet now looks like this.

Click here to go to Customising the theme of your WordPress website: Tutorial Three