Now I know this may be common sense to a lot of people but I’m going to run through the way I changed the colour scheme to this blog. I had to start somewhere and basically, through trail and error, I found a way of personalising the colour scheme to suit me. My way may not be the preferred method, but it’s how I do it and might help someone out.

Choosing the colours

If you’ve read my previous posts you’ll understand that I do stuff by accident, and changing this theme was just that! I like the Blogging Pro theme and that’s why I chose it and I didn’t intentionally have the idea of changing much, just to ad a few plugins. The one thing I did want was a different header logo which I got from Cool Text online logo generator: really simple to use and free!

I now had a clean looking text header for this new blog which I uploaded in cpanel to the images folder in the theme folder. I named the image bodybg.png. see my next post on changing the header.

Now I’d got (a sort of) logo which didn’t quite match the orange colours on the Blogging Pro theme. To pick the colours from the logo, to change mouses overs and general text I used a Color Detector from here: www.cosmin.com/colordetector which is a simple to use Free programme. I went through the whole blog with the mouse jotting down the standard colours and made notes of which ones I would like to change. Then I moused over the logo looking for colours for this blog which would compliment the logo.

Changing the stylesheet

Next up was to make the necessary changes in the theme stylesheet from within the WordPress control panel.

I looked for occurrences of the old colours I wanted to change and simply changed them out for the new colour codes.

i.e:

a:link { text-decoration : none; color : #3366cc; border: 0px;}

a:active { text-decoration : underline; color : #3366cc; border: 0px;}

a:visited { text-decoration : none; color : #3366cc; border: 0px;}

a:hover { text-decoration : underline; color : #ff5a00; border: 0px;}

Became….

a:link { text-decoration : none; color : #3366cc; border: 0px;}

a:active { text-decoration : underline; color : #3366cc; border: 0px;}

a:visited { text-decoration : none; color : #3366cc; border: 0px;}

a:hover { text-decoration : underline; color : #b07815; border: 0px;}

This was all completed in about 5 minutes and can be copied through to the borders and so on.

If anyone has problems with finding colours I’d recommend the Color Detector as it’s saved me a lot of time.