May 23, 2004

Simple Changes to the Default MT3 Styles

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 Llinks.

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;



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

Trackback

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

» Third column, random quotes, and performance from Carpe Bonum
For your further reading enjoyment, I have enhanced the layout of Carpe Bonum once again. Most noticeably, you are now looking at a three column layout. I wanted to show you more stuff near the top of the page than......[read more]

Tracked: April 15, 2005 08:59 AM

Comments

Thanks for this wonderful blog.

I followed tip#2 to add a third column and it works in Firefox but does not work in IE or Opera. I get the problem described in tip #4. The left column is OK but the content and right column are pushed underneath the left column. I tried to follow tip # 4 but making the container width 904 to accomodate for the third column but so far no luck.

Thanks again.

Hi David,
One problem you're having is that you have a lot of extra div tags in your Main Index template that don't do anything. They look like remnants of div tags from an earlier version of MT. To use the MT3 stylesheets effectively, you have to totally redo your Index and archive templates. See a tutorial I posted a few days earlier concerning this (Using MT3 styles with MT2.X). Because of all the extra tags it is kind of hard to sort out what the problem is.

To all - I highly suggest when you make a major change to layout that you try it out first on a test blog. This is what I do. Also, I am not at all an expert in CSS. I am only posting tips that I am using or have tried and found to work for me, usually after several hours of trial and error. If you have found an error in what I have posted, and you have tested it, please by all means let me know about it. And as always, a great place to go for support (with people who really do know CSS) is the Movable Type Support Forums.

Hi Elise,
I started a new MT 3.0D weblog - not an upgrade to an existing one. When I added links in the sidebar, the font didn't match. Do you have a "fix" for that?

Thanks!

Roland
(The weblog in question is: www.goodbuddies.net --- I added the "directions" line - it totally doesn't match!)

Elise,
Thank you for this post... it worked wonderfully on my site... three columns are nice... less "MT-like"

Keep up the good work!

-John

Thank you for tip #4. As an IE 5.5 user, that always bothered me on Typepad blogs. But now Saturday is cut off the calendar. How can I shrink the table so it'll all fit?

Manda - Try reducing the calendar's padding or assigning a fixed width to the calendar table. That might do it.

Thanks! I now have 3 a left column on my site. Very handy to add some links! I have a question though, can I reduce the side of the left comlumn to 150px and change the container to 854px? I havent added anything on that left colmun but when I reduced to the size on the right column, the calendar cut off. Is it safe to do that on the right column?

Ryan - you can reduce the size of the right column (just so the right, left, and center columns and 2 pixels all add up to the size of the container). The problem is that by reducing the size of the column in which the calendar is contained, the calendar may no longer fit in the column. You can try to make some adjustments to the calendar style in the stylesheet´┐Żassigning a fixed width for example, or reducing the size of the calendar fonts. I haven't done this yet, so if you find a solution, please come back here and let us know what worked. Thanks!

hi elise,
I am new to MT and just feeling my way through.you r page has been a great help to me and I have been using it at each step in the way.

I was trying to create a 3 column layout for my page but some parts of the instructions are not clear :(
like for example
"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:"

I did not understand this part as .I tried out what i understood but no luck.
any help appreciated
regards

Hi Elise,

I'm having difficulty w/ the 3-column approach. My right column follows below the left column instead of staying on the right. Might this be due to the absence of center column content, or have I missed something important in your directions? I thought I followed them explicity. My column widths are container:846, center:550, left:150; right:150.

By the way, does extending the overall width make this difficult to see on 800 pixel width monitors?

One final note. In an effort to fix the problem, I added the line height:100% to both #left and #center in an effort to fix this but it didn't work.

Appreciatively

The tip about IE 5 and 5.5 was hugely helpful. Thank you very much.

I tried using the tips for three-column blog. It didn't go so well for me. Please look at my site and tell me what I did wrong.

The right column is now below the left column. I tried adjusting the #container width, but its still the same.

lilminmin - the problem is that you are using tips that are designed for the MT3 default template, not MT2.x. From viewing your HTML source it looks like you have not adjusted your template tags so they more resemble the MT3 default templates. You have tags from the 2.x template still in there. Take a look at http://www.elise.com/mt/archives/000466applying_mt3_style_templates_to_mt2x.php. You will need to change your index and individual archive templates first to reflect the new style tags in the new MT3 style template. If you have more problems with this, please use the MT forums as there are people there who are much better at troubleshooting HTML and CSS than I. Good luck!

Great tutorial!

Thanks

Works in Firefox but not IE.

I've tried increasing the containter width, to no avail.

Thanks for the tutorials, Elise, and any help?

The stylesheet that comes with MT is what is known as 'fixed' A fixed design uses pixels to define size and positiong. It is called fixed because no matter the user's screen resolution it will always look the same. The problem with fixed designs is that they might not look nice on all screen resolutions eg the default MT styles appear on my monitor as quite a narrow verticle bar on the centre !

This is why I have opted for a 'fluid' design. A fluid design uses percentages when defining size and positions. ie depending on the users screen reolution, the stylesheet renders the page ! Many people have said that fluid designs are not very accessible and in some cases this is true.

To acheieve a fluid design with you MT style, I have found that 90% for the width of #container, 25% of the width of your sidebar and 74% for #center.

The only problem with fluid designs in MT is the calendar - but one can edit that to look ok !

Continuing from above, if you opt for fluid, you may need to add the following code:

#container:after {
content: ".";
display: block;
height: 0;
clear: both;
overflow: hidden;
}

to your stylesheet, this is when yout #container has a different background colour to you body and the colour doesn't fill the full space of #container ! Good Luck converting to fluid templates !

Awesome tips - in less than 5-minutes your help
creating a 3-column template worked like a charm

Thanks for this - saved many days of work.

One additional question - relates to comments.
I am having trouble with the link to a comment
URL not resolving. I understand the anti-spam
feature that doesn't connect directly to the
link - but the ID doesn't resolve to the URL
entered when someone submits a comment. Any
ideas where I would look to solve this problem?

My blog is over at: http://www.highertrustmarketing.com/blog/

Thanks,

Jeff Smith

Jeff - there is a redirect that should be happening that isn't happening on your site. Try your question at the MT Support Forums at http://www.movabletype.org/support. They have a specific forum just on the comments feature.

Thanks Elise - I've posted twice on the support
forum, neither received any response.

I'll give it another try.

Cheers...

Jeff

Jeff - have you tried disabling the redirect URL until you find a solution? See the MT Manual's section on MTCommentAuthorLink

There's a mistake in Step 2. float for #left and #right are both set to left. Float for #right should be set to right.

Lola - it's not a mistake. That's how the code works. Both are set to float left. This code is what I have found to work in the largest number of browsers. When you introduce float right with this code, it screws things up in some browsers.

Like so many things, there are many ways to Rome and many ways to do your CSS. This is just one that I have found works.

Comments are now closed for this entry.


Email to a friend

Email this article to:


Your email address:


Message (optional):