• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Talk About Local HomepageTalk About Local

Hyperlocal in the UK

  • Home
  • Working with us
  • In the press
  • Blog
  • Contact
  • LNE

Customising the theme of your WordPress website: tutorial #2

18th February 2011 by nickygetgood

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.

menu

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.

description

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

#site-description {width:230px;}

description2

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.

background

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.

newbackground

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

In the admin dashboard select Media > Add New

add-new-media

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

select-file

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.

image-url

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.

with-background

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

css tutorial 2

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

  • About
  • Latest Posts
nickygetgood
Latest posts by nickygetgood (see all)
  • Some hyperlocal winners at the Wales Blog Awards - 24th September 2012
  • Talk About Local training at Peabody's Pembury Learning Centre - 7th June 2012
  • Networking for Work - 10th May 2012

Filed Under: Step By Step Guides, Wordpress Guides and Tips Tagged With: CSS, customisation, hyperlocal, Najm Clayton, theme, wordpress

Reader Interactions

Trackbacks

  1. Tweets that mention Customising the theme of your WordPress website: tutorial #2 | Talk About Local -- Topsy.com says:
    18th February 2011 at 1:12 pm

    […] This post was mentioned on Twitter by Journalism.co.uk, Gutenbyte. Gutenbyte said: Customising the theme of your WordPress website: tutorial #2 …: A guide written for talk about local by … http://tinyurl.com/4ky2gcy […]

  2. Customising the theme of your Wordpress website: tutorial #1 - Talk About Local says:
    12th July 2011 at 2:33 pm

    […] Click here to go to Customising the theme of your WordPress website: tutorial #2 Nicky Getgood View all posts by Nicky Getgood Nickys website […]

Footer

Search

  • Contact
  • Guidelines
  • Legal

© 2022 · talk about local · Maintained by Mike