Working with Blogger Variables

Find out how to use Blogger variables to make your blog template's fonts and colours tweakable. Full example included.

In Create Your Own Blogger Template, you learned how to convert an HTML template into a Blogger template by inserting Blogger tags and altering the template's CSS. Such a template is fine if you're just creating the template for your own use. However, if you give the template to other people then they may want to tweak the template's fonts and colours via Blogger's Fonts and Colors tab:

To make your template tweakable in this way, you need to insert some Blogger variables into the template. Here's how variables work:

• You insert variables inside the b:skin element in the template, and give each variable an initial value. You can create as many different variables as you like.
• You use these variables throughout your template CSS when defining fonts and colours.
• When the blogger changes a font or colour via the Fonts and Colors tab, the variable's value is updated in the template, causing the new font or colour to be used throughout the template's CSS.

In this tutorial, you'll take the Tope template you created previously and make it tweakable by adding Blogger variables.

How to create a Blogger variable

To create a Blogger variable, you add a Variable tag inside the template's b:skin element. A Variable tag takes the following format:

<Variable name="name" description="description"
          type="type" default="default-value" value="value">

The attributes inside the tag work as follows:

name

The name of the variable. This is the name that you'll use when referring to the variable in your CSS.

description

This is the "friendly" name of the variable as it appears in the Blogger Fonts and Colors tab.

type

The variable type. The 2 main types are color for hex colour values, and font for font properties.

default

The default value for the variable. This is the value used when the blogger first uploads the template.

value

The current value for the variable. Make this the same as the default value. If the blogger changes the value in the Fonts and Colors tab then this attribute gets overwritten with the new value.

Font variable values need to be in the format used by the font shorthand property, and must use percentage sizes. For example: "normal normal 85% Georgia, serif".

How to use a Blogger variable

Once you've created a Blogger variable, you can use the variable's value in your CSS by writing a dollar ($) symbol followed by the variable name. For example, say you've created a variable called textColour:

   <Variable name="textColour" description="Text Colour" type="color" default="#393b4a" value="#393b4a">

You can then insert textColour's value — in this case, #393b4a — in your CSS as follows:

color: $textColour;

Special Blogger variables: startSide and endSide

There are 2 additional variables that you can use in your Blogger template:

<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right">

These 2 variables are useful if you want to make a "bi-directional" template: that is, a template that works with both left-to-right languages like English, and right-to-left languages such as Hebrew and Arabic. The code above is suitable for a left-to-right language. If the blogger picks a right-to-left language for their blog (using the Formatting tab under Settings) then startSide's value changes to "right", while endSide's value changes to "left".

You can use $startSide and $endSide throughout your CSS to specify things such as floats, margins, padding, and text alignment. For example:

  float: $startSide;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: .25em;
  padding-$startSide: 15px;

Making the Tope template tweakable

You now know how to make your Blogger template's fonts and colours tweakable. The process goes like this:

1. Go through the template CSS and look for a font or colour value that you'd like to make tweakable.
2. Add a Variable tag for that value inside the template's b:skin element.
3. Replace the appropriate font or colour value(s) in the CSS with the variable name.
4. Repeat until you've made all your fonts and colours tweakable.

Now, open the Tope template file (tope.xml) from the previous tutorial in your text editor add your Blogger variables between the <b:skin> and </b:skin> tags. For each variable, replace the appropriate hard-coded value(s) in the CSS with the variable name.

Here are the variables I added:

