How to change the color scheme of your blog

This is a How To that has been written bit by bit over a couple of weeks. Simply because it is so much longer, and I keep forgetting about it.

So here it is. Once and for all!

If you are looking to change the colors on your blog, this is the guide you’re looking for.

Here goes…

* Firstly, it helps if you know a bit about HTML and CSS. If not, fear not.

* Secondly, you will need to install firefox. Firefox is a web browser that is FAR better than Internet Explorer. It is more stable, less of a security risk, and is faster. Firefox also allows you to install ‘add-ons’. A Firefox add-on is just like a wordpress plugin. It is made by someone else, and provides some extra functionality. So head to getfirefox.com right now and install the latest version of firefox onto your computer before you go any further. There is a Firefox Add-on you need to make this tutorial work for you.

So with those things said, let’s get to it.

1. Open your Firefox browser and go to this link: https://addons.mozilla.org/en-US/firefox/search?q=colorzilla

2. On that page you will see a ‘Add To Firefox’ button. Click it and follow the simple instructions that will pop up. After the Add-on is installed you will be asked to restart Firefox. Click yes. If you do not get asked this, just close firefox and start it up again. You need to restart firefox one way or another for the add-on to work.

3. Congratulations. You are a smart cookie.

4. You now have a ultra-cool firefox add-on installed. If you look to the very bottom left of your screen you will see a little paint selector as shown in the image right here. See it in the image? In that little orange square? Yours will look just like that, but your little square won’t be orange.

5. Go to your blog address, so you can see the colors you wish to change.

6. When your blog has loaded, locate your little paint brush selector and click on it. Your mouse arrow icon will now change to a crosshair.

7. Hover your crosshair over the color you want to change on your blog.

8. Now, if you look down to the list of numbers and letters to the right of the little color selector box again (down the bottom of the screen) you will see a 6 digit code starting with #. See it?

That’s your color code!

9. Make a note of it. Write it on a bit of paper or somewhere more permanent that your short term memory!

10. So. You know the ‘Hex Code’ of the color you want to change. This is good news indeed. And we took 10 whole steps to get here! Now, I’m going to show you where the colors of your blog are specified so you can edit them.

11. Log in to your blog admin area.

12. Hover over Design at the top, then click Theme Editor.

13. You are now on the page you need to be on: The Stylesheet. In the big edit box that is open you will see a TON of weird code. IN that code is your Hex color code, telling your blog what colors it should put where. So you are going to need to dive in and edit all places where your color code is, and change it to something else.

14. To do this, you should first save a backup copy of the stylesheet. You can do this by highlighting it all, right clicking on it, then clicking ‘Copy’. You now have the entire stylesheet copied to your clipboard. Now you just need to paste it into a document and save it somewhere safe! So open up a notepad on your computer, and right click on the text editing area and click ‘Paste’. Now save a copy to your desktop. This will keep everything safe, in case your color edits don’t work out so well!

15. Right. So. You’ve got your stylesheet backed up. Phew. That was a close one.

16. Open another empty notepad document, and paste in the whole stylesheet again. Exactly like you just did. This time though it’s for you to edit the code, not save it somewhere.

17. Open up ‘Find And Replace’. In Notepad you can find this by clicking ‘Edit’ at the top.

18. In the ‘Find’ box, type the Hex Color Code you wrote down from steps 8 and 9. For example, #ff9900.

19. In the ‘Replace’ box, put your desired color code. Don’t forget to use the #! You can find color codes here: http://www.december.com/html/spec/color.html

20. Now when you’ve got that set up, hit Replace All! And you should see your code whizz through, replacing the Hex Colors.

21. Now, highlight everything in the document and paste it back in to the big edit box in your admin area. The Stylesheet box.Make sure you delete everything from the edit box first, before you paste this in as well.

22. Click Update File, and take a look at your blog.

It will have a new color

You can now repeat this for any colors you like, as many times as you like. You could even do a different color each week. The instructions seem like a lot, but that is only because I didn’t want to miss anything out that a new person might need.

So the more you do it, the faster you’ll get.

Lewis

P.S. A few people have asked me if they can pay me to jump in to their blog and change some colors round, but because I am usually absolutely swamped with my work I have to decline. Hence the detailed instructions here instead