« Adding a Sidebar to the Default Archive Templates | Main | Making the Most of SpamLookup »

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.

Comments (20)

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.

shma [TypeKey Profile Page]:

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!

elise [TypeKey Profile Page]:

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!

David Campbell:

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

elise [TypeKey Profile Page]:

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.

John:

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.

odyssey [TypeKey Profile Page]:

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.

RYA [TypeKey Profile Page]:

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?

elise [TypeKey Profile Page]:

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.

Thanks for the tutorial! I was able to easily convert my vicksburg red style from a two column theme to three columns. You made it a snap!

While creating a 3-column layout on my wife's blog (http://www.karenblogs.com), we discovered that the instructions presented in the entry above worked, but we found a similar stacking problem that many seem to have run across. When refreshed, the page had a left-hand column, but the entries and the original right-hand column were below the new left column instead of to its right as we'd expect. The problem turned out to be a </div> tag issue. When performing step 2 (copying the original "beta" section), too many closing div (</div>) tags were copied then pasted in. We removed about 3 of the extraneous </div> tags, the columns lined up correctly. If you're having stacking problems, make sure the new "alpha" section has the correct number of </div> tags to correspond with the <div> tags in the new "alpha" section.

Also, we also found that the new right and left columns no longer had the correct background colors because when you create a 3-column layout, you will need to go change the background colors in the various 3-column style sections (.layout-three-column #alpha, .layout-three-column #beta, etc...) in the style sheet to match what you may have used in the 2-column sections.

Beautiful! Thanks so much! It worked first try. :)

Now I'm off to see if I can break..., er, I mean, make it fluid instead of fixed width. :D

Instructions worked great. For Eric that asked about changing the widths of the columns there are a few things you need to do. First by default that container is set to 720px, so do a search and you will find this in 3 places, I change them to all equal the same new value, say 820. Then you need to change 2 other values, the banner width and the width of beta in the .layout-three-column section. I just did a search for banner, there is just one width setting for it and it is usually 10px less then the container size. Next find the .layout-three-column #beta section, it is at the very bottom of the Style sheet. I am sure you may have figured this out by now since this was a year ago but just thought I would post this for anyone else that comes across this post since it is still very helpful.

Thanks again to elise for putting this site together, can't believe I just found it, very very helpful.

The BFR

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)