Learning Movable Type: MT3.2 - Changing the Default Sidebar Position

The new style sheet and templates in MT3.2 can be daunting to the non CSS expert. Changing the position of the sidebar from the right to the left shouldn't be so difficult. Once understood, it is a bit easier to do.

Changing the Sidebar Position

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 (if you have a 3-column layout), and delta (a hypothetical fourth column that one could create). If you change sidebar position from right to left, the order of the columns still needs to be the same on your index and any archive templates where you have placed a sidebar section.

From layout-two-column-right.gif to: layout-two-column-left.gif

The easiest way to do this is to copy the entire template from your template window into a text editor such as BBEdit. That way you will be better able to see when the div sections start and end. This is the tricky part. It is all too easy to unintentionally pick up an extra closing div tag.

  1. Change the body class from layout-two-column-right to layout-two-column-left.
  2. Move the section of your template that is <div id="beta"> and <div id="beta-inner"> up from its existing position on your template to above the current <div id="alpha"> section. (A text file of the default beta section can be downloaded here.)
  3. Rename the beta sections to alpha. From <div id="beta"> and <div id="beta-inner"> to <div id="alpha"> and <div id="alpha-inner">.
  4. Rename the former alpha sections to beta. From <div id="alpha"> and <div id="alpha-inner"> to <div id="beta"> and <div id="beta-inner">.
  5. Save and rebuild your templates.

To make it easier for you, I've copied the entire default MT3.2 Main Index template with the sidebar on the left which you can download here. Note if you are using a Mac, it is much easier to view this file in FireFox than in Safari. Just replace the code in your Main Index template with the text from this file. Save and rebuild your template.

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 2, 2005 11:57 PM to Learning Movable Type http://www.learningmovabletype.com/