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:
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 variablesLet'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.
<variable name="bodyfont" description="Text Font" type="font"
default="normal normal 100% Georgia, Serif"
value="normal normal 100% Tahoma, Serif">
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.
<variable name="textcolor" description="Text Color" type="color"
default="#333" value="#0000ff">
Direct modification of the CSS codeThe 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.
