HOWTO: Customize Fonts and Colors : The Blogger Guide

Fonts and Colors in the Blogger templates can be used to tweak the look and feel of a given blog. The usual way of changing them is to use the Fonts and Colors pane.

However, this option gives you only a limited set of colors and fonts. There are two other, slightly advance ways in which you can customize the fonts and colors in your template. They are:

Use of template variables and
Direct modification of the CSS code

I will use the Minima template as an example. (Though most templates use a common set of variables, some have slightly different variables depending on the design of the template)

Use of template variables
Let's say you want to change the Text Font from the default Georgia font. The Font and Colors option gives only 5 other fonts. If you want to use a different font other than the given ones, you can do so using the bodyfont variable.

Go to Layout -> Edit HTML and scroll down to the "Variable definitions" section in the template skin. Locate the bodyfont variable. (See figure below)

As you can see, the bodyfont variable has 5 attributes. In this article, we will focus on the two attributes named default and value. (See the article on Blogger Template Variables for a detailed discussion on them) The attribute default contains the default Text Font for the Minima template. Whenever you click the "Revert to template default" option in the Fonts and Colors pane, Blogger applies these default font settings. The attribute value contains the current settings for the Text Font.

It is not adviceable to change the settings in the default attribute. The prudent way to set a different font is to change the value attribute. For example, if you want to use the font Tahoma, you need to change it as shown below.

Color variables work the same way. You should provide a hexa-decimal number as the RGB color value. Changing the text color to blue can be done as follows.

Direct modification of the CSS code
The second method is to directly modify the CSS code in your template skin. For example, let's consider the textcolor variable. The variables defined in the "Variable definitions" section are accessed elsewhere in the skin by prefixing its name with a '$' character as in $textcolor. Do a Find (Ctrl+F) in your browser for the string '$textcolor' to see where it is used. In Minima, one use of that variable is in the body CSS selector.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
...
}

When the blog actually gets loaded in a browser, the Blogger platform will replace this variable with the color specified in the value attribute of the textcolor variable. You can directly specify a color value in this place, bypassing the replacement step. Here you can provide an RGB value or one of the standard 16 color names. For example:

body {
background:$bgcolor;
margin:0;
color:#ff0000;
...
}

body {
background:$bgcolor;
margin:0;
color:red;
...
}

(In addition to the standard 16 color names, most browsers support this extended set of color names)

Remember, however, that using the direct modification method to replace existing variables is of little use, because thereafter, any modification you do through the Fonts and Color pane has no affect on the variables you replace. Use the direct modification method when you want to override one of the template defaults or you want to tweak the look and feel in a manner not provided by the template.