OK, I’ve been meaning to post about this for a few days now. The trouble is, changing colors and other style attributes requires more than basic HTML knowledge; you have to get into what’s known as “Cascading Style Sheets” or CSS, which take a bit of explanation. If you are careful, though, it’s not terribly hard, especially if you keep a backup of your blog’s stylesheet so you can recover from any experiments that go awry. I’ll start with a general overview of stylesheets and then get down to the nitty-gritty about how you use them to change the look of your blog. Part one will end with a concrete example of how to change the colors of links in your blog; later, part two will show you how to apply that technique to other aspects of your blog.

Stylesheets have a lot of options and technicalities, but basically they boil down to a list of rules for how different HTML elements should be displayed. For instance, if you want all bold text to look red, you can set up a rule that the B tag has the color red. You can actually change much, much more than colors; stylesheets let you control all sorts of things like font, text size, margins and borders for just about everything, and even the position of items on the page.

I suggest taking a look at your blog’s stylesheet at this point. Open up a separate browser window and log in to the blog admin page. Go to your blog’s control panel and click the “Templates” button in the sidebar. Look for the Stylesheet entry in the index Templates list, and double-click it. Before doing anything else, back this template up; copy everything in the large text box and paste it into notepad or some other text editor (Word is OK as long as you save as text and not .doc format.)

If you decided to skip that step, I seriously suggest going back and doing it right now. If you don’t, you may regret it as soon as you start making changes.

Once you have backed up the stylesheet template, take a closer look at it. The top section should look much like this:

body	{
margin: 0px 0px 20px 0px;
background-color: #8FABBE;
text-align: center;
}
a	{
text-decoration: underline;
}
a:link {
color: #8FABBE;
}
a:visited {
color: #8FABBE;
}
a:active {
color: #8FABBE;
}
a:hover {
color: #006699;
}

These are the first six rules in the stylesheet. (Each rule starts with a name, and inclides one or more attributes inside a set of curly braces.) The name of the rule defines what HTML elements it applies to; the first one is the BODY tag, and the rest are for the A tag. Those of you at least somewhat familiar with HTML will know that the A tag defines a link; all the different A rules here control the appearance of various states of a link, i.e. before it is visited (the a:link rule), after it has been visited(the a:visited rule), as it is being clicked on (a:active) and as the mouse is hovering over is but not clicking (a:hover).

We’ll use these as examples to work with. You probably want to change more than the colors of links in your blog, but that will be covered later after we have a basic understanding of how colors work in stylesheets.

Take a look at the “color: #8FABBE” line in the a:link rule. That 8FABBE encodes a color, expressed as a combination of red, green, and blue. Now, I could spend paragraphs explaining hexadecimal encoding of RGB colors, but there’s an easier way to get the encoding for a particular color. webreference.com has created a tool called the colorizer that makes this process fairly painless. Go there and play around with the settings until you have a color you like (it’s probably easiest to click on the “Red” selection, move the red scrollbar up or down until you see a color you like somewhere on the color grid, then move the pointer on the color grid to that color.)

Once you have picked a color, copy the Hex value from the top of the three boxes to the lower right of the colorizer. Paste that in place of the “#8FABBE” in the a:link rule; be sure you include the pound sign. Now hit the Save button below the template text box; after a moment the page will refresh and a “Rebuild” button will appear in a yellow area near the top of the screen. Click that button to complete the process.

Now view your blog. If you’ve done this correctly, any unvisited links in your blog will be the new color, instead of the default grayish-blue. If it didn’t work, go back and check that you followed the directions exactly; there should be only one “color” line within the curly braces that follow the “a:link” name. The word “color” should be followed by a colon, a space, a pound sign, the six hexadecimal digits you copied in, and a semicolon. Every time you make a change, remember to save and rebuild.

If you can’t get it to work, or if it does anything weird that you weren’t expecting, just copy the “color” line from one of the other rules in place of the one you changed, so you get back to “color: #8FABBE;”.

Try this with some of the other A rules. Play around with the colorizer some more until you get the hang of it. That’s all for today; tomorrow I’ll talk about how to change the colors of other page elements, like the banner, the background, and so on. If you have any questions, post them as comments here and I’ll answer them for you.

Hope this helps, and happy blogging!