Blogger provide an awesome tool for customizing a template called a Blogger Template Designer. Using Blogger Template Designer you can change the font style, color,width of template, background of template. Blogger Template Designer provide an easy way customizing template if you added interface into template for Blogger Template Designer. In this post I'm telling how to add interface for Blogger Template Designer in your custom template.
Let us start,
Interface with Blogger Template Designer is created with the help of the variables. Variables are used to store some values like color, font family, font size, background image URL. Those values are used into CSS for applying look and feel for template.
This variable are defined between
<b:skin><![CDATA[]]></b:skin>Syntax of defining variable is
<Variable name="post.title.font" description="Font" type="font" default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 24px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>nameis variable name, which is unique name, used to access variable into CSS.descriptionused to identify variable into Blogger Template Designer.- Using
type, Blogger Template Designer decide which type of interface is provide for customizing variable. You can use font, color or any custom string. - Template designer provide the following type of box for changing font value.
- For color,
defaultis default value which is unchangeable, this is used to reset the value of that variable.valueis current value.
Syntax for Font_Shorthand format,
<font-style> <font-variant> <font-weight> <font-size> / <line-height> <fontfamily>Grouping Variables
Grouping variables is make also user friendly interface with template designer. By grouping you can access multiple properties for that element at one place. For example for post title you can group post title color and post title font together. Another example grouping together link color, visited link color and hover link color under the link.
Syntax for Group,
<Group description="Group Title" selector="h1">
....
<!--Variable here-->
....
</Group> descriptionis name of group title, used to categories variable in blogger template designer.selectormention that which part is selecting from blogger template while this group is selected for editing. It is useful, when someone editing template via designer, it shows to user which part of template being edited.
<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font" default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 48px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#ffffff"/>
</Group>header.font having type font with description Font and variable header.text.color having type color with description Title Color. When you see this in template designer look like as,
How to use in CSS
In general, we are using css like this.
.header h1{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
color:#00C;
}.header h1{
font:$(header.font);
color:$(header.text.color);
}Example,
<?xml ... ?>
<html ....>
<head>
<b:skin>
<![CDATA[
/* Variable Defination
<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#c4005b"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#909090"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#ff13b8"/>
</Group>
*/
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
]]>
</b:skin>
</head>
<body>
....
</body>
</html> Width of Blog and Sidebar
In template
<b:skin></b:skin> used for enclosing an CSS, same as <b:template-skin> and </b:template-skin> is used to enclosed length factor of template means width of template, sidebar.In this, variable syntax is same but type of variable is length.
<b:variable default='960px' name='content.width' type='length' value='990px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='340px'/> 
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='990px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='340px'/>
<![CDATA[ body {
min-width: $(content.width);
}
.main-inner .columns {
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
} ]]>
</b:template-skin>
