Okay, so you've created a new blog in MT4. You've followed the system prompts and have picked a style from the available defaults. Now you want to customize the style you've chosen, perhaps use a different font, or a different color for an element. You go to look at the stylesheet template in Design > Templates > Stylesheet, and instead of seeing CSS code to edit, you see this:
Now what?
A list of comments, particularly a long list, that doesn’t include any style differentiation can get a little hard to read.
Using two alternating comment styles will give your readers’ eyes a break and your blog a little more style. Happily, Movable Type 4 provides a relatively simple way to do this.
Updated
Movable Type uses CSS elements defined in your weblog's stylesheet template to control font sizes as well as other style factors. The following graphic indicates which default stylesheet classes and IDs correspond to which heading and text elements in the MT3.2 default Vicksburg style.
Updated November 25th, 2005. Better code.
A great way to easily customize the look of your Movable Type weblog is to insert a banner image. To do so, you will need to make adjustments to your style sheet, and potentially to your index and archive templates as well.
Before making template adjustments, you first need to prepare your banner image. You might choose to use an image that will take up the entire banner space, or you might want more of a logo-like image that would only take up a part of the banner space, with a solid color making up the difference. Computers show images at a resolution of 72 dpi (dots per inch), so if you are working with a photograph for your banner image, it will be easier if you work with it at that resolution.
If you want an image that extends like a photograph to the edges of your weblog, create an image with the width of your blog. The MT 3.2 default blog width (#container) is 720 pixels wide, including a 5 pixel inner border (#container-inner). This leaves exactly 710 pixels on the Main Index template for a banner image. On the archive templates that do not have a sidebar, there is space for a 510 pixel wide banner. If you have added a 200 px wide sidebar to the archive templates, then a banner image 710 pixels long will be displayed in full. If you have not added a sidebar to your archive templates, then a 710 pixel wide banner image will get cut off by 200 pixels on the right side.
Adding a background pattern to your weblog is pretty straightforward in Movable Type, requiring the change of only one line in your stylesheet.
1. Pick a pattern. You can make your own pattern using a tool like Photoshop, or you can pick a pattern from one of the many sites that offer patterns for free (for non-commercial use).
Patterns from Kaliber 10000.
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" column code in your Main Index template. Then you will rename the columns, in order, "alpha", "beta", and "gamma".
Here are the steps:
The default Movable Type MT3.2 templates come with a sidebar on the right side of the Main Index page, but not on any of the individual entry, monthly, or category archive pages.
There are two basic ways to add a sidebar to archive pages. The easiest for beginners is just to copy and paste the existing sidebar code into the correct place in the archive templates. The slightly more involved, but much preferable method is to create a separate file with the sidebar code and use a PHP include or an MT include to include the file into the various templates. You can also very easily move a sidebar from the right to the left side of your weblog pages.
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 (if you have a 3-column layout), and delta (a hypothetical fourth column that one could create). In the page produced by the default MT3.2 Main Index template, the sidebar is on the right and is in a column named "beta" in the template. The sidebar code is the section that begins with <div ID="beta"> and ends with its closing tag on the Main Index Template. (A text file of the default beta section can be downloaded here.)
The style sheet and templates in MT3.2 can be daunting to the non CSS expert. Changing the position of the sidebar from the right to the left shouldn't be so difficult. Once understood, it is a bit easier to do.
Changing the Sidebar Position
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 (if you have a 3-column layout), and delta (a hypothetical fourth column that one could create). If you change sidebar position from right to left, the order of the columns still needs to be the same on your index and any archive templates where you have placed a sidebar section.
From to: 
The easiest way to do this is to copy the entire template from your template window into a text editor such as BBEdit. That way you will be better able to see when the div sections start and end. This is the tricky part. It is all too easy to unintentionally pick up an extra closing div tag.
Updated March 23, 2005
Once you are uploading images to your MT weblog with ease, you might on occassion want to wrap text on either side of the image, like so:
Placeholder Latin text - Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia pondo auri furatus e Capitolio tantundem inaurati aeris reposuit. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet.
The default Movable Type styles use color schemes in which certain colors are repeated in different style elements throughout the stylesheet. For example, a style might use the same color red for the banner background color, the link hover color, the content h2, the calendar caption, and the sidebar h2 and border colors.
In the comments section of the LMT tutorial Colors - Background, Banner, Headline, and Font, developer Brad Choate remarked that you could easily use the MTSetVar tag to define a color and the top of your stylesheet, and use the MTGetVar tag throughout your stylesheet wherever you wanted that color to be used. This works because the stylesheet is a Movable Type template. Even though you are putting MT tags into the template, the output of the stylesheet will be standard CSS.
To do this, define a variable at the top of your stylesheet like so (use whatever color value you want. #7663BC is a shade of purple) :
<$MTSetVar name="highlight_color" value="#7663BC"$>
Then, wherever the color appears on your stylesheet, replace the color value with the following:
<$MTGetVar name="highlight_color"$>
