Improving The Designer Template GUI Advanced Menu

One of the kewler features of the Blogger templates is the GUI wizards that let you change settings, like fonts and colors for the various text elements in the template.

Of course Blogger programmers have one idea what settings are useful - and we may have other ideas.

When the Layout templates were provided in 2007, it didn't take too long to discover the fonts and colors possibilities there, and then to discover the limitations. So I found how we could enhance the GUI Fonts And Colors menus. And this evening, I decided to see how a Designer template could be enhanced, similarly.

In this case, I'm adding the ability to change the size of the Header Description font.

The stock Simple template forces the description font to the same size as the page font. So for my exercise here, I'm going to add a description font setting.

As with the previous exercise, the change involves two simple changes.

• The "Variable definitions" (which defines the GUI menu structure).
• The CSS rules in the styles.

Edit the template (My apologies if I am facetious here).

The Variable definitions
Look at the Variable definitions at the top of the template code (Note that I snipped and broke the code, a bit).

I started with the "Blog Title" group.

/* Variable definitions
   ====================

...

   <Group description="Blog Title" selector=".header">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"
 value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Title Color" type="color"
 default="#3399bb"  value="#3399bb"/>
     <Variable name="description.text.color" description="Description Color"
 type="color"
         default="#777777"  value="#777777"/>
   </Group>

And I added a "Blog Description" group. Note that the "Blog Title" group included the Description Text Color wizard, which I moved to the "Blog Description" group.

Part of the task of adding additional GUI controls involves choosing which controls to put together, based upon relevance to each other - and screen space available. Depending upon screen size and resolution used, it looks like you can fit 3 - 5 controls together, in one line ("group").

So choose how to group your controls, and which controls to add. This is just one example of the process.

/* Variable definitions
   ====================

...

   <Group description="Blog Title" selector=".header">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"
 value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Color" type="color"
 default="#3399bb"  value="#3399bb"/>
   </Group>

   <Group description="Blog Description" selector=".header">
     <Variable name="description.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"
 value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="description.text.color" description="Color" type="color"
         default="#777777"  value="#777777"/>
   </Group>

With the added group, I now have defined a variable "description.font".

The CSS rules
Next, I tweak the CSS rules, to agree with the added variables. Look in the CSS rules.

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

And change that to

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}

Save Template, and test. Oh yes, did I forget (how could I forget) to warn you to backup the template, before and after making these changes?

Check out my demo blog, to see an example of what can be done. And seeing how easy it is to add font settings, you surely see how easy it is to add font selections, also. Just remember, adding selections to the menu is not the only change needed, when you decorate your blog.