Skip to main content

Improving The GUI Fonts And Colors Selection

The GUI Fonts And Colors screen in New Blogger is pretty kewl. Want to change the typeface for the posts? Just pull down the list, and select "Text Font", then select the typeface and size. Want to change the color? Select "Text Color", then select the color from a chart of colors.

For all its kewlness, though, it's limited. You can change the post title color, but you can't change the post title font. Maybe there are even more limitations that we haven't realised yet.

The good news is, it's expandable - and easily so. You can add your own GUI selections, with very little work.

Look at the template, and the Variable definitions at the top (OK, I snipped the list, below, a bit).
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
...   

<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/


The list above appears to correspond to the selections in the Fonts and Colors pulldown list. So, add to the list.

In this case, we need to be able to set the post title font. So, first, we add an entry, "Post Title Font", to the end of the list.
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
...

<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="posttitlefont" description="Post Title Font"
type="font"
default="normal normal 140% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 140% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/


Now, we find the CSS rule set for the post title.
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

and change the rule set
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font: $posttitlefont;
line-height:1.4em;
color:$titlecolor;
}

And save the template. Now look at the Fonts and Colors pulldown list. Yes, it was that easy. Now note that was for a Layout template - but it's not any harder to tweak a Designer template, similarly.

The challenge will be coming up with the right variable names, to add the variable settings to the CSS rules. The variables need to be descriptive (so you know what they are used for) and unique (so you can control the right CSS rules) - and you'll want the Template Designer wizards, in "Advanced", to have properly descriptive labels. Look at the 4 examples, above, with the "name" and "description" values - then look at "Variable definitions", in the template for your blog.

Other than those concerns, you can use any variable names that suit you. It's your blog, and your template.

>> Top

Comments

Skinny Griffin said…
Awesome, that post title font issue was on my to-do list for this weekend, thanks for saving me time! Love your blog, I'm fairly new to all this and need to get myself educated fast, and I'll be linking to you shortly.
Lynn Lambert said…
THANK YOU SO MUCH! I've been stumbling around with this for a week!
Anonymous said…
I want to add Harrington to the list! Is this possible?
uzo egereonu said…
You are just GREAT!!. I'm new to this and this has been one of the most difficult to find a solution to after i tried so many ways. THANKS.

Popular posts from this blog

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.

Help! I Can't See My Blog!

I just posted to my blog, so I know that it's there. I can tell others are looking at it. But I can't see it.

Well, the good news is you don't have a blog hijack or other calamity. Your blog is not gone.

Apparently, some ISPs are blocking *.blogspot.com, or maybe have network configuration or infrastructure problems. You can access Blogger.com or you can access Blogspot.com, but you can't access nitecruzr.blogspot.com, or bloggerstatusforreal.blogspot.com.

You can't access them directly, that is. If you can access any free, anonymous proxy servers, though, you may be able to access your blog.

Note: You can use PKBlogs with the URL pre packaged. Here is the address of this post (with gratuitous line breaks to prevent the old post sidebar alignment problem):
http://www.pkblogs.com/bloggerstatusforreal.blogspot.com/
2006/07/help-i-cant-see-my-blog.html


And an additional URL, to provide to those suffering from this problem, would be the WordPress version of this post:
ht…