Blogger: Upgrade your Template Designer

The Blogger Template Designer is a wonderful tool for customizing a blog. Blogger includes a number of options for customizing colors and font, but for many the options are too limited. Something just doesn't look the way it should and you're left digging through HTML making a change, seeing how it looks and tweaking it until just right. Wouldn't it be nice if we could upgrade the template designer to speed things up a bit?

Groups and Variables
As I'm sure many have seen when opening the Design->Edit HTML page near the top of each template there are a lot of tags like this <Group name= and this <Variable name=... These are where all the Advanced options come from. All of the colors and fonts set there have entries in your template. Adding your own is a simple matter of adding a custom variable group, then tying them into styles.

The Group tag defines a group of variables to display under a single Advanced option with two paramaters.

• Description - the name of the option under Advanced
• Selector - the class of an html object in a template to highlight while customizing the group

The Variable tag defines an option to include within a Group and has five paramaters

• Name - the name to reference the variable in the template
• Description - title displayed over the option in template designer
• Type - set to either Font or Color for use in template designer. Automatic type is unused by designer.
• Default - the initial value of the variable if none is set in template designer
• Value - the current value of the variable accessed by Name

An Example
The easiest way to understand is through an example. On this site I added a group for Column Background Colors, this let's me quickly customize the look of each sidebar and my post area background. The code looks like this:

<Group description="Column Backgrounds" selector=".main-outer">
  <Variable name="column.left.background.color" description="Column Left Background" type="color" default="transparent" value="#ebebeb"/>
  <Variable name="column.center.background.color" description="Column Center Background" type="color" default="transparent" value="#ffffff"/>
  <Variable name="column.right.background.color" description="Column Right Background" type="color"   default="transparent" value="#cccccc"/>
</Group>

The code tells Template Designer to add an option under Advanced called Column Backgrounds with three settings for color. It looks like this:

Now, let's try changing the Center Column Background to a Font option by replacing the second variable with this:

<Variable name="center.column.font" description="Font" type="font"
  default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"  value="normal normal 12px Verdana, Geneva, sans-serif"/>

The new option group looks like this:

Time to Set the Styles
For these styles to take effect we have to use the variables in our stylesheet. I use the custom column backgrounds by placing this code in the Column section of my template:

.fauxcolumn-center-outer .fauxcolumn-inner { background-color: $(column.center.background.color); }
.fauxcolumn-left-outer .fauxcolumn-inner { background-color: $(column.left.background.color); }
.fauxcolumn-right-outer .fauxcolumn-inner { background-color: $(column.right.background.color); }

With the styles set, any color I choose in the template designer shows up as a background for my columns. The Font example works pretty much the same way using a font: $(center.column.font); style instead.

In Closing
Adding a variable group to upgrade the template designer is a really nice feature. It allows you to quickly try new color and font combos while designing or redesigning a blog. It's not much harder than just inserting a new style. You can pretty much copy/paste, then change the description and name parameters and add a style the same as before. I highly recommend using your own variable groups when customizing fonts and colors, it makes design much faster.

Support JSBlogStop:

Donate with Dwolla