The Fonts & Colors Tab
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 can also manage all the colors of your custom template this way quite easily?
Variables
Blogger 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.
This tutorial is about colors.
Colors
The variables 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.
