The New Themes - Making Sense of it all
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 design to around 10 million bloggers worldwide!
- The new templates are powerful. Giving each element on a page an ID means that it will be easy to start implement cool javascript and ajax effects. It also means that people can start creating scripts for applications, e.g. greasemonkey, that will make browsing a weblog a lot more easy and fun.
- This is just the tip of the iceburg. Six Apart has a few announcements coming soon that will prove to be useful to all webloggers on Typepad, Movable Type and LiveJournal.
Alpha, Beta - sounds Greek
If you cast your mind back to the 3.1x templates, MT had columns named center, right, left etc. - nice and easy to understand. So why on earth did Six Apart change that to alpha, beta and other letters from the Greek alphabet. The reason is quite simply that the names center, right, left and content might not always apply. For example, in this MT3.1 tutorial Elise described how to change the positioning of the sidebar from right to left. Doing so would create quite a mess in the stylesheet because you'd have an element called right but it would be on the left! Also on more complex installations, the column containing the entries might not always be on the center (for example Engadget).
As a result, Six Apart created fairly ambiguous names to, ironically, lessen the confusion. So we now have columns called #alpha, #beta, #gamma and #delta. The "beauty" of this new layout is that the columns always follow in that order no matter how many columns you have. From the left, the first column will always be #alpha, the second #beta, the third #gamma and the fourth #delta. The images below might help you understand better:
base-weblog.css - what it is, why it matters
If you have used the StyleCatcher plugin you will have already seen the base-weblog.css file. This aptly named stylesheet is basically the base for all of Six Apart's present and future stylesheets. All it basically does is define the positioning of the various elements and some very basic styling for those elements. If you have freshly installed Movable Type 3.2 and see only one stylesheet index template then the base-weblog.css part is everything from the top until the /* theme / declaration. As this section is the base stylesheet for all templates, I would caution you against changing anything in this section, doing so could cause some display errors with different themes across different browsers. All changes to the stylesheet must be done below the / theme */ declaration or within the theme file. This way you will avoid any conflicts when changing between themes.
Switching layouts - 1,2,3
One of the most powerful aspects of the new stylesheets is the fact that they come with built-in support for one, two and three column layouts; to switch layouts all you need to make some markup changes. I will guide you through switching the layouts and provide general advise as to how to make this an easier process. Note: I've discovered this whilst coding the next version of the Style Generator, as a result, using stylesheets generated with the current Style Generator, the following will not work.
If you open your Main Index Template and find the <body> tag, you will see that it has a class attribute, by default layout-two-column-right. This class defines the basic layout of the page and where the sidebars go. You can change this class to any of the following:
- layout-one-column - for a one column layout
- layout-two-column-left - a two column layout with the sidebar on the left
- layout-two-column-right - a two column layout with the sidebar on the right
- layout-three-column - a three column layout.
Simply changing the class could kick your theme out of whack, the reason being, the divs must follow the order I talked about above, i.e. #alpha, #beta, #gamma and #delta. As a result:
- One Column Layout - you only need one column, #alpha, which contains your content. By default the theme will apply the necessary styling.
- Two Column with sidebar on the left - here you will have two columns, the sidebar will be #alpha and the main content column will be #beta. To move from the default templates to this layout, copy your sidebar (i.e. everything between<div id="beta-inner"></div>) into the content column (i.e. paste it just below <div id="alpha-inner"></div>). Do the same with your content so that your sidebar is now #alpha and your content column #beta.
- Three Column - for this layout, you will first need a sidebar called #alpha, next comes your content column #beta and finally the second sidebar called #gamma. The easiest way to implement this layout from the defaults, is to copy the #beta div(i.e. everything between <div id="beta"></div>) and paste it just below <div id="pagebody-inner" class="pkg">. Finally you will need to rename the three divs so that they are in order, #alpha, #beta, #gamma.
During my testing, I found that the easiest way to implement the new layouts is to split the layouts by the columns into separate index templates. Therefore, I would advise you to copy each column for example #alpha into a separate index template and then PHP include that in. As a result, you can grab these templates (based off the default templates):
- One Column Layout - #alpha
- Two Column Layout (Left) - #alpha, #beta
- Two Column Layout (Right) - #alpha, #beta
- Three Column Layout - #alpha, #beta, #gamma
12 Comments
Subscribe to Movalog's Feed
Jeroen said:
on Oct 24, 2005 11:29 AM | Reply
Thanks for explaining MT's theme structure! I already used the StyleGenerator to make some changes, but would rather like to edit my theme manually.
Becka said:
on Oct 24, 2005 12:02 PM | Reply
Oh I see thanks for the article it helps me understand what is going on with themes a little more. Makes some more sense now.
dave everitt said:
on May 8, 2006 5:39 PM | Reply
Is there a way of offering alternative an 3-column layout for one user without trashing the main_index.tmpl and therefore everyone else's 2-column layouts?
Deliverance said:
on Sep 1, 2006 1:26 AM | Reply
Can you explain to a nerd like me how to install Stylecatcher plug in. I read TypePad's text file on how to do so and got zero out of it?
rick said:
on Dec 5, 2006 4:27 AM | Reply
Is there an on-line resource for tutorials on how to customize a moveable type blog? I've been at it all day trying to change the default blue banner. I've uploaded different css files to no effect. Help Please!
Arvind Satyanarayan said:
on Dec 5, 2006 3:58 PM | Reply
Hi rick, this page lists some of the best tutorials we have available with regards to designing for Movable Type. I would also recommend the Templates and Style category on Learning Movable Type
markus said:
on Feb 2, 2007 10:26 PM | Reply
I am pretty new to this whole thing ... I downloaded my newly created stylesheet (php) but where do I need to install that, or copy it too? does that go right into the themes folder?
thanks
Kamela said:
on Feb 17, 2007 9:43 AM | Reply
I'm using the stylesheet titled Clean Cut. It was part of the style contest & love the layout! My question is how do I found out how to change the opacity over any image in my posts. My blog is about visual design and it's annoying that I have to roll my cursor over the image to see the true colors. I have searched EVERYWHERE to try and find answers. Please, someone help me! Thanks to anyone that direct me on my merry way!
jasperine said:
on Feb 19, 2007 10:57 AM | Reply
Like markus above, I am a newbie and need some instructions on how to get my style (php file) uploaded to my site. I am hosting MT through Yahoo (maybe they are the only one doing this?) but my stylesheet template does not have code, but only a root url. How can I change my style sheet so it has the colors I want? Any advice would be very much appreciated.
Brad said:
on Nov 19, 2007 5:21 PM | Reply
I really appreciate the new structure in MT4. But while I could design anything for MT3, I"m going nuts trying to deconstruct MT4 so I can design for it.
I just want a simple 2 column layout, but I can't figure out how to get rid of 3 columns. I see basetheme.css has classes of layout for alpha, beta, etc, but I can't find any reference to alpha, beta, etc in the index template, or anywhere else. I'm tempted to strip it back to MT3 levels, kill StyleCathcher, and just start modifying basetheme.css and using 1 CSS file.
Is there a comprehensive resource somewhere for designers? Are TypePad resources applicable to MT4?
I feel like a wagon train leader with a compass and no map, and all the wagons in the train have SatNavs that will take us to any destination except where we want to go. (They want to go through the mountains. I know we'll end up eating each other in a blizzard. (Yes, StyleCathcher is the SatNav. It's great as long as you don't want to go anywhere new.))
Brad said:
on Nov 19, 2007 5:27 PM | Reply
I really appreciate the new structure in MT4. But while I could design anything for MT3, I"m going nuts trying to deconstruct MT4 so I can design for it.
I just want a simple 2 column layout, but I can't figure out how to get rid of 3 columns. I see basetheme.css has classes of layout for alpha, beta, etc, but I can't find any reference to alpha, beta, etc in the index template, or anywhere else. I'm tempted to strip it back to MT3 levels, kill StyleCathcher, and just start modifying basetheme.css and using 1 CSS file.
Is there a comprehensive resource somewhere for designers? Are TypePad resources applicable to MT4?
I feel like a wagon train leader with a compass and no map, and all the wagons in the train have SatNavs that will take us to any destination except where we want to go.
If I figure out how to create a StyleCatcher theme (a SatNav location), can I prevent users from switching to 3 column layout? Is that the approach to take?
Brad said:
on Nov 19, 2007 5:28 PM | Reply
I really appreciate the new structure in MT4. But while I could design anything for MT3, I"m going nuts trying to deconstruct MT4 so I can design for it.
I just want a simple 2 column layout, but I can't figure out how to get rid of 3 columns. I see basetheme.css has classes of layout for alpha, beta, etc, but I can't find any reference to alpha, beta, etc in the index template, or anywhere else. I'm tempted to strip it back to MT3 levels, kill StyleCathcher, and just start modifying basetheme.css and using 1 CSS file.
Is there a comprehensive resource somewhere for designers? Are TypePad resources applicable to MT4?
I feel like a wagon train leader with a compass and no map, and all the wagons in the train have SatNavs that will take us to any destination except where we want to go.
If I figure out how to create a StyleCatcher theme (a SatNav location), can I prevent users from switching to 3 column layout? Is that the approach to take?