:weblucent

So you have a blog, probably set up using a free theme that you’ve chosen and installed, but there are a few things that have been bugging you.

You’d like to change them - and while you’re not going to break out into a cold sweat at the very thought, you haven’t tried this kind of customisation before.

Make a cup of coffee and get comfortable - this is really quite straightforward. I’m going to assume that you’ve got a WordPress blog, but the instructions here are pretty much universal.

Finding the file you need to change

The way that your blog is styled (how it looks) is controlled by instructions in a CSS file or stylesheet - usually called styles.css or style.css. I like to keep these files in a subdirectory called … /css/, but in many themes this file is found in the main directory.

In WordPress, you can edit this file directly by going to the Presentation/Theme Editor tab of your admin dashboard, but I would strongly recommend downloading the style.css file, saving a copy as a backup, editing it on your PC and then re-uploading it. This way you have a regression path (which just means if you got it wrong, you can go back to where you were). Just make sure you put the new version back where you found it in the first place, otherwise your changes won’t have any effect.

You don’t need any fancy software to edit this file - you can do it in a simple text editor like Notepad. If you want a good free HTML editor, you could try HTML-Kit - but everyone has their own favourites, and you don’t need anything more than Notepad.

Once you’ve got the style.css file open, you can make the changes you need. It is often a good idea to make small changes at a time, so you know what you’ve changed, and can change it back easily enough.

But what is a CSS file?

The CSS file contains the rules that govern the behaviour of the elements in the HTML files. You could define these rules in the HTML files, but this does make for a lot of extra work every time you want to change something - best not. (Note that the files in a theme are actually PHP files containing HTML - don’t be worried by the suffix .php. I’m referring to them as HTML files for simplicity).

Each web page in your blog looks up one or more CSS files to find out what rules it is supposed to follow. If you accidentally delete or rename the CSS file, every element in your blog will go back to the default values. It should all still be legible, but it won’t look like you expect it to.

Finding the elements you’d like to change

Your HTML files are made up of a number of elements - some are containers, containing other elements, and some are the individual items themselves. A few examples:

• body - this is the overall container that all your content (text and images) will appear in.
• div - this is a smaller container, that contains just part of your content, such as the sidebar content
• h1 - this is the highest level of header. Other header elements include h2, h3, h4 …
• p - this is a paragraph
• a - this is a link
• li - this is an item in a list
• img - this would identify an element as an image.

Each of these can be uniquely identified and given an id. You might need to distinguish a particular image from all the others, so you call it something like: id=”bestimage”. By doing this, you can apply rules in your CSS file that apply only to that element, by using its given name. You will need to work out what the designer of your theme has used as names …

• In the HTML file, you would have an image labelled:
  < img id="bestimage" ... >
• In the CSS file, you would define the rules for bestimage:
  #bestimage {… }

Elements that you want to look similar can be given a class - for example, you might want half your images to behave in a particular way, perhaps float to the right of the page. You would assign rules to all images labelled: class=”floatright”. Any images not in this class would not follow those rules.

• In the HTML file, you would label the images:
  < img class="floatright" ... >
• In the CSS file, you would define the rules:
  .floatright {…}

Notice that there is a difference between an id and a class - an id applies only to one element, and is defined using #; a class applies to several elements, and is defined using a stop (.) - did you notice that stop?

It is possible to apply both an id and a class to the same element. Just in case you were wondering.

Making the changes you’d like to see - colours

Every element of your page (header, subheader, paragraph etc) is controlled by rules laid down in the style.css file. Elements have default values, so you might not see every element in the file, but this is where you would change the rules for each element.

Every designer will have set out the style.css file in a different fashion, but you should be able to spot the various different rules. For example:

