« Email Notifications | Main | Trackback XML Files »

Simple Changes to the Default MT3 Styles

This tutorial is out of date. ~Elise Feb 22, 2007

Here are some simple changes that even a non-CSS expert like me can implement to make some fundamental changes to the default styles of MT3 weblogs.

1. Moving the sidebar from the right to the left side.
The default MT3 Stylesheets have the sidebar on the right side of the page. To move the sidebar to the left hand side you don't actually have to change the stylesheet at all. The changes are made to the Main Index template and any other archive template that has a sidebar. In the Main Index template, find the sidebar code section:

<div id="right">
<div class="sidebar">

Your sidebar code

</div>
</div>

If your sidebar is currently on the right side of the page, the sidebar code will be found below the center id and content class closing div tags. Cut and paste this code from below these closing div tags to right above the beginning center id and content class div tags like so:

<div id="right">
<div class="sidebar">

Your sidebar code

</div>
</div>

<div id="center">
<div class="content">

Repeat for your archive templates that have sidebars. Save and rebuild your templates.


2. Add a left sidebar so you have a three column layout.
There are many ways to have a three column layout in Movable Type. The following is one straightforward and simple method to add a left hand sidebar to the existing default layout with a center section and a right hand sidebar.

a. Open your stylesheet and find the following code:

#right {
float: left;
width:200px;
overflow: hidden;
}

Make a copy of this code and paste the copy directly above it, renaming the ID left like so:

#left {
float: left;
width:200px;
overflow: hidden;
}

#right {
float: left;
width:200px;
overflow: hidden;
}

b. Find the container ID tag - #container { - in your stylsheet and change the width to 904px. The center, left, and right ID widths should add up to the container ID width minus 4 pixels.

Save your stylesheet.

c. In your Main Index template and your archive templates, insert code for the left sidebar above the center ID and content class div tags as outlined earlier in this tutorial.

<div id="left">
<div class="sidebar">

Your sidebar code

</div>
</div>

Take whatever elements you want from your right side bar code and insert them into your left side bar section.

d. Near the bottom of your Main Index template replace

<div style="clear: both;">&#160;</div>

with

<br clear="all" />

e. Save your templates and rebuild your site.

Note that this method will produce a rather wide web page for which those using a monitor with an 800x600 resolution (about 10% of the monitors out there) will have to use a horizontal scroll bar to see everything. There are two methods for dealing with this. The easiest method is to change the column widths so they add up to a number of 800 pixels or less, instead of 904 pixels. 450x175x170 will do the trick. If you use a calendar, a shorter column width for the column containing the calendar may produce some unwelcome results. You may have to adjust the calendar fonts, or play around a bit more with the column widths.

The second method of dealing with the wide layout is to change the fixed width layout as described above to a flexible width or "fluid width" layout for your weblog. Movalog has a tutorial posted on how to create a 3 column fluid width layout for your Movable Type weblog.


3. Banner and headline colors.
The default MT3 stylesheets match the background color of the banner to the color of various headlines. To change the color of the banner or headlines find the banner id in the default stylesheet. Note the background color. For example, in the default stylesheet Independence the default banner background color is B22222.

#banner {
font-family: Georgia, 'Times New Roman', serif;
color: #FFFFFF;
background-color: #B22222;

Insert the code for a different RGB color to change the color. To find these codes, use a color value tool like the one found at www.w3schools.com. The first two digits of the six digit code represent the red value, the second two digits represent the green value, and the last two digits represent the blue value. More tools for color picking can be found in the CSS help section of LMT Links.

To change the headline colors, find every instance of the distinctive banner color in your stylesheet. Replace with the color of your choice. Save and rebuild your stylesheet.


4. Making adjustments for IE 5 and IE 5.5
You may notice that your weblog created using the new MT3 stylesheet doesn't render properly in Internet Explorer 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;