If you have installed Wordpress, you are presented with couple of themes. They are not particularly exciting, and most people want something that looks a little more individual.
There are literally thousands of free themes out there. If you are running the latest version of Wordpress (and I hope you are) then downloading these themes to your site is simplicity itself. You can have a preview of the new theme and if you like what you see, you can activate it.
However, this is still not enough for most people. They want something that is individual to themselves, whether it is a personalised header graphic or an entirely new colour scheme.
Customising a Wordpress theme can be quite simple. The only requirement is that you should have a rudimentary knowledge of HTML and CSS.
My own personal method of creating a scheme that I like is to browse the Web for a theme that has all the rudiments that I require. I will then set about customising it.
In the majority of cases, themes follow a similar pattern in that the basic files are common to most themes.
The main files which require moderation are usually
- header.php
- Footer.php
- sidebar.php
- style.css
These are found in the folder wp-content/themes/yourtheme where ‘yourtheme’ is the name of the theme you are modifying.
Probably the most important of these is the file ‘style.css’.
Say for example, you wish to change the banner on the site.
The simplest method is to right-click on the current image. It is usually a background image so you select ‘View Background Image’ or ‘Save Background Image’, depending on your browser. One way or another, this will give you the name of the file – usually something like ‘banner.jpg’ or ‘header.jpg’.
Having retrieved the name, (you needn’t save the file or anything else), you then search through ‘style.css’ until you find a mention of that file.
For example, the top image on this site is ‘header-bg.jpg’ and it is located in the ‘images’ directory. If I search through the ‘style.css’ file (which is pretty large) I find the following:
#head {position:relative; width:990px; height:250px; margin:0 auto; text-align:left; background: url(images/top-right-bg-repeat.jpg) 90px 0px repeat-x;}
.crack {position:absolute; left:0px; top:0px; width:990px; height:51px; background: url(images/crack.jpg) 627px 0px no-repeat;}
.header {width:627px; height:250px; background: url(images/header-bg.jpg) no-repeat;}
.logo {position:absolute; left:0px; top:115px; width:627px;}
.logo h1 {font: bold 26px/120% Georgia; color:#602600; padding:0 0 10px 20px; margin-right:16px;}
I can therefore change that line to use a different file, though it should be noted that the alternative image must have dimensions of 627 pixels wide and 250 pixel high, otherwise there may be problems.
Essentially any image in the scheme can be changed this way. Of course another method is to just rename your new file to that of the existing one, and then overwrite it (So I would rename my personal file as ‘header-bg.jpg’ and overwrite the existing file).
Colours are slightly harder to change.
Colours in CSS files are invariably written in the form #112233. This is in the format Red-Green-Blue so that the 11 refers to the level of red (on a scale of 0 to 255), 22 refers to green and 33 to blue. However, it uses what’s called hexadecimal notation which means that 255 becomes FF. Without going into too much detail, counting in Hexadecimal follows the following pattern:
1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11 ….. 19, 1A, 1B … 1F, 20 …
In other words, F in Hexadecimal is 16 in denary (decimal), and 10 (in H) is 17.
So your colour should always consist of six characters ranging from 0 to 9 and A to F.
As an example of the two limits, Black is #000000, and White is #FFFFFF.
Examples of that notation will crop up throughout your ‘style.css’ and any of these can be changed to provide your desired colours. The biggest problem is determining a) the code for the number you require, and b) which bit of code refers to the colour you wish to change. Sometimes it can be obvious – in the code extract above, the font in the header (logo) is set to #602600, so changing this will change the colour of the words “The Other Fellow”.
Customising a theme initially can be a case of trial and error, but if you become familiar with a particular theme, you will soon learn which elements are which and what colour refers to what.
Initially it can be a case of pot luck, but with a bit of practice, you should soon be able to tweak your theme to the style you wish.
Good luck!