Jeromy Anglim's Blog: Psychology and Statistics


Sunday, November 15, 2009

How to Customise the Blogger Template

This post discusses how to modify the Blogger HTML template. For some time I have wanted to customise my Blogger template. I wanted to make various modifications including: adding a third column; increasing the overall width, customising the colour scheme; and more. This post documents my experience and lessons learnt.

NOTE: ALWAYS BACK UP YOUR BLOGGER TEMPLATE BEFORE MAKING CHANGES.

Useful knowledge:
One option when customising a Blogger template is to go to a site that provides templates. It's also possible to implement some little customisations without knowing how the template code works. However, in order to have complete control over your Blogger blog, you need to learn some stuff. Blogger lists resources for changing the HTML template.

In particular, an understanding of HTML and CSS is essential. The following links provide tutorials on the relevant material. I already knew HTML, but was fairly new to CSS. I just iterated between trying to understand the template code and reading the introductory material below.
Editing the template:
The following was my procedure for editing the template:
  1. Log in to Blogger and go to Layout - Edit HTML
  2. Download full template (make a backup; the backup is essential if things go wrong)
  3. Make a copy of the template and open the copy into a text editor. I used Notepad++ (a free text editor; this has colour coding of the template code).
Notepad++
There are lots of good text editors out there. However, Notepad++ has some cool features:
  • It's free
  • The Language menu makes it easier to edit code in a particular language. In particular the 'CSS' and 'HTML' options are useful when editing the Blogger template.
  • It facilitates indentation, colour coding, and identifying opening and closing tags.

Experimenting
Experimentation is a useful way to learn how to code the template. I adopted the following procedure.
1) Make a change to the template in the text editor (i.e., Notepad++)
2) Copy and paste the change into "Layout - Edit HTML"
3) Press Preview and inspect the change.

I started small. I changed a few little things in some of the CSS sections of the code such as font sizes, colours, and so on. Each time something didn't work, I inspected some of the documentation mentioned earlier. My aim was to understand what each element of the code was doing. After a few hours of fiddling, testing, reading, and checking, I had a basic mental model of how the template worked. It's also worth checking that the blog loads without error on all major browsers after making serious changes.


RANDOM THINGS THAT I LEARNT ABOUT THE TEMPLATE
The following is a bit of a brain dump of assorted ideas that helped me understand modifying the template. I'm no expert; so forgive me if there are any errors. I should also mention that I used the "Rounders" Blogger Template by Douglas Bowman as my starting point for modification and that some of my examples below are modifications of this template.

The template is a HTML document. Broadly it can be thought of as made up of the HEAD and the BODY section. The HEAD section includes the standard META and TITLE information as well as a large section of CSS that formats the blog.

Variables: The CSS style sheet uses variables. Variables make it easier to change values that are used on multiple occasions throughout the style sheet. One example is shown below. The code below will insert the value #ffffff wherever $mainBgColor in inserted.
   <Variable name="mainBgColor" description="Main Background Color" type="color" 
            default="#fff" value="#ffffff">
The code also highlights the way that colours can be represented in hexadecimal form.

CSS Syntax basics: w3schools has an overview of CSS syntax. Below is one example from the template.
#outer-wrapper {
  width:1000px;
  margin:0 auto;
  text-align:$startSide;
  font: $bodyFont;
  }
The above code formats a particular HTML element. The hash means that it is referring to a particular HTML tag with the id equal to what follows the hash (i.e., outer-wrapper). The braces enclose a series of property - value pairs separated by semi-colons. For example, the width is set to 1000 pixels. The margin is set to 0. Text alignment is set to the value of the variable "startSide", which in this case is "left". and the font is set to the variable defined by "bodyFont".

A search for "outer-wrapper" will show what is being formatted. It can be seen below.
<body>
  <div id='outer-wrapper'>

The box model is also important to understand how margins, borders, padding, and content interact.

The body section: Much of the structure of the page is captured between the BODY tags. This structure becomes a little more apparent with appropriate indentation as shown below. The DIV tags divide up the blog page into various sections. the ID attribute is used to give a unique name to the tag, and this names is used extensively in the CSS section. the B:SECTION tags are used by Blogger and help with the 'edit layout view'. All the various B:WIDGETS are presented. These also have ID tags which are also extensively used in the CSS section. This is the code that needs to be modified in order to modify the number of columns. I used information on Bloggermods to help me implement three columns.

  <div id='outer-wrapper'>

  <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1'>
      <b:widget id='Header1' locked='true' title='A Blog (Header)' type='Header'/>
    </b:section>
  </div>
  
  <div id='crosscol-wrapper' style='text-align:center'>
    <b:section class='crosscol' id='crosscol' showaddelement='no'/>
  </div>
  
  <div id='sidebarleft-wrap'>      
    <b:section class='sidebar' id='sidebarleft'>
      <b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
      <b:widget id='Subscribe1' locked='false' title='Subscribe To' type='Subscribe'/>
      <b:widget id='CustomSearch1' locked='false' title='Search This Blog' type='CustomSearch'/>
      <b:widget id='BlogArchive1' locked='false' title='Previous Posts' type='BlogArchive'/>
    </b:section>
  </div>
  
  <div id='main-wrap1'>  
    <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
  </div>

  <div id='sidebar-wrap'>
      <div id='sidebartop-wrap'>
      <b:section class='sidebar' id='sidebartop'>
        <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
      </b:section>
    </div>

    <div id='sidebarbottom-wrap1'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='LinkList3' locked='false' title='Favourite Posts' type='LinkList'/>
        <b:widget id='LinkList2' locked='false' title='Links' type='LinkList'/>
        <b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'/>
      </b:section>
    </div>
  </div>

  <div id='footer-wrap1'>
    <b:section class='footer' id='footer'>
      <b:widget id='Text2' locked='false' title='About Me' type='Text'/>
      <b:widget id='Text1' locked='false' title='Disclaimer' type='Text'/>
    </b:section>
  </div>
</div>