Alternating Comment Styles with Movable Type 4
October 22, 2007 | Permalink | Comments (2)

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.

There are really only two steps to implementing alternate comment styles. The first is actually creating the two different styles. You can of course call these styles anything you like but since the styles are going to alternate between even and odd comments I like to call the styles, well, even and odd. Define these styles however you like and place them in your stylesheet. Here’s an example:


.even  {
background-color:#FFF;
padding:8px;
margin-bottom:5px;
}

.odd {
background-color:#F4F4F4;
padding:8px;
margin-bottom:5px;
border:2px dotted #999;
}

Simple enough right? Good. The next step is where the alternating magic within Movable Type happens. I’m going to give you the code to make that magic work and then I’ll go into a bit of detail about what that code is doing. You can choose to either simply paste the code straight into your template and move on or you can dive into the why and how it works.

The following code can replace all of the code in your Comment Detail template module or you can paste the necessary new parts in.

<mt:if name="__odd__">
<div class="odd">
<mt:else>
<div class="even">
</mt:if>

        </div>
    </div>
</div>
</div><!--End odd or even class-->

Pasted it in? Good. Seeing alternating styles between comments? Excellent. Why? It’s all thanks to Template Loop Meta Variables and if/else statements.

The Movable Type documentation explains Template Loop Meta Variables thusly:

Movable Type exposes a number of different template tags called container tags that loop over a set of objects. This allows designers to display for example the last 10 entries on a blog, or to display each of the comments associated with an entry.
As Movable Type iterates or loops over a list of objects in this fashion it maintains a number of meta variables for you, allowing you to test if the current item is an odd or even item in the list for example.

Got that? Maybe, maybe not. For our purposes the easiest way to understand this is to say that when anything Movable Type outputs takes the general form of a list where one item follows another (blog entries, comments, trackbacks, etc.) Movable Type keeps track of which items are oddly numbered (1, 3, 5) in that list and which are evenly (2, 4, 6) numbered. Until you implement alternating comment styles or some other modification there is no difference between odd and even comments on your blog’s output. That doesn’t mean Movable Type doesn’t know which is which though. By knowing that difference Movable Type is able to conditionally apply different styles based on an if/else statement. That statement is:

<mt:if name="__odd__">
<div class="odd">
<mt:else>
<div class="even">
</mt:if>

That code says “if a comment isn’t odd then it’s even. If it is an odd comment apply the odd style class, if it is an even comment then apply the even style class.”

You might be wondering, since the above code snippet doesn’t actually contain the word “comments” and it comes before any of the comment tags in the template we’ve put it in, how does Movable Type know for certain, that it’s odd and even numbered comments we want to keep track of. and not something else. In this case remember that the Comment Detail template module is pulled into the Comment template module as an include. So even though our code snippet is coming at the beginning of the Comment Detail template it’s really in the middle of all the tag soup for comments. So it’s clear to Movable Type that our if/else is referring to comments specifically.

You can see the code used in this tutorial in action at my personal blog. This tutorial was inspired by a conversation about the Gizmos for MT plugin at Appnel Solutions.

As always if I've made any mistakes or if you have any questions please let me know. Later this week we'll look at how to style comments from a blog entry's author differently than other comments.

If you enjoyed this tutorial and found it useful please consider a donation or a purchase from my Amazon wishlist. This is completely voluntary, donate or give only if you enjoyed the tutorial and found it useful. Any support of my efforts and future tutorials is greatly appreciated.