« Movable Type Style Generator | Main | Welcome Guest Author Chris Vannoy »

MT3.2 - Bare Essentials Templates

mtbadge-small.gif
This tutorial is written by LMT contributor Chris Vannoy of Dummied.org.

Movable Type's default templates have always been intimidating things to those new to the system, and with Six Apart's decision to standardize their template structure across all three of their blogging platforms, TypePad and LiveJournal being the other two, they've become a lot more intimidating in version 3.2 of Movable Type.

This standardization is a great idea if you are a web designer already familiar with the intricacies of Cascading Style Sheets (CSS). The standardization means that, assuming users stick to the default templates, you could design one stylesheet that would work on sites on all three of Six Apart's weblogging platforms.

On the other hand, all the extra div and span tags and id and class attributes in the new templates present a pretty dense thicket for beginners getting their first look at the guts of Movable Type to machete their way through.

Also, designers and programmers who want to create custom templates don't necessarily need all those extra tags. Sometimes, you just want a simple starting point before you start layering on your own template modifications.

So, as if by magic (or too much free time), there appear Simple Movable Type 3.2 Templates, available in a zip file here.

Don't want the whole thing? Want to go a template at a time? You're in luck; each template (that needed to be stripped down in the first place; some are pretty basic to begin with or are javascript templates) is available as individual txt files, as linked below:

Note that if you use Mac Safari, you may find these easier to view in FireFox.

A few notes about these templates.

First of all, they will not play well with any of the default style sheets that come with MT 3.2 (or earlier versions). I've tested them with the default style sheets and it ain't pretty. These templates are more for learning and coding than actual use out on the web unless you take the time to write your own custom style sheet.

Speaking of style sheets, the biggest difference between the default 3.2 templates and these simpler ones is that there's less you can do with CSS. The default template double wraps nearly everything in divs that include specifically-named attributes and slaps an specific id attribute on nearly every available tag. This provides a tremendous amount of flexibility when it comes to writing CSS.

In these templates, you don't have that luxury. They force you to get creative with how you style things. That said, you can use this template to get awfully close to the look of the current default style if you really wanted to. Off the top of my head, the only things you couldn't do would be the second border around the outside, the drop shadow on the title in the banner (not available in all browsers) and the different styling on the "Powered by" panel.

The only div tags left in these templates are basic structural ones: container (to wrap your pages), banner (to wrap your title and description), pagebody (to wrap your main entry and sidebar together), alpha (to wrap your main entry) and beta (to wrap your sidebar). These divs give you basic hooks to position elements on the page using CSS.

Everything in these bare bones templates is functional. All the inner plumbing of the default Movable Type 3.2 templates is there, it's just less cluttered - which should make things easier to figure out if you're at least somewhat familiar with the old MT templates.

If you're not familiar with the tags MT uses, there's a version of the Main Page template available here that includes a copious amount of comments to walk you through what nearly everything in that template does as far as the XHTML and most of the Movable Type tags in the template.

These templates should be considered a start toward customizing your MT installation and not a finish. They are a learning tool and not a finished product.

No matter how frustrating customizing Movable Type for the first time can be, try and remember to have fun and keep trying. It really does get easier after a while.

Comments (2)

Kirk:

Hi Chris,
Thanks for the link - I'll check it out in a little bit.

I have spent a lot of hours now deconstructing the templates in 3.2. They are more than merely intimidating - they are a mashup of CSS tag soup, obstruse HTML and confusing MT.

The power of CSS is the ability to separate the formatting of the page from the page code. This allows me to radically change the page format by changing a few lines on the CSS sheet. This is very good.

The problem I find in the 3.2 templates is that there is so little forethought and discipline in the way they are constructed and the relationship between the HTML and the CSS.

One of the great features of MT is the ability to use the includes. This means you can do "real" programming. For example, the block of code that puts up an entry is the same everywhere. So good programming would hold that we write one block of code to display the entry and then "include" that block everyplace we need to display an entry.

But MT doesn't do that and for the life of me I can't imagine why not. Maybe this bothers me so much because I have more experience programming than doing Web stuff. The same principle holds with the Comments and so on. The MT authors don't do that. It looks like the people writing the CSS and writing the HTML were in different rooms and only spoke once a week.

Untangling the MT templates is very time consuming. After a few hours of that I just scrapped their style sheet and started my own. I rewrote the the templates and broke down the common blocks to utilize includes. This renders the big templates much more readable and manageable. It allows me to easily put a nice jpg on my masthead, for example, instead of the plain vanilla look MT tries to impose.

It doesn't have to be as complicated as they make it! There are still some things I like about MT but the things I like are not outweighing the things that annoy me by a whole lot. I've started actively looking at other blog software because I am spending way too much time mcuking around in CSS and HTML instead of writing entries.

By the way, in case anyone jumps right to my sight, as I write this I am still mucking around in CSS and HTML so the site doesn't reflect this work yet. I hope that I'll finish this stuff today.

Swade:

Chris/Elise

I've just spent the better part of this week re-doing my templates on 3.2. I upgraded a while ago but it was too intimidating for me (a novice) but I've managed to make sense of it now and get things running OK (I think).

One of the things I've noticed, however, is that the 3.2 Stylesheet doesn't have formatting for blockquotes in there. I use blockquotes quite often and like to see them differentiated on my pages, and it's best for me if it's a one-button operation.

Is there a simple piece of code I can add in to my 3.2 stylesheet that can make this happen?

Regards.