Change the Post Title Font Easily

Hi Annie,

A possible tip for you:

To change my post title font I added a new variable called
posttitlefont at the top of my code. Then I modified the h3 section in
the Post wrapper in the CSS section. To my surprise Post Title Font
now shows up as an option under the fonts and colors tab in the
dashboard!

You can check it out at my blog, Upper Fort Stewart.

Ian Stewart


I received this tip from Ian almost a year ago. Life has a way of putting things on the back burner. This is a neat little edit for a blog post. Here is how it is done.

Open your Dashboard | Template | Edit HTML. Look for the /* Variable definitions section. Add this code to that section:

<Variable name="posttitlefont" description="Post Title Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"></variable>

Next find the post header code in the CSS style sheet:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Modify that code by replacing:
font-size:140%;
font-weight:normal;

with this:
font: $posttitlefont;

to make this code:

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

Save your template. Once again go back to your Dashboard | Template | Fonts and Colors. There will be a new listing in the scroll box called Post Title Font. Now changes can be made to the post title with only a click!