September 04, 2005

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.


Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Posted by Elise Bauer on September 04, 2005 to Style, Templates
Comments(16) | Email to a friend | Printer-friendly version


Trackback

If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/442

Comments

Thanks so much, Elise! That is the right tutorial at the right time; I think that 3 columns are really helpful when you have a lot of information on the blog's frontpage. And I'm also confused by the new templates of MT 3.2.

This is just what I have been looking for. I have been trying to hack the template and style sheet but with no guide to the various and seemingly redundant style declarations. Thanks.

I have a question that I hope you can answer. I now want the beta column to be wider. Looking at styles-site.css, I have changed the width of #container to (default was 720px) 800px and the width of .layout-three-column #beta (default was 320px) to 400px. Doing this pushes the contents I have added to gamma down below alpha. Are there other css elements I should be looking to modify?

Again, thanks for the guidance.

Eric

Thanks for that - exactly what I needed last night. Only hitch in the process was having to revert to the original 3.2 style sheet. I was trying out one made with Arvind's "Style Generator" and it wouldn't quite work with these steps - missing the "layout-three-column" class, I think.

Of course, having posted that last comment I find out the "Style Generator" has an option for 3-column layouts in the "Edit Page Styles" form. I'll give that a bash and see what happens.

Thanks so much for your help.
I have the same question that Eric posted: "Doing this pushes the contents I have added to gamma down below alpha. Are there other css elements I should be looking to modify?"

Plus, after I have made the change from a two-column layout to a three-column layout, I realized that all the Recent Posts and Categories are oppening on the new alpha column instead of oppening on the beta column. I've tried to change the Category template but it didn't work.

Could you please help me on this?
Thanks once again!

Hi Shma and Eric, I don't have time to troubleshoot these. Try over at the Support Forums and when you get an answer that works, or figure it out on your own, please come back and let us all know. Thanks!

Elise,
Just a thank you for all the good tutorials. I noticed that you put a note for Mac Safari users to use Firefox to few the three-column layout, but if Safari uses just use view source they can copy and past the template.

This worked, but you'll notice the new alpha column's text does not have the same font formatting as the formerly beta (now gamma)column's list elements under

h2 class="module-header" My Links /h2
div class="module-content"
ul class="module-list"
etc...

Is the stylesheet not applying font rules to LI items in the newly created sidebar?

Mark

Hi Creechman - Given that you are copying all the code from the former beta column to make a new alpha column, it should all work. If it doesn't for you, I suggest running your page through the W3C Validator to see if you have neglected to close a tag somewhere.

I am new to coding stylesheets, and am not getting the hang of it yet. So, I would appreciate your help.

I replaced the "body class" section to make it three-column. Then, I copied the "beta section" and placed it above the "pagebody" section. I renamed the copied section to "alpha," the "pagebody" section to "beta," and the original section towards the bottom to "gamma." I saved it and FTP'ed it back to my "www" diretory.

However, when I refreshed the page in my browser, I ended up with everything bunched up in the "alpha" column, with nothing in the other two columns.

Can someone help me figure out what to do to fix it, please? I very much appreciate your help!

John

Thanks for this! I've been looking for somewhere to understand Movable Type - when I first installed it, back at the 1.0 stage, it was easy enough to completely understand. Now, it's pretty complicated and a little HTML knowledge isn't helping. I got lost when 2.6 came out with all the MT tags. This explanation was exactly what I needed.

Thank you.

Also having problems with the columns stacking up on top of eachother. I figured out, but then forgot, how to get them to display properly. It had something to do with container size as well padding issues. The stylesheet controls how much room you have in the container to diplay the columns. If there is not enough they get squeezed on top of eachother. I'm still trying to figure out what I did to make it work. Just doing what is detailed in this post is not enough. Very frustrating considering it seems to be a very simple layout issue. Why it is not addressed in the manual or on MT's help pages is beyond me.

Also tried out the Style Generator but what it creates doesn't seem to respond to changing the page style and alpha, beta,gamma coding. It is a good tool to learn the various page parts though.

Your whole site is a godsend. Tthanks! When I follow the link above (safari or firefox or IE) 3-Column Layout Main Index template

I get a bunch links and other weird stuff. Is that link still viable?

HI RYA - do a "view source" from your browser when you pull up the page from that link. It will show you the code.

I've been trying to build a three column MT site for years now. Based on this verty post I just upgraded to 3.2 thinking that my dream would come true.

Not.

Like Oddessy and I'm sure so many more, I get the three columns stacked into one. SyleGenerator is no help either.

Agh.

Stacking Columns are usually due to widths that add up to more than the total allowed in ?container-I think?.
I had this problem a lot, esp. w/ PCIE6; wackiness.

Look at the width, margin & padding. Some browsers add them to your total width; again, I think it's PCIE6.

Try arbitrarily reducing widths of columns as a test to see if that's it; make 'em real narrow, so there could be no question.

-Otherwise it could be a div tag issue; usually improperly closed.


Post a comment

(Before posting a comment please see the Comments and Trackbacks Policy. Do you need help troubleshooting your weblog? Please post questions and requests for support at the MT Support Forums. Thanks!)




Remember Me?

(you may use HTML tags for style)

Email to a friend

Email this article to:


Your email address:


Message (optional):