p { color: #000000;}

This rule says that everything in the HTML files for your theme which falls between < p > and < /p > should be colored #000000 (or black). You don’t have to use the hexadecimal value #000000 - we could have just written

p { color: black;}

but using the hex values gives a wider range of colours. Wikipedia has more information on colour names.

To change the colour, simply change the color value, or name. Here, we’ve changed the colour to red:

p { color: #ff0000;}

If you’ve specified a colour, you should also specify the background colour - either by giving a real colour name, or by using ‘transparent’:

p { color: #ff0000; background: white;}

This gives us red text on a white background. Notice that we now have two rules, and they are separated by a semi-colon.

Cascading rules

Because rules in a CSS file overwrite each other as the definition of the element gets more precise, often the generic values for the whole theme are identified at the highest level, and rules are used to overwrite these where a change is wanted. For example, mostly, we might want grey Verdana on a cream background, but bold red Tahoma for the headings, so we could set the generic rule at the broadest level, and refine it for particular elements only:

body {
font-family: Verdana, Geneva, sans-serif;
color: #808080;
background: ivory;
}


h1, h2, h3 {
font-family: Tahoma, Geneva, sans-serif;
color: #ff0000;
background: transparent;
}


You can set different rules for different sections of your page. You might, for example, want headers in your sidebar to be blue, but those in your main content area to be black. You would probably do this by setting the default headers to be black, as before, and then making a more specific rule for the blue ones:


h1, h2, h3 {
font-family: Tahoma, Geneva, sans-serif;
color: black;
background: transparent;
}
#sidebar h2, #sidebar h3 {
color: navy;
}


This makes any headers labelled h2 or h3 that appear in the section labelled ’sidebar’ to use the rule that makes them blue, overriding the earlier rule that made them black.

If you then had just one header in the sidebar that you wanted to be red, you would give it a unique id in the HTML code, and specify the rules for that header in the CSS file:

• In the HTML file:
  < h2 id="redheader">This is the red header< /h2>
• In the CSS file:
  #redheader {color: red;}

Making the changes you’d like to see - font

You can change the font used in your theme. For example, in this declaration:

p { font-family: Verdana, Geneva, sans-serif;}

we are saying that we want to use Verdana as our first choice, but if that isn’t available, use Geneva, and that if that isn’t available either, use any sans-serif font available.

We put a choice of fonts because not everyone has the same fonts available, though some fonts are common to both Mac and PC. You can use any font you like - but be aware that your visitors’ browsers can only use the fonts available on their computer, so if you choose something unusual, your visitors may end up seeing the default browser font, not the one you’ve chosen.

These instructions can be bundled up together, to make the CSS file smaller and easier to read:

p {
font-family: Verdana, Geneva, sans-serif;
color: #ff0000;
background: white;
}

Making the changes you’d like to see - font weight and style

Do you want bold text?

p { font-weight: bold;}

Do you want italics, or underlined text?

p {font-style: italic; text-decoration: underline;}

Making the changes you’d like to see - font size

You will probably want to differentiate between headings and your main text by changing the size of the font.

There are several different ways of dealing with font-sizes, and there is much debate about the best way. None of them is perfect.

The simplest is to use the font-size keywords xx-small, x-small, small, medium, large, x-large and xx-large, based on your visitor’s default font size:

p {font-size: medium;}

Another way of sizing fonts that you might find in your chosen theme is to use pixels:

p {font-size: 12px;}

This is easy for the designer, as it makes it more likely that the display of the page will be consistent; however, there can be accessibility issues, as the visitor will not be able to change the font size - and, for some users, they may therefore not be able to read the text.

Another font-sizing technique is to use ems:

p {font-size: 1em;}

1 em is equal to your visitors default font size - a bigger number (1.5em) will give a bigger size, a small number (0.8em) a smaller size. Your visitors will be able to resize the text to suit themselves.

My own preference is to use percentages:

p {font-size: 100%;}

This would set the size to be 100% of the user’s default size settings. Decreasing the percentage will make the text smaller; increasing it will make the text larger (and yes, you can go bigger than 100%).

The difficulty with both ems and percentages is that as the rules in your CSS file become more specific, the rules have a cumulative effect which you might not expect. If your font-size in the body element is set to 90%, and then you set the font-size in a p element to 80%, and a font-size in a class of p to be 75%, you will get 75% of 80% of 90% … Keywords don’t do this, but unfortunately, browsers don’t apply the keyword sizes in the same way.

So none of these is perfect, but I suggest that you look to see what option the designer of your chosen theme has used, and stick with it for now. Increase or decrease the sizes by changing the keyword, percentage, or size of em, and see what it looks like.

Making the changes you’d like to see - line-height, margins and padding

Finally, you might think that you need more space between paragraphs, or between the text and the edges of the container holding the text - or even between the lines.

To get more space between the lines of your text, use line-height. Vary the number to see the effect of different line-heights:

p {line-height: 2.0;}

An alternative method is to use percentages - if the designer of your theme has used these, stick with this as the measure to use.

To get more space between paragraphs, use padding or margin, depending on the effect you want. It may not matter in the short term which you use, but as your designs get more complicated, you may need to be more precise. Margin adds space around the outside of the element; padding adds space between the edge of the element and its contents.

p {margin: 1em;}

This applies a margin to all four sides of the p element.

p {margin: 0.5em 1em 0.5em 2em;}

is the same as

p {
margin-top: 0.5em;
margin-right: 1em;
margin-bottom: 0.5em;
margin-left: 2em;
}


You can, of course, just modify one margin, if that is all you need. Use the same rule for padding - just replace margin with padding throughout. Like font-sizes, you could use pixels or percentages to define the size of the margin - you might find your designer has used any of these. Best to stick with their chosen measure for consistency.

It’s all gone horribly wrong!

Probably you’ve missed out an end bracket or semi-colon in your CSS file. Have a quick look and see if you can see anything obvious. Try validating your code and looking carefully at any errors shown.

I like to use Firefox, which has a fab extension for web developers. This makes validation and tracking down errors easier, and has the facility to show you the name of each element - very handy if you didn’t design the theme, and don’t know the naming standards used. Or even if you did design it …

If you get completely stuck, you can re-upload your original style.css file (you did keep a copy, didn’t you?) and start again.

There is of course much more to CSS than I have been able to cover here - much more to changing the fonts, too - but this should get you started. If you want more, then I can recommend these books:

Designing with Web Standards by Jeffrey Zeldman and CSS: 101 Essential Tips, Tricks & Hacks by Rachel Andrew.

Have fun!

This entry was posted on Wednesday, July 11th, 2007 at 4:58 pm and is filed under Blogging. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.