Customising the theme of your WordPress website: tutorial #1

A guide written for talk about local by Najm Clayton:

Changing text size, colour, font, letter spacing and line height in paragraphs

While it is possible to change the colour of pieces of text in the text editor to change the default settings site-wise requires changes to the respective style.

1. The Style Sheet

As with all the CSS changes we will be making we start in the administrator dashboard.

Select Appearance and then Editor.  Sites hosted on wordpress.com will have:

Self hosting sites will have:

Important Ensure you select ‘Add this to Twenty Ten theme’s CSS stylesheet’ (or whichever theme you are using)

2. Label where you are working

Style sheets can get very big. Scroll down to the bottom of the CSS and put the following comment:

/* —- my changes —- */

Everything you add will go after this comment.

Important The /* */ open and close the comment.

3. Changing Title Colour and Font

We will begin by changing the font and colour of the main site title.

After /* —- my changes —- */ add the following line:

#site-title a {color: #CC0001; font-family: Georgia,”Bitstream Charter”,serif;}

We have included the letter ‘a’ because the site title is also a link. In CSS ‘a’ means link.

Because the title is a link we will also make it change colour when the cursor hovers over it:

#site-title a:hover {color: #FF3300;}

Click the Update File button and open your blog in a new tab/window to check the changes.

TIP #FF3300 is the Hex code for a shade of orange. Use a website such as http://cloford.com/resources/colours/500col.htm to find the Hex code for your colours.

Important In CSS colour is always spelled COLOR

4. The link to the post

We will make the same colour changes for the link to the post as we did to the main title by adding:

#content .entry-title a {color: #CC0001;}

#content .entry-title a:hover {color: #FF3300;}

Click the update file button and check the changes.

5. Modifying the main text

Okay, we have changed the colour and font of the main title and the colour of the link to the post, now we will make some changes to the main text of the blog.

Original text style:

We will change the main text using the following CSS:

#content p {color: #333333; line-height:38px; letter-spacing: 1px; font-family: Palatino, serif; margin-top: 0; margin-bottom: 30px;}

This will give us the following…

Click the update file button and check the changes.

6. Subheadings

Finally for this tutorial we will change the subheadings to match the colour of the title and have it sit nicely on top of the paragraph using:

#content h2 {margin-bottom:0;color:#CC0001;}

Update and check the changes.

On completion of this tutorial the bottom of the CSS file will now look like this:

The theme like this:

Click here to go to Customising the theme of your WordPress website: tutorial #2