« MT3.2 - Changing the Default Sidebar Position | Main | Adding a Sidebar to the Default Archive Templates »

The New Themes - Making Sense of It All

mtbadge-small.gif
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 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.
The quickest way to get started with these new styles is to install the StyleCatcher plugin so you don't even need to worry about the new themes. Just install the plugin, chose a theme that you like and the plugin automatically applies it for you (creating backups as it goes along). However if you're brave, read on to understand these templates, what they do and how to make effective use of them.


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:

layout-two-column-left.gif layout-two-column-right.gif layout-three-column.gif

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):

So depending on the layout you want, grab the appropriate files, build a new index template for each and include them into your other templates in the correct order #alpha, #beta, #gamma and make sure you have the correct body class specified.

Comments (7)

Light & Dark:

Arvind:

I'm only just getting up to speed on 3.2, but has someting changed in the way MT will parse php includes? My understanding was that the MT engine processes MT tags before adding the php includes, so tags in the includes never get processed. What am I missing?

Paul

resist:

I'm having a bad time trying to make basic changes to the new thems. I got a background image going in the banner by adding a style below the @imports on styles-site.css but could not disable the background color for the text.

I went so far as to trying to apply this
style="background-color: none;"
to various elements directly on the index.php but nothing happened. I cannot find half of what I am looking for.

Where are the guidelines for using this style sheet technique? I live in the bay area and would pay into some group training or a class.

THANKS!!!

Swade Author Profile Page:

Hi Elise,

I've been trying to get my head around these templates all night!! It's killing me. I used the Style builder at Movalog (great) but what's getting me down the most is my inability to insert my Google ads. They're coming up very funky indeed.

Is there a 'module' I need to tie these to? Actually, is there an easy way of getting rid of the standard sidebar content in 3.2 and inserting your own content?

Any advice appreciated. The blog I'm trying this on is an experimental blog that may go live in a few weeks if I can sort it out. I've linked my test version at the URL space by my name.

Cheers,

EricSlade:

Cut-and-Paste Code Example Dependent

Arvind,
Thank you for leading the way in helping us all to understand these new layouts. Clearly your understanding is advanced.
Where I become completely lost is at the very point where your instructions become general:

grab the appropriate files, build a new index template for each and include them into your other templates in the correct order #alpha, #beta, #gamma and make sure you have the correct body class specified.

Help! I need some serious details here - screenshots or some cut-and-paste code examples:
Should we create new index templates or modules?

What should we name the output files for each template?

Should they have .php extensions?

Where in the main index template should we place the include calls?

Are we replacing some existing code?

Can you give us an example of what the code for our div with the proper class attribute applied might look like?

The tag soup, with its potential missing quotation marks, brackets, or multiple closing tags is where most of us start to lose our minds.

When it comes to things like php scripting, I'm cut-and-paste code example dependent.

I find Elise's tutorials so helpful because she administers MT from a perspective most of us can relate to - the brave amateur - we don't always understand the big picture, but if you provide us with a specific enough example, we can make it happen.

Many people learn by visual cues, so I know I'm not alone in this. I appreciate the many useful tools and tutorials you contribute to the MT Community - you're probably just getting started on this.

I hope & pray you and Elise are working on a nice Series of tutorials about editing these new templates, stylesheets, and themes.

I will be holding my breath and checking back daily : )

Hi Eric

I have provided cut and paste examples, depending on your layout grab the apprioriate files and create a new index template for each. Therefore you now have each column in a separate index template. From there on, everytime you wish to include a column you can include it in like so

<?php include("/path/to/alpha.php"); ?>

and so on for each of your columns. These PHP includes should replace the current columns in your main index template (and others), i.e. everything between <div id="alpha"> gets replcaed with the above. Does that make more sense?

EricSlade:

Yes, it makes perfect sense, Arvind. Your last reply answered my questions exactly.

The new layouts [initially] confused me more than I thought they would ... that lost feeling spread in a general way.

I just needed to see example code in detail, as you shared it - Thanks again.

Bruce:

OK...seems fairly easy. Now if I wanted to create a three column blog with Alpha and Gamma both on the left side...how hard would that be?
(Think WeblogsInc style blogs)

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)