/* Variable definitions
   ====================
   
   <Variable name="contentBackgroundColour" description="Content Background Colour" type="color" default="#efedd9" value="#efedd9">
   <Variable name="textColour" description="Text Colour" type="color" default="#393b4a" value="#393b4a">
   <Variable name="linkColour" description="Link Colour" type="color" default="#2e5a8c" value="#2e5a8c">
   <Variable name="visitedLinkColour" description="Visited Link Colour" type="color" default="#802f8c" value="#802f8c">
   <Variable name="hoveredLinkColour" description="Hovered Link Colour" type="color" default="#000" value="#000">             
   <Variable name="blogTitleColour" description="Blog Title Colour" type="color" default="#000" value="#000">
   <Variable name="blogDescriptionColour" description="Blog Description Colour" type="color" default="#393b4a" value="#393b4a">
   <Variable name="postTitleColour" description="Post Title Colour" type="color" default="#a0854f" value="#a0854f">
   <Variable name="postFooterTextColour" description="Post Footer Text Colour" type="color" default="#666" value="#666">             
   <Variable name="borderColour" description="Border Colour" type="color" default="#333" value="#333">
   <Variable name="sidebarHeadingColour" description="Sidebar Heading Colour" type="color" default="#484743" value="#484743">

   <Variable name="textFont" description="Text Font" type="font" default="normal normal 85% Georgia, 'Times New Roman', Times, serif" value="normal normal 85% Georgia, 'Times New Roman', Times, serif">
   <Variable name="sidebarHeadingFont" description="Sidebar Heading Font" type="font" default="normal normal 120% Georgia, 'Times New Roman', Times, serif" value="normal normal 120% Georgia, 'Times New Roman', Times, serif">
   <Variable name="blogTitleFont" description="Blog Title Font" type="font" default="normal normal 350% Georgia, 'Times New Roman', Times, serif" value="normal normal 350% Georgia, 'Times New Roman', Times, serif">
   <Variable name="blogDescriptionFont" description="Blog Description Font" type="font" default="normal normal 100% Georgia, 'Times New Roman', Times, serif" value="normal normal 100% Georgia, 'Times New Roman', Times, serif">
   <Variable name="postFooterTextFont" description="Post Footer Text Font" type="font" default="italic normal 100% Georgia, 'Times New Roman', Times, serif" value="italic normal 100% Georgia, 'Times New Roman', Times, serif">
   
   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right">
             
*/

And here's my revised CSS. Notice how the font, colour, float, margin and padding values have been replaced by the Blogger variable names where appropriate (changed lines highlighted in bold):

/* Page body style */

body
{
  margin: 0;
  padding: 0;
  color: $textColour;
  background: #d4d5c5 url(http://www.elated.com/res/Image/articles/authoring/create-your-own-blogger-template/pinstripe.png) repeat 0 0;
  font: $textFont;
  line-height: 1.5em;
}


/* Standard paragraph style */

p, ul
{
  margin: 0 0 1.4em 0;
}


/* Links */

a:link, a:active
{
  color: $linkColour;
  background-color: inherit;
}

a:visited
{
  color: $visitedLinkColour;
  background-color: inherit;
}

a:hover
{
  color: $hoveredLinkColour;
}


/* Headings */

h1, h2, h3
{
  font-weight: normal;
  padding-top: 0.8em;
}

h1
{
  font-size: 1.4em;
  line-height: 1.0em;
  margin: 0 0 15px 0;
}

h2
{
  font: $sidebarHeadingFont;
  color: $sidebarHeadingColour;
  line-height: 1.0em;
  margin: 0 0 10px 0;
}

h3
{
  font-weight: bold;
  font-size: 1.3em;
  margin: 0 0 10px 0;
}

h3 a:link, h3 a:active, h3 a:visited
{
  color: $postTitleColour;
}

h3 a:hover
{
  color: $hoveredLinkColour;
}


/* Container for page */

#container
{
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 780px;
  background-color: $contentBackgroundColour;
}


/* Page header area */

#page-header
{
  float: $startSide;
  width: 180px;
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0;
  padding-$startSide: 10px;
  font: $blogDescriptionFont;
  line-height: 1.5em;
}

#page-header h1
{
  margin: 83px 0 15px 0;
  font: $blogTitleFont;
  line-height: 0.85em;
  color: $blogTitleColour;
}

#page-header h1 a
{
  text-decoration: none;
  color: $blogTitleColour;
}

#page-header .description
{
  color: $blogDescriptionColour;
}


/* Menu */

ul#menu
{
  margin: 168px 0 0 0;
  padding: 0;
}

ul#menu li
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#menu a:link, #menu a:visited
{
  color: $linkColour;
  text-decoration: none;
}

#menu a:hover
{
  color: $hoveredLinkColour;
}


/* Top image */

#main-image
{
  float: $endSide;
  width: 560px;
}


/* Page body */

#page-body
{
  float: $endSide;
  width: 560px;
  margin-top: 18px;
}

div.homepage #page-body
{
  float: $endSide;
  width: 560px;
  margin-top: 40px;
}


/* Main content area */

#main-content
{
  float: $startSide;
  width: 550px;
}

/* Standard images */

img
{
  border: none;
}


/* Page footer */

#page-footer
{
  margin: 10px 0 0 0;
  padding: 20px 0;
  background: transparent url(http://www.elated.com/res/Image/articles/authoring/create-your-own-blogger-template/footer-rule.png) repeat-x 0 0;
}
 
#page-footer p
{
  margin-$startSide: 220px;
  text-align: $startSide;
}

/* Clearing element */

.clear
{
  position: relative; clear: both; height: 1px; line-height: 1px; font-size: 1px;
}


/* NEW CSS */

#header
{
  height: 336px;
}

#page-header li
{
  margin: 0;
  padding: 0 0 .25em 15px;
  text-indent: -15px;
  line-height: 1.5em;
}

a
{
  text-decoration: none;
}

.post-body a
{
  text-decoration: underline;
}

.profile-img
{ 
  float: $startSide;
  margin-top: 5px;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 0;
  border: 1px solid $borderColour;
}

.profile-data
{
  margin: 0;
  font-weight: bold;
  line-height: 1.6em;
  font-size: 0.8em;
}

.profile-datablock
{ 
  margin: 0.5em 0 0.5em;
}

.profile-textblock
{ 
  margin: 0;
  line-height: 1.2em;
  font-size: 0.9em;
}

.profile-link { 
  font-size: 0.9em;
}

.post-footer
{
  margin: 1em 0;
  line-height: 1.6em;
  font: $postFooterTextFont;
  color: $postFooterTextColour;
}

.post-footer div
{
  line-height: 1.6em;
}

.post
{
  margin: .5em 0 1.5em;
  border-bottom: 1px dotted $borderColour;
  padding-bottom: 1.5em;
}

.sidebar .widget, .main .widget
{ 
  border-bottom: 1px dotted $borderColour;
  margin: 0 0 1.5em;
  padding: 0 0 1.5em;
}

#blog-pager
{ 
  text-align: center;
  margin-bottom: 2em;
}

#blog-pager-newer-link
{
  float: $startSide;
}
 
#blog-pager-older-link
{
  float: $endSide;
}

And that's it! Download the finished, tweakable tope.xml file and try it out for yourself.

You now know how to alter a Blogger template to make the fonts and colours tweakable, as well as how to make the template work for both left-to-right and right-to-left languages.

Happy blogging!

Related articles

• Web Design State of the Nation: One Designer's Journey
• Build Responsive Sites Quickly with Foundation
• Markup-Service Giveaway: Win $300 Credit for Your Next PSD to HTML Job!
• 10 Ways the Mobile Web is Different
• Web Templates Giveaway: Win a 3-Month BoxedArt Membership!
• Giveaway: Win a Professional XHTML Template for Your Admin Pages
• Giveaway: Win 5 Premium WordPress Themes from Theme Junkie
• The Top 30 Websites, Viewed in IE6
• MOJO Themes Giveaway: Win Credits to Spend on Premium Themes!
• 25 Web Tech Buzzwords Demystified

Responses to this article

2 responses (oldest first):

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page

Current forum topics

• stop video on div hide (vimeo iframe)
• Build a CMS in an Afternoon with PHP and MySQL
• Understanding Permissions
• How to Make a Slick Ajax Contact Form with jQuery and PHP
• Drag-and-Drop with jQuery: Your Essential Guide

Got a question about making a website? Ask it in the forums — we'd love to help you. All questions answered!