Saturday, 24 October 2015

Changing text font sizes on Blogger's "Simple" template

As you may have noticed most of my blogs use the "Simple" template (this one currently uses "Picture Window"). With various upgrades to Google's blogger posting system over the years we can set some of the text sizes without having to directly hack the template's HTML code.

One of the changes I have been making recently to some of my blogs is to change the body text in a post to a different font and size. Unfortunately while it is possible to set these indirectly there is no direct way of setting the size.

The font of the post body is affected by the setting in the Template Designer called Page Text which sets a font for the whole of the page, and a base font size. This size does not directly set the size of the text in the post body.

Once you have set the above setting then customise the template HTML to adjust the body text size. The full section you are looking for is as below:

/* Posts
----------------------------------------------- */
h2.date-header {
  font: $(date.header.font);
}
.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}
.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
}
.main-inner .column-center-inner {
  padding: 0 $(main.padding);
}
.main-inner .column-center-inner .section {
  margin: 0 $(main.section.margin);
}
.post {
  margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}
.post-body {
  font-size: 120%;
  line-height: 1.4;
  position: relative;

}
I have bolded the part that is important. This is line 389 of the template at the time of writing. In the line font-size: 120%  change that number to whatever suits you. This will step up or down the body text size in the post.