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:
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.
<div class="comment"<MTIfArchiveTypeEnabled archive_type="Individual"> id="comment-<$MTCommentID$>"</MTIfArchiveTypeEnabled>>
<$MTCommentAuthorLink default_name="Anonymous" show_email="0"$> <MTIfNonEmpty tag="CommentAuthorIdentity"><$MTCommentAuthorIdentity$></MTIfNonEmpty>
<a href="#comment-<$MTCommentID$>" title="Permalink to this comment"><$MTCommentDate format="%x %X"$></a>
</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:
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.