Sunday 6 January 2008

Change the Date Header Font Easily


If I do it through the blogger feature it doesn't really work. The sidebar title is a large font like I want, but look how date/time enlarges with it.

The other thing I've been trying to figure out is how to have 2 different body fonts with different title fonts.

MrBrownThumb, I have an answer for the first question, but the next one will have to wait. I have a bowl of ice-cream with my name on it! I have priorities, after all.

Open your Dashboard | Template | Edit HTML. Place this code in the /*Variable definitions area.
<Variable name="dateheaderfont" description="Date Header 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>
Now in the CSS style sheet, find this code:
h2.date-header {
margin:1.5em 0 .5em;
}
Add this font: $dateheaderfont; to make it look something like this (depending on your blog template):
h2.date-header {
margin:1.5em 0 .5em;
font: $dateheaderfont;
}
When you open the Fonts and Colors tab, you will see in the scroll box the Date Header Font. This will change the font, size and color of the date header only.

Next time I will address your other question if I can figure it out. And I will put up a little Sidebar Title Font tutorial also.

post signature

No comments:

Post a Comment