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).
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.
Now, we find the CSS rule set for the post title.
and change the rule set
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.
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.
0 comments:
Post a Comment