« Rotating Banner Ads in MT Using PHP | Main | Tag Cloud on PHP in Movable Type 4 »

Alternating Comment Styles with Movable Type 4

A list of comments, particularly a long list, that doesn’t include any style differentiation can get a little hard to read.

Picture 1.png

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.

Picture 2.png
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 class="comment"<MTIfArchiveTypeEnabled archive_type="Individual"> id="comment-<$MTCommentID$>"</MTIfArchiveTypeEnabled>>
    <div class="inner">
        <div class="comment-header">
            <$MTCommentAuthorLink default_name="Anonymous" show_email="0"$> <MTIfNonEmpty tag="CommentAuthorIdentity"><$MTCommentAuthorIdentity$></MTIfNonEmpty>

said:
        </div>
        <div class="comment-content">
            <$MTCommentBody$>
        </div>
        <div class="comment-footer">
            <a href="#comment-<$MTCommentID$>" title="Permalink to this comment"><$MTCommentDate format="%x %X"$></a>

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

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.

This tutorial is cross posted at On a path media. Later this week at On a path media we'll look at how to style comments from a blog entry's author differently than other comments.

Comments (13)

helene:

Again, a great tutorial, I like that you can just copy-paste the code and everything work at the first try or you can learn really how this work. Bravo.

I can not wait to see the next subject on styling author comments.

Aruna Author Profile Page:

Uhm.. What happens if you don't have Comment Detail template? Where else would this go?

If you don't have a comment detail template my guess would be you're either using an old version of MT or you're using custom templates as opposed to the default Movable Type templates. If you're using custom templates I can't really give you any advice because I have no idea what template this data would be in on your system.

If you're using an old version of Movable Type, if I remember correctly, the individual archive template would be the place.

Aruna Author Profile Page:

Weird.. Well, I've been upgrading since MT 2.6, and am now at MT4. I'll try putting the code into the individual entry archive, and see what happens!

Aruna:

Ah.. Fixed it all. I ended up adding:

in the old individual entry archive, replacing the old one, and then recreating the Comment Detail, Comment Form, and Comments Module, and then allowing MT4 to rebuild it from a backup. Now all that's left is to actually get it to alternate. ;)

Lola Author Profile Page:

A bit of a digression - is there any documentation at all about MT4 style? I'm planning to do a retrofit of my blog so that I can use the MT4 templates for my current blog. I've been unable to get in touch with the original designer of the style that my blog is using, so I'm going to have to do the update myself (the original style doesn't work at all with the new templates). I've looked at movabletype.org documentation, and the wiki, and forums, and I've found absolutely nothing at all that explains the style structure. Seems that this was one of the things that got left out (along with others) when MT4 was released and never followed up on by someone at SixApart.

The Designer's Guide to Movable Type is the only thing that I can think of that would scratch the surface of what you're wanting but I don't know if it goes into enough detail for what you're wanting.

http://movabletype.org/documentation/designer/

Lola Author Profile Page:

Well . . . yes, I looked there before I asked, but it doesn't answer my question. My question has more to do with stuff like which block in a MT4 blog corresponds to .widget-header, which corresponds to .asset-name, etc. Right now it's very much a tedious trial-and-error. It would be nice to have an outline like what was created for livejournal, such as . It looks like this may be applicable to MT4 - but can I rely on this image as a guidance?

That image looks like it pretty closely corresponds with code blocks in the MT templates so that's definitely the right starting point. It's not exact of course since there are LJ and MT specific stuff but a good starting point nonetheless.

Thank you so much! I can keep my hair now.

This is just what I was looking for, however, I've run into one small snag. This code doesn't work with the Search Results template. Any suggestions for alternating colors within search results?

Thanks in advance!

No, I haven't found much cause to alternate styles in search results so I haven't even tried it. Sorry.

@Mashby -

I use the MTRoundRobin plugin. It's pretty simple.

First, you seed the values you want to iterate over. For instance, "odd" and "even", like so:

<$MTRoundRobin set="odd even"$>

You can do this anywhere in your template, but you'll need to do it before you use it, so you may want to do it somewhere up high, like in the header of the template, just to make sure it's done.

Next, when you want to alternate (for instance, in the comment section), you call MTRoundRobin again, like this:

<div class="comment <$MTRoundRobin$>">

It doesn't seem quite as clear, but what happens is that each call to MTRoundRobin (the second one) simply bumps it up, and then it starts over. So the first call is "odd", the second is "even", then you get "odd" again, and so on.

The nice thing about MTRoundRobin is that you could even use it to create a series of styles - "one", "two", "three" and the like. Just seed it differently in the first tag. Because it's a static plugin, you can use it on the search template or any other template (so long as it's not published dynamically).

I hope this helps!

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