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 {Add this font: $dateheaderfont; to make it look something like this (depending on your blog template):
margin:1.5em 0 .5em;
}
h2.date-header {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.
margin:1.5em 0 .5em;
font: $dateheaderfont;
}
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.
Labels:
Blogger Beta,
Design,
Fonts,
Reader's Emails
15 Comments:
Thanks for taking the time to answer it. One of the things I like about other CMS is that the fonts look more "Web 2.0" and I think just changing the blogger fonts could do some good in achieving a more modern look.
@MrBrownThumb, My understanding is that unless a viewer has the font you use installed on their computer, it will revert to a default font. Perhaps the fonts you are seeing as sidebar titles are actually images.
As far as an unusual font in the post body, well, I don't think we have a choice but to use the industry standards.
Thank you Mr.BrownThumb for that question and annie for solving it. I don't know where i should post the font at css style sheet. Thanks for letting me to know this.
@durex, Locating the CSS style sheet. After you find it, you can actually put the code anywhere in the style sheet. I like to keep it neat and find a similar topic, so I would put this particular code in the /* Posts section.
Hi Annie,
I understand about the fonts being used having to be the most common ones people have installed on their computers. I don't think the ones I'm seeing on Word Press blogs are all that unusual. They're just often larger and rounded compared to the ones say you and I are using in Minima.
But since we're on the subject of the date header. Have you been able to figure out (or maybe seen somewhere) how people add the caledar icon next to the date header?
It usually a graphic behind the month and date to the left of the date header. Like:
JAN
---
10
@MrBrownThumb,If you can, give me a link to the font you have in mind. I would like to see it.
And I do have a rough post together for the little calendar in the date-header. I have to refine it before I publish it. Maybe this weekend if all goes well.
You are keeping me on my toes! Good job!!
Hi Annie.. thanks for this tip. I really like it!
A simple way of having a second bodyfont is to define an extra bodyfont-class in your css, for example:
.extrabodyfont {
font: Arial;
font-size: 1.2em;
color: #800080;}
If you want to use this extra font in one of your posts, just wrap the text inside span-tags:
<span class="extrabodyfont">your text here</span>
@Hans, Thanks!! I posted this wonderful idea.Choices for Post body Fonts
Another problem Annie... I've made EVERYTHING like you said and it doesn't work!When I change the color and font in their respective tags, Date continues exactly the same!!
thanks!!! your site helps a lot
Thanks a lot Annie for sharing this tip on how to change the font on the date header...I will also try this on my blog..that way, I can achieve a more personal look and feel...not mention a more modern looking blog.
Thank you for the advice. Very useful.
Cari tulisan CSS yang seperti di bawah ini:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Hmm I tried to put everything in, but it still didn't work :(