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.

Where is the Sidebar Code?

The MT3.2 stylesheets and...

continue reading ...

The default Movable Type MT3 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.

Where is the Sidebar Code? MT3.1 and...

continue reading ...

You should just be able to copy and paste this style sheet into the master style sheet of your blog and you'll get a nice little site refurb, on the house:

 # Waters of the Hudson # CSS distributed by # PlasticMind Design # http://plasticmind.com body { margin: 0px 0px 20px 0px; background-color: #000033; text-align: center; font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif; } a { text-decoration: none; } a:link { color: #336699; } a:visited { color: #336699; } a:active { color: #336699; } a:hover { color: #ACBED5; border-bottom-width:...
continue reading ...

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

continue reading ...

Matthew writes

I am trying to make the side bar in Movable type to extend to the bottom of the page. I have gotten it to work in IE but not firefox. You can take a look at my site

Quite a few people ask me this question (you can see the problem in the screenshot -- click for larger view), and this problem was fixed in the default templates. It can be combatted in two ways.

CSS

Add the following to your stylesheet

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

HTML

Alternatively, on every template that you have a sidebar, add the following code just before the end tag of the #container div

<div style="clear:...

continue reading ...

The default Movable Type styles use color schemes in which certain colors are repeated in different style elements throughout the stylesheet. For example, the Independence style uses the same color red (#B22222) 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...

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

Tutorial cross posted on Learning Movable Type and Movalog.

With Movable Type 3.2, Six Apart launched a new markup and stylesheet structure that has also unified their three platforms. These new templates and stylesheets (from now on referred to as themes) have been called tag soup due to the sheer number of <div>s and indents.

What a mess - why did they do it?

The new themes can be quite intimidating the first time you come across them however Six Apart have created these new themes for several reasons: • First of all, Typepad, LiveJournal and Movable Type now share exactly the same markup. This means that a theme will work on any of these three platforms and designers can...

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

Updated. Originally posted April, 2004

Adding a Recent Comments section to your weblog is easy and straightforward. There are two basic approaches. The first is to list the last N number of recent comments; the second the last N most recently commented on entries.

The most recent comments

In this example of Recent Comments the last 10 comments are listed, regardless of how many times there may have been comments to the same entry. The comment authors names are linked to their respective websites, if they have them, and the entry title is linked to the author's comment in the entry.

For most recent comments like shown in the example to the left, add the following code to the...

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

The first thing you might want to do when customizing your Movable Type blog style is to change the color of the background, banner, headlines, or text. This is pretty easy to do; the adjustments are made in your weblog's stylesheet template.

Before you start, you should have a basic understanding of how colors are coded into a web page. Open up your stylesheet from the templates menu in your MT edit screen. If you scroll down you will see several instances of the word "color" followed by a # sign and six characters comprised of letters and or numbers. These six characters represent a color; the first 2 characters affect the RED tones of RGB, the third and fourth characters...

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

There are several ways to make your life easier whilst having fun with HTML markup and CSS design.

Learning, the fun way

When I first tinkered around with HTML and CSS, I was a bit unsure and un-inspired as to what to do, but I employed a technique that some may frown upon. Using a variety of tools, I took a peek at stylesheets that had produced something I like. I didn't steal them but rather learnt from them on how to do such and such a thing. I would recommend trying this out as it is a hands on way to learn what various bits of CSS code do - and its much nicer to see it in action done the right way.

Sidebar Panels

If you use Mozilla/Firefox as your browser, you are in luck. EditCSS and...

continue reading ...

This tutorial is written by LMT author Arvind Satyanarayan of Movalog. Tutorial cross posted on Movalog and LMT.

With Movable Type 3.2, Six Apart launched a new markup and stylesheet structure that has also unified their three platforms. These new templates and stylesheets (from now on referred to as themes) have been called tag soup due to the sheer number of <div>s and indents.

What a mess - why did they do it?

The new themes can be quite intimidating the first time you come across them, however Six Apart created these new themes for several reasons: • First of all, Typepad, LiveJournal and Movable Type now share exactly the same markup. This means that a theme will work on...

continue reading ...

We all have our daemons. They lurk behind the scenes, driving us, seducing us. Their powers can be quite magical.

In the Unix operating system, for instance, the many background tasks that occur behind the scenes are controlled by processes called daemons. Following the Unix tradition of keeping the names of things short, a "d" is appended to the end of the name of the task that the daemon controls. Thus the daemon that controls the hypertext transport protocol (http) on Unix based web servers is called httpd. Similarly, ftpd controls TCP/IP file transfer.

As designers, I often think that we have a design daemon (designd) controlling our creative impulses. When my...

continue reading ...

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

Simple static site templating with a CSS focus.

I use a very lightweight templating system of my own devising on this site that strikes me as something that might be of value to someone, somewhere. No database required, although you could certainly use one in conjunction with this method if you feel so inclined.

This is pretty basic stuff, so feel free to skip this one if you're an old hand at server-side scripting. Then again, it sets up a lot of the CSS tricks I use around here, which may prove interesting even so.

Around 1998 or so, I maintained a semi-large site for a local ISP which grew pretty quickly, so templating was largely a matter of global find and replace. It...

continue reading ...