Learning Movable Type: Applying MT3 Style Templates to MT2.X


This tutorial is completely out of date and will not be updated. ~Elise March 1, 2007 Movable Type 3.0 ushered in a whole new look for its default style templates, based on what we've seen with Typepad default styles. The new stylesheets can be found here in the Movable Type documentation.

The new stylesheets do not work with the default templates for MT2.661 or earlier versions of Movable Type. The old stylesheets are posted on the MT website here.

You can update your MT2.661 (or earlier version) stylesheet with one of the new MT3 default styles (with or without updating to MT3), but if you do so, you need to change your templates so that they will work with the stylesheet. The new MT3 templates are posted on the Movable Type website here. The templates that you need to update if you want to use MT3 styles are: Main Index, Individual Entry Archive, Category Archive, Date-based Archive, Comment Listing, Comment Preview, Comment Error, and Trackback Listing.

Comments and trackbacks

One difference in the default templates between MT2.X and MT3 is how comment and trackback links from the Main Index, Date-based archive, and Category Archive are handled. In earlier versions of Movable Type, these links called open pop-up windows by default. With MT3 templates, these links direct you to an anchor on the Individual Entry Archive page.

If you use the new MT3 templates and a new MT3 stylesheet on your MT2.x blog, the comments section of your Individual Entry archives will not work. To rectify this, remove all of the tags that come between <MTEntryIfAllowComments> and its closing tag on the Individual Entry Archive Template. Replace them with the following:



Search

One feature that is funky is search. MT handles the search templates in a different manner than the other templates. The search templates are handled on a global basis for all of your weblogs on the same installation. You can see what I mean by going to the test blog and searching for something. In order to adjust this template, you either have to change it for all of your weblogs on the same installation, or you have to create an Alternate Search Template. You can sort of get around this by just creating a different stylesheet for your updated look, while keeping the old stylesheet for search. Or you can add the MT2 classes back into your new stylesheet. Note that the search template is looking for a file named styles-site.css. The MT2 search template uses the following tags, looking for classes that no longer exist in the MT3 default stylesheet:
<div class="blog">
<h3 class="title">
<div class="comments-body">
<h2 class="date">
<div class="blogbody">
<div class="posted">
You can add the following code to your new MT3 stylesheet, and your Search page will have the combined look of your new style and the "clean" style from MT2.



Sidebars

One nice implementation in Typepad is that the sidebar remains on the side for not only the Main Index, but also the Category, Date-based, and Individual Entry archives. To do this with these templates you will need to create a file containing all of the code in your sidebar and use either a PHP include or an MTInclude to pull them into your templates. Either that or copy and paste the following code,
<div id="right">
<div class="sidebar">
and everything between these two lines of codes and their closing div tags from the Main Index template into the other templates, right above the last closing div tag of the templates.

MT3 Stylesheet Modifications
You may notice that your weblog created using the new MT3 stylesheet doesn't render properly in IE 5 or 5.5 on a Windows computer. The right hand column will seem to disappear and show up underneath the left hand column. A simple adjustment to the stylesheet code is all that is needed to correct this. Increase the number of pixels in the #container id width by two. So that
#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 700px;

becomes
#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 702px;

Links:
Old default stylesheets for MT2.x
Old default templates for MT2.x
Migrate your MT2.x blog to MT3 - if you upgrade to MT3, here are steps that can help you adjust your MT2 templates.
Converting MT 2.x styles to MT 3 - what to do if you want your existing MT 2.x style to work with the new MT 3 templates.

Note: Pulling this tutorial together took many hours of trial and error. I am definitely no expert in CSS. Please do not attempt this unless you know what you are doing. I suggest first trying this out on a test blog. I am happy to hear feedback in the comments section, especially any corrections to what I've written or tips that can help others. I do not have the expertise nor the time to troubleshoot other people's MT issues. The fabulous MT Support Forum is the place for that. Heck, they even have some people who get paid to help others with Movable Type! Cheers, Elise.
Posted by Elise Bauer on June 17, 2004 5:59 PM to Learning Movable Type http://www.learningmovabletype.com/