Sunday, April 26, 2009

Blogger fonts

This blog exists for the sole purpose of showing Enam how to change the font in a Blogger blog. In adding this entry it appears quite obvious to me how to do this with the highly intuitive buttons right above this text box, but perhaps his constrained Malawi-style Internet has deemed it necessary to restrict these buttons as perhaps changing the font would overload the Malawi national Internet pipeline.

Width of blog text


Ok now in a much less offensive font I'll show you how to change the width of your blog posts (much less intuitive then the font change).

1) So after you've signed into your blog you need to click on the "Customize" link in the top-right corner of the page.


2) From here click on the "Layout" tab (if it's not already selected) and choose the "Edit HTML" link

3) In the html search for the string (Outer-Wrapper) and when you find it you'll see something like the following below (except with smaller values for the widths):


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1160px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 1010px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The width in the "#outer-wrapper" element controls the width of the text of the blog post while the width in "#main-wrapper" controls some invisible outer container around the post. When you increase the "#main-wrapper" width it will allow your blog to extend closer to both the left and right margins. The values I used above result in the dimensions you are seeing. You can play around with the two values to get the sizes you want.

I also removed my right-side widgets in the "Edit template" area to make even more space for the text, but you might not want to do that. Have fun!

A