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

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".