Learning Movable Type: The New Themes - Making Sense of It All

This tutorial is written by LMT author Arvind Satyanarayan of Movalog.
Tutorial cross posted on Movalog and LMT.

With Movable Type 3.2, Six Apart launched a new markup and stylesheet structure that has also unified their three platforms. These new templates and stylesheets (from now on referred to as themes) have been called tag soup due to the sheer number of <div>s and indents.

What a mess - why did they do it?

The new themes can be quite intimidating the first time you come across them, however Six Apart created these new themes for several reasons:

  • First of all, Typepad, LiveJournal and Movable Type now share exactly the same markup. This means that a theme will work on any of these three platforms and designers can design to around 10 million bloggers worldwide!
  • The new templates are powerful. Giving each element on a page an ID means that it will be easy to start implement cool javascript and ajax effects. It also means that people can start creating scripts for applications, e.g. greasemonkey, that will make browsing a weblog a lot more easy and fun.
  • This is just the tip of the iceburg. Six Apart has a few announcements coming soon that will prove to be useful to all webloggers on Typepad, Movable Type and LiveJournal.
The quickest way to get started with these new styles is to install the StyleCatcher plugin so you don't even need to worry about the new themes. Just install the plugin, chose a theme that you like and the plugin automatically applies it for you (creating backups as it goes along). However if you're brave, read on to understand these templates, what they do and how to make effective use of them.

Alpha, Beta - sounds Greek

If you cast your mind back to the 3.1x templates, MT had columns named center, right, left etc. - nice and easy to understand. So why on earth did Six Apart change that to alpha, beta and other letters from the Greek alphabet. The reason is quite simply that the names center, right, left and content might not always apply. For example, in this MT3.1 tutorial Elise described how to change the positioning of the sidebar from right to left. Doing so would create quite a mess in the stylesheet because you'd have an element called right but it would be on the left! Also on more complex installations, the column containing the entries might not always be on the center (for example Engadget).

As a result, Six Apart created fairly ambiguous names to, ironically, lessen the confusion. So we now have columns called #alpha, #beta, #gamma and #delta. The "beauty" of this new layout is that the columns always follow in that order no matter how many columns you have. From the left, the first column will always be #alpha, the second #beta, the third #gamma and the fourth #delta. The images below might help you understand better:

layout-two-column-left.gif layout-two-column-right.gif layout-three-column.gif

base-weblog.css - what it is, why it matters

If you have used the StyleCatcher plugin you will have already seen the base-weblog.css file. This aptly named stylesheet is basically the base for all of Six Apart's present and future stylesheets. All it basically does is define the positioning of the various elements and some very basic styling for those elements. If you have freshly installed Movable Type 3.2 and see only one stylesheet index template then the base-weblog.css part is everything from the top until the /* theme */ declaration. As this section is the base stylesheet for all templates, I would caution you against changing anything in this section, doing so could cause some display errors with different themes across different browsers. All changes to the stylesheet must be done below the /* theme */ declaration or within the theme file. This way you will avoid any conflicts when changing between themes.

Switching layouts - 1,2,3

One of the most powerful aspects of the new stylesheets is the fact that they come with built-in support for one, two and three column layouts; to switch layouts all you need to make some markup changes. I will guide you through switching the layouts and provide general advise as to how to make this an easier process. Note: I've discovered this whilst coding the next version of the Style Generator, as a result, using stylesheets generated with the current Style Generator, the following will not work.

If you open your Main Index Template and find the <body> tag, you will see that it has a class attribute, by default layout-two-column-right. This class defines the basic layout of the page and where the sidebars go. You can change this class to any of the following:

  • layout-one-column - for a one column layout
  • layout-two-column-left - a two column layout with the sidebar on the left
  • layout-two-column-right - a two column layout with the sidebar on the right
  • layout-three-column - a three column layout.

Simply changing the class could kick your theme out of whack, the reason being, the divs must follow the order I talked about above, i.e. #alpha, #beta, #gamma and #delta. As a result:

  • One Column Layout - you only need one column, #alpha, which contains your content. By default the theme will apply the necessary styling.
  • Two Column with sidebar on the left - here you will have two columns, the sidebar will be #alpha and the main content column will be #beta. To move from the default templates to this layout, copy your sidebar (i.e. everything between<div id="beta-inner"></div>) into the content column (i.e. paste it just below <div id="alpha-inner"></div>). Do the same with your content so that your sidebar is now #alpha and your content column #beta.
  • Three Column - for this layout, you will first need a sidebar called #alpha, next comes your content column #beta and finally the second sidebar called #gamma. The easiest way to implement this layout from the defaults, is to copy the #beta div(i.e. everything between <div id="beta"></div>) and paste it just below <div id="pagebody-inner" class="pkg">. Finally you will need to rename the three divs so that they are in order, #alpha, #beta, #gamma.

During my testing, I found that the easiest way to implement the new layouts is to split the layouts by the columns into separate index templates. Therefore, I would advise you to copy each column for example #alpha into a separate index template and then PHP include that in. As a result, you can grab these templates (based off the default templates):

So depending on the layout you want, grab the appropriate files, build a new index template for each and include them into your other templates in the correct order #alpha, #beta, #gamma and make sure you have the correct body class specified.

Posted by Arvind Satyanarayan on September 3, 2005 11:13 PM to Learning Movable Type http://www.learningmovabletype.com/