Changing the Color Scheme

The Fonts & Colors tab of the template editor lets you change the colors of your template in any which way you like. But did you know that you could manage all the colors and fonts of your template this way quite easily?

Variables

Blogger Beta uses variables to 'link' the Fonts & Colors editor to the css-part of your template. In this tutorial you will learn how to add variables to your template, and how to make it all work.
In the head of your template you will find 2 types of variables, one for fonts and one for colors.

Colors

The variable for colors looks like this:

<Variable name="bgColor" description="Background Color" type="color" default="#efefef" value="#efefef">

This means that you have a variable with the name bgColor. In the Fonts & Colors editor you will see the description (Background Color). The default value is some light-gray (#efefef), and its current value is also lightgrey.
Now, if you change the background color with the Layout editor, the new color value will be written in the value-field of the variable in the css-part of your template (try it!). Clicking on the template-defaults link in the Layout editor resets the color to the value stored in the default-field (isn't that a neat thing the Blogger guys came up with!)

Now, check all id's and classes where you want to use this background color. Remove all hard-coded colors, and replace them with a reference to the variable, in this case $bgColor. (Dollar-sign in front of the variable name).

So if your template's content-wrapper uses the background-color, change the code:

#content-wrapper {
   background-color: #efefef; }

to:

#content-wrapper {
   background-color: $bgColor; }

You can add as many variables as you like. Just use the format as given here, and replace all hard-coded colors with references to the variable name.
Variables will appear in your Layout editor in the same order as you entered them in the template. So choose the ordering well: group variables together logically.

You could end up with dozens of colors, but from a perspective of readibility of your blog that would not be a good idea. Think up a flexible color-scheme, but don't overdo it (unless it's Carnival next week....)

Fonts

Now, with fonts it works basically the same way as with color. The format of the variable is somewhat different.

<Variable name="bodyFont" description="Text Font" type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">

Here, the default and value fields work the same as with colors. The entries normal and normal are used for indicating bold and italic. The setting for bold will be: "bold normal", for italic "normal italic", and for bold italic "bold italic".

You can add as many fonts-variables as you like. But again: don't overdo it!