Learning Movable Type: Creating a 3-Column Layout in MT3.2


mtbadge-small.gif

The default Movable Type MT3.2 templates come with one sidebar on the right side of the Main Index page. With a little template manipulation you can have an additional sidebar on the left - a 3-column layout.

The MT3.2 stylesheets and templates are designed to have the columns laid out in order, starting with the column named "alpha". The columns, in order are alpha, beta, gamma (for a 3-column layout), and delta (a hypothetical fourth column that one could create). In the default MT3.2 Main Index template, the sidebar is on the right and is in a column named "beta.

layout-two-column-right.gif

To add a third column, you will make a copy of the default "beta" column code and put it before the "alpha" column code in your Main Index template. Then you will rename the columns, in order, "alpha", "beta", and "gamma".

layout-three-column.gif

Here are the steps:

  1. In the Main Index template, change the body tag from <body class="layout-two-column-right"> to <body class="layout-three-column">.
  2. Copy the section of code that starts with <div id="beta"> <div id="beta-inner" class="pkg"> and paste it right after <div id="pagebody"> <div id="pagebody-inner" class="pkg"> (A text file of the default beta section can be downloaded here.)
  3. Rename the first set of "beta" tags "alpha". From this:
    <div id="beta"> <div id="beta-inner" class="pkg">
    to this:
    <div id="alpha"> <div id="alpha-inner" class="pkg">
  4. Rename the middle section from "alpha" to "beta" in the same way.
  5. Rename the original "beta" section in the lower half of the template to "gamma" in the same way.
  6. Save and rebuild your template to make sure the columns lay out properly. If not, refresh your default template (see instructions below) and start over. Most problems come from forgetting a closing div tag or including an extra one, or from forgetting to change the body tag.
  7. Now your sidebars have exactly the same content in them. Go through your template and remove and add the module sections and MTIfArchiveTypeEnabled sections depending on what content you want on what sidebar.
  8. Save and rebuild your template.

To make things a little easier for you, I've put together a sample 3-Column layout here:
3-Column Layout Main Index template
Just copy and paste over your existing Main Index template. (Mac Safari users should view this file in FireFox.)


The Refresh Template Action

Copying and pasting sections within your templates can easily fubar your pages. It is so easy to miss a closing div tag! A useful tool, new in MT 3.2, is the Refresh Template(s) action. With a click of the mouse you can restore selected templates to their system defaults, while at the same time making a backup of the most recently saved version of your template. To use, in the Templates edit window select the template that you wish to restore to the default. Underneath where it says, "Create New Index Template", select the menu, "More actions" and scroll to "Refresh Template(s). Click on the "Go" button. The template will be restored to the system default and a back-up copy of your most recently saved template will be created.


Click on image for larger view.


Big thanks to Arvind of Movalog for his detailed explanations to me of how the new stylesheet and templates work.


Posted by Elise Bauer on September 4, 2005 3:03 PM to Learning Movable Type http://www.learningmovabletype.com/