The new Layouts templates have "template variables", which are very useful when it comes to defining the look and feel of your blog. Here are some commonly asked questions about template variables.
What is a template variable?A variable in programming can be considered as a placeholder for a value that can change from time to time. A variable can be assigned a value and, from elsewhere in the computer program, you can use that assigned value. Template Variables in Blogger is just the same concept applied within the scope of Blogger templates.
Where can I see them?These variable are usually located right at the beginning of the
blog skin. When you open your template Edit HTML mode (i.e. Layout -> Edit HTML), you can see a section called "Variable definitions". All the variable are defined in this section.
What is the format of a variable?A template variable is defined in a syntax similar to XML/HTML elements, inside a
<Variable> tag. However, these tags don't have a closing tag (i.e.
</Variable>) nor they are empty elements (i.e.
<Variable .../>).
Each variable has 5 attributes.
- name: The unique name or id of the variable. The name cannot contain spaces
- description: A short description of the variable. This is what works as the "display name" of the variable in the Font and Colors pane. (See figure below)
- type: The type of the variable (See the next question for more details)
- default: The template default value for the variable. Whenever you choose the "Revert to template default" option, it is this value that gets applied to the variable in concern.
- value: The current value of the variable.
The link between a variable description and its display name is illustrated below.
What are the different types of variables?Currently, there are 3 types of variables. They are:
- color: Different color elements such as Text Color, Page Background Color etc.
- font: Different fonts used in the template such as Text Font, Sidebar Title Font etc.
- automatic: Miscellaneous variables [e.g. startSide and endSide, that are used to control the "reading order" (left-to-right or right-to-left) of the blog language]
font and
color variables are editable both through the Fonts and Colors pane and the Edit HTML mode, whereas the
automatic variables are only modifiable via the Edit HTML mode.
How can I add a new variable?You can add new variables very easily. Copy and paste an existing variable of the
type you want and provide a unique name and a description for it. If it is a
font or
color variable, it will be readily visible in the Font and Colors pane.
For example, to add a variable to control the sidebar text font in Minima template, you can add the following variable to the "Variable definitions" section. (Additional lines breaks are added for clarity. All of this can be in the same line)
<Variable
name="sidebarbodyfont"
description="Sidebar Text Font"
type="font"
default="normal normal 100% Georgia, Serif"
value="normal normal 100% Georgia, Serif"
>
Once added, it will be visible as follows.
But adding the variable is only part of the job. Next you have to use it in the relevant CSS selector. In this example, we need to modify the
.sidebar selector and insert the line shown in red below. Note that when variables are used (i.e. referenced) elsewhere in the template, its name should be prefixed with a '$' character.
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
font: $sidebarbodyfont;
}
What is the scope of template variables?These variables are visible and available (
scope in programming terms) for use only in the Edit HTML mode of your template. Once a blog page actually gets loaded, all the uses of the variables (all
$name instances) get substituted with the actual value of the variable defined in the
value attribute.
They cannot be used from the blog post editor as well.
