I felt quite bored looking at my own blog that is so bland, so I decided to sneak around the stylesheet to add some colors to the sidebars so it looks a little bit more like the original copyblogger. Keep in mind that I am a total noob with no prior training in CSS or whatever. It was through trial and error, but if it is simple enough for me to be able to change the color, anyone else should be able to do it. So here goes. This tutorial are for those who are a bigger noob than me.
Go to Dashboard- Presentation- Theme Editor – Stylesheet. Scroll down until you see this /*—:[ sidebar styles ]:—*/ Look for this line of codes:
ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 16.6667em; margin: 0 0 0.5em 0; font-size: 1.2em; line-height: 1.66667em; float: left; background:#ede9d6;}
Add the words background followed by the code of the color you want. Don’t forget the colons and semi colons. Then you will want to bring the widgets closer together because the look really weird after you have added colors as they are seperated very far away from each other. Look for the values after the word margin. Change the original value of 2.5em to 0.5em as indicated in bold italic above . Update your file and see the changes.
How to find out the exact html codes of web colors
I use a very niffty program called pixie from nattyware. It’s very small program that takes 2 seconds to download if you have broadband, but it is very useful. When you run it, a small window about 2″x 1″ opens and when you see a color you like and want to use it, just hover your cursor over the color, and the codes can be seen in the pixie window. Download at Nattyware.com
