T U T O R I A L     S E R I E S

Personalise your WordPress Weblog

So you've installed WordPress, you have the Classic Theme staring at you, and you feel this need to alter it. Well you don't need to know PHP to do that, you don't need to know any sort of programming code in fact. All you do need to do is alter the CSS. (Oh, and if you are wondering about any 'nice stuff' that you have seen on other WordPress weblogs, they are probably controlled by plugins - again, you don't need to know code).

These tutorial pages are an attempt to help explain some more about the CSS that controls your WordPress weblog, and enable you to both see how CSS affects your page, and hopefully remove any worries you have about it.

All the changes that can be made by following any part of this guide can be done using the Template editing function from your Login screen. I would recommend though that you use your ftp program to keep regular backups of your css.

The intended target for this work is someone who wants to make purely cosmetic changes to their weblog, and to understand a little more about CSS.

In the examples I give, I always suggest using a bright colour for a new effect. You don't have to - I've just found that this makes changes, especially when I'm not sure quite where they will appear, much easier to find. A good page for web-safe colours I use is Colorlab.

A couple of pointers;

• Always keep a backup of your last working style sheet.
• Make only 1 change at a time if you are in the least bit unsure.
• Be prepared for your CSS to cause some 'interesting' effects if you get something wrong. We all make mistakes, and sometimes it's the best way to learn.
• I tested everything here on my testblog, so I do know it works.
• This guide covers the Classic WP theme. It does not cover any other styles. That said, the principles are the same, and the code is probably very similar so feel free to explore.
• If you do not see a change in your weblog after altering your CSS, it may be that the browser is using the cached style sheet in your computer. To force a refresh, press CTRL-F5 if you use Windows.

The information in the graphics are image mapped. Click on the red number to go to the relevant section.

Sections:

• The Header
• The Post Content
• The Menu
• The Footer
• Link Classes
• The rap div & Images
• Put the menu on the left
• Image alignment & Drop Shadows
• Customising the Comments page

If there is something that you think could be added here, or you spot an error, or if what is here does not cover the issue that you are having difficulty with, please post to the WordPress Support forums.