To Modify a WordPress Theme’s Colours – Part 1

Part one of our ‘How to Modify a WordPress Theme’s Colours’, see us looking at the colour codes.

In part two, we will look at the image files and give you some useful GIMP software tips.

If you want to hire a WordPress designer, please contact us.

Modifing a Theme’s Style.css Colours.

If you are using a Theme that wasn’t specifically created for your website, chances are you might want to change a colour or two.

This is easily done and hopefully shouldn’t take you too long.

Finding out the colour code for the colour you need to change:

If you don’t know your way around a style.css file, you can use the GIMP to help you identify the colour code, that is probably being used within the style.css file.

It is rare that a web designer is using names such as blue, red, green etc, but instead a hexadecimal colour code.

1. Install the GIMP.2. On a Windows system select ‘Print Screen’ on your

keyboard and either paste the image into GIMP, else on a linux distribution, open the screenshot image with the GIMP.

3. Select the ‘Colour Picker Tool’ from the left-hand toolbar and then select the colour you wish to change in your image.

4. That colour will now be shown in the toolbar, double-click on the colour to open a box that displays the colour code.

5. Copy and paste the colour code into a notepad file.

Finding out your new colour code:1. Double-click on the top box of the two colour boxes in the

left-hand toolbar of the GIMP software.2. You can now use a colour selector to help you find the right

replacement colour.3. Note down the colour code into a notepad file.

Make the style.css file writable:1. Via FTP browse to your Theme directory. i.e.

/wp-content/themes/yourtheme/2. Find the style.css file, right click and change access

settings to 777.3. Disconnect from the FTP server.

Modify the Style.css file:1. From your notepad highlight and copy the colour code for

the colour you wish to change.2. From the WordPress dashboard select ‘Editor’ from the

‘Appearance’ selection on the left.3. Then select ‘style.css’ from the right hand list of files to

edit.

4. Now press ‘CTRL-F’ to bring up the search option. Paste the colour code into the search box and find the colour. Make sure you are changing the right div layer as there could be many instances of the same colour, and perhaps you don’t wish to change all.

5. Now from your notepad file copy the colour code for you new colour, and replace the old colour code in the style.css file.

6. Once finished select ‘Update File’.

Make the style.css file read-only:1. When you’ve finished edit the style.css file you will want to

make it read-only. So connect to your FTP server and find the style.css file in the correct theme directory at /wp-content/themes/yourtheme/

2. Right click on the file and change access settings to 644.3. Disconnect from your FTP server.

Part two of ‘How To Modify a WordPress Theme’s Colours‘, follows.

If you want to hire a WordPress website designer, please get in touch.