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.

To add a third column, you will make a copy of the default "beta" column code and put it before the "alpha"...

continue reading ...

This Movable Type plugin implements a set of template tags for displaying text in multiple columns. Your text will be broken up into approximately equal portions, and the HTML formatting you specify (i.e. a table cell) will be repeated once for each portion.

Installation

To install the Columnize plugin, upload the file Columnize.pl to the plugins directory within your Movable Type directory. If you do not already have a plugins directory, create one before uploading the file. For more information about Movable Type plugins, see the documentation.

Contact

Please address questions, comments, bug reports, feature requests, interesting usage examples, etc., to mtplugins [AT] staggern...

continue reading ...

Editor's Note: The following technique accomplishes its goals by using a few markup elements that lack innate semantic value. For some of you, that may place this means of achieving cross-column pull-outs beyond the pale. For the rest of you, bon appetit.

Print designers have long relied on the ability to wrap text around anything - most commonly around a picture centered between two columns. This design option has not been available for web designers ... until now.

Basic two-column layout

To use this technique, we must first set the stage.

XHTML:

<div id="overall"> <div class="col"> <p>…</p>...

continue reading ...

This tutorial is written by LMT guest author Arvind Satyanarayan of Movalog.

Updated Nov 16

The default styles that come with MT are known as 'fixed' styles. This means that size and position of layout elements, such as columns, are fixed and are defined in pixels (px). This also means that no matter what a person's screen resolution, everything will be the same width and in approximately the same position. The alternative to a fixed design is a fluid design. A fluid design uses percentages when defining size and positions, so the sizes of elements on the page are relative to the user's screen resolution. A fluid design also removes the horizontal scroll bar. With a fluid...

continue reading ...

Learning Movable Type has an article that guides you through the steps of creating a three blog layout. The only problem is that the #container width has ben set to 904 pixels. This means that on a 800x600 layout you're going to get the nasty horizontal scroll.

The best way around this is to create a fluid three column layout ( what are fluid/fixed layouts ?).

1.Change the width of #container to 90%

2.Delete #center and corresponding div tags in all your templates

3.Duplicate your sidebar, find the following/similar code in your stylesheet #right { float: left; width:200px; overflow: hidden; }

And replace it with the following: #right { float: right; width: 20%;...

continue reading ...

As you probably already know, Movable Type 3.2 was released and boasts a stunning featureset. I personally have plenty of plugins, tools and other announcements to make which are all related to this release. The first of which you've probably guessed by the title. I present the Movable Type Style Generator. Quite simply, click on any element on the page and a box will appear allowing you to change any of the element's properties from background color to font faces and styles. After you're done, hit the Download button to get the stylesheet, 3.2 compatible! The beauty of this style generator is since it creates 3.2 compatible stylesheets, you can use them across any of Six Apart's...

continue reading ...

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

continue reading ...

Many thanks to Elise over at Learning Movable Type for allowing me to reprint this tutorial, in it's entirety, here.

Applying MT3 Style Templates to MT2.X

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 no longer posted on the MT website, but they can be found here at the Internet Archive.

You can update your MT2.661 (or earlier version) stylesheet with one of the new MT3 default styles (with or...

continue reading ...

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

continue reading ...

1) copy main index template from

<div id=container>

to

<div class=content>

2) in individual archive template paste (what you just copied above), replacing from

<div id=container>

to

<div class=content>

3) cut

<br style="clear: both;" />

from beneath/end of "FORGET INFO" code and paste

<br style="clear: both;" />

under/at end of (FINISH THIS THOUGHT! brain fart... sorry!)

That is all fine and dandy as long as you have comments open. If comments are closed you need to clear the floats or your 3 columns will be differing lengths. Not a pretty sight! So... 4) paste this code:

<MTElse> <br style="clear:...

continue reading ...

A very simple but elegant design featuring a dark background with lighter "panes" for the content areas.

Click image for a full size sample. (opens in a separate window)

Black Cherry Coffee Dark Sage Dark Teal Dusty Rose Jade Plum

Posted by The Style Monkey at January 9, 2005 11:24 PM

continue reading ...

Sticky sweet goodness abounds in this bright, clean style.

Click image for a full size sample. (opens in a seperate window)

Blueberry Cherry Grape Lemon Lime Orange

Posted by The Style Monkey at February 22, 2005 11:13 PM

continue reading ...

(Note: this tutorial is intended for MT versions 2.661 and earlier.) If you are new to Movable Type, and are using the default style sheets you may have encountered a surprise when viewing your weblog in various browsers. The reasons for this are many. First, different browsers (Internet Explorer, AOL, Netscape, Safari) on different platforms (Windows XP, Windows 2000, MacOSX) render CSS (Cascading Style Sheets) in different ways. What looks one way on a Mac running Safari can look way different from a PC running AOL. Second, our dedicated team at Six Apart - Ben and Mena Trott - are Mac-ophiles, assuring that most of their default styles render well on a Mac, but not necessarily so...

continue reading ...

A simple full-screen monchromatic style with the content section in a panel isolated from the rest of the page.

Click image for a full size sample. (opens in a seperate window)

Dark Sage Desert Sand Grey Lavender Misty Blue Misty Pink

Posted by The Style Monkey at January 14, 2005 01:47 PM

continue reading ...

A simple design, using complementary colors on a field of grays. Click image for a full size sample. (opens in a separate window)

Olive Cornflower Eggplant Subtle Olive Purple Peachy

Posted by The Style Monkey at January 3, 2005 09:15 AM

continue reading ...

A simple design, using complementary colors on a field of grays. Click image for a full size sample. (opens in a separate window)

Olive Cornflower Eggplant Subtle Olive Purple Peachy

Posted by The Style Monkey at January 3, 2005 09:10 AM

continue reading ...

A simple design, using complementary colors on a field of grays. Click image for a full size sample. (opens in a separate window)

Olive Cornflower Eggplant Subtle Olive Purple Peachy

Posted by The Style Monkey at January 3, 2005 09:05 AM

continue reading ...

When I first launched the Style Generator, the biggest request I got was to have some sort of colour scheme chooser or a random style generator. After a few attempts (and a lot of help from Brad Choate), I've finally managed to create the Random Styler. This random styler is capable of generating thousands of different Vicksburg variations with the click of a button (and some AJAX magic!). Some advanced features include: • Being able to change the number of columns (e.g. from a 2 column layout to a 3 column layout and so on) • The ability to edit the stylesheet generated - clicking the edit button will take you to the Style Generator where the stylesheet will be preloaded and you can tweak it...

continue reading ...

At long last I've made some updates to the Style Generator to better fit with Six Apart's standard. This means that you can finally apply the tips discussed in this tutorial to stylesheets created using the style gen. Most of the other changes are mostly on the backend code so that it's easier for me to build on it in the future. The only real change on the frontend is the addition of a splash page that allows you to select the number of columns - as cool as the on-the-fly capability was it was a major pain to support. A big thank you to Six Apart for letting me use their images, I'm a terrible graphics designer!

The biggest feature I am working on right now is the ability to load...

continue reading ...

Movable Type offers five default stylesheet templates to use with your MT website. If you are like me, not a web designer and only possessing a cursory knowledge of CSS, you may not want to stray too far from the defaults. But then that doesn't leave us with a lot of choice in the number of default styles from which to choose. Fortunately, Typepad (Six Apart's hosted service based on Movable Type) has several default styles that will work with the new Movable Type templates.

I've tested the following Typepad styles on the new default MT3 templates, with the sidebar on the right hand side, and they appear to work fine. If you have changed your MT3 templates layout at all, for...

continue reading ...