Skip to main content

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.

Comments

Tracie Broom said…
Can I just say? I freakin love your blog. It has helped me set up multiple blogs, with excellent results and beautiful functionality. Thank you!

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.