Blogging

I got a lot of comments about changing the font on your blog. So for this week's craft I will explain how to. After you have opened the template editor, (Go to Layout, then Edit HTML) look for this block of codes in the HTML:

.sidebar {
color: $textColor;
line-height:1.3em;
}

Add in a line for the new font, for example, if you want Times, add the line

font-family: times;

so that it becomes

.sidebar {
color: $textColor;
line-height:1.3em;
font-family: times;
}

Preview, and if satisfied, click "Save template".

I was asked about changing the font size too. If you want to do that, just add the line

font-size: 150%;

or any other percentage as you wish. You may also specify in pixels (px), eg. 12px

.sidebar {
color: $textColor;
line-height:1.3em;
font-family: times;
font-size: 150%;
}

Of course, if you want other fonts just use a different font name where "times" is. I ran into a problem here. I downloaded some really cute fonts onto the labtop and put the new fonts in the HTML. It looked adorable but then I brought up my blog in another computer that didn't have that fonts downloaded and it couldn't find the font on the computer and didnt' show up on my blog. So you have to use a font that your viewer's computer will also have. If you were to put a website in where the font name goes then it would go to the internet to bring up the font but I can't figure it out. Let me know if you figure out.

I just messed around with my HTML and inserted

font-family: Papyrus;

into the Header section to change the header. Here is the end product:

#header {
background-image:url(http://i231.photobucket.com/albums/ee180/juliewuliee/leelou%20layouts/green-2.jpg);
margin: 85px;
border: 6px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
font-family: Papyrus;
font-size: 105%;
}

#header h1 {
margin:15px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
font-family: Papyrus;
font-size: 350%;
}
I also added the "font-family" to the blog description because I have a description that I wanted to change and not just the title. And to change the body font look for the following after the comments section:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:1.5em .5em .5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
font-family: Papyrus;
font-size: 140%;
}
You will see that I have added the "font-family" to the ".main .Blog {" section as well. This should change the font of your posts. If you don't have the main blog section then just copy and paste mine (above) into your HTML and insert the font and size you want.

A few reminders! First and most importantly: ALWAYS, ALWAYS save your HTML before you mess with it. Copy and paste the whole thing to Word. Then if you mess up or don't like it at the end you can just copy and paste the old blog back in. Also, your computer automatically saves each font to a certain size so you will probably have to change the size of the font everytime you change the actual font. Good luck and let me know if you discover any more blogging tricks! I'd love to hear any suggestion or comments about what you have discovered about your blog!