Learning Movable Type: How to Style 'Author' Comments Differently on Your MT Blog


mtbadge-small.gifBy LMT contributor Christian Watson of Smiley Cat. Tutorial cross-posted here.

Recently I posted 10 tips to improve the design of your blog's comment section. One of those tips was to make your 'author' comments look different so that your readers could easily see your contribution to the discussion. Here's how to do just that using Movable Type and a dash of CSS.

The key to making the functionality work is staggernation's excellent Compare plugin. This adds some much needed conditional tags that basically enable you to compare one thing to another and do something based on the results.

Movable Type Code

Here is some sample code to list comments, highlighting the blog author's Posted By line in a different background color:

<MTComments>
<MTCommentsHeader>
<h2>Comments</h2>
</MTCommentsHeader>

<MTIfEqual a="[MTCommentEmail]" b="xxx@yyy.com">
<div class="mycomment" id="comment-<$MTCommentID$>">
</MTIfEqual>
<MTIfNotEqual a="[MTCommentEmail]" b="xxx@yyy.com">
<div class="comment" id="comment-<$MTCommentID$>">
</MTIfNotEqual>

<div class="comment-content">
<$MTCommentBody$>
</div>

<p class="comment-footer">
Posted by
<$MTCommentAuthorLink default_name="Anonymous"$>
<$MTCommentAuthorIdentity$> on
<$MTCommentDate format="%x"$>
</p>

</div>
</MTComments>

How It Works

The code that makes the comments look different is near the beginning - the <MTIfEqual> and <MTIfNotEqual> statements (made available via the Compare plugin).

What they are doing is looking to see whether the email of the commenter is equal to "xxx@yyy.com". If the email is equal to it, then <MTIfEqual> makes the class of the container div for the comment equal to "mycomment". This will be the style for your author comments.

If the email of the commenter is not equal to "xxx@yyy.com" (<MTIfNotEqual>) then the class of the comment container div will be set to "comment", which is used for all other comments.

By making "xxx@yyy.com" an email address that only you could guess, you are effectively making this field a password which Movable Type uses to tell whether it's you making the comment or a regular reader.

CSS

Then, all you have to do is to style the two classes for the comment container div. Here's how I do it:

.comment {
border: 1px solid #d5d5d5;
margin-bottom: 10px;
}

.mycomment {
border: 1px solid #8EB3CF;
margin-bottom: 10px;
}

.comment-content {
margin: 5px;
}

.comment .comment-footer, .mycomment .comment-footer {
font-size: 0.85em;
padding: 5px;
margin: 0;
}

.comment .comment-footer {
background: #e5e5e5;
}

.mycomment .comment-footer {
background: #DFF1FF;
}

Adding an 'Author Comment' Image

In order to display the "Author Comment" image along my with comment info, all I do is apply a background image to what I'm calling the 'comment footer' and align it to the right:

.mycomment .comment-footer {
background: #DFF1FF url(/images/author.gif)
center right no-repeat;
}

If Your Blog Has Multiple Authors

If your blog has multiple authors, you can have each blog entry's author's comments be styled differently by using the <MTAuthorEmail> tag in place of writing out the author's email in the code in the first part of this tutorial. For the <MTAuthorEmail> tag to work, you need to download and install Brad Choate's MTAuthors plugin. Works with MT3.2.


And there you have it. Of course, you could extend this technique to check for, say, regular commenters, who might have their comments styled differently in some way (perhaps by adding a "Loyal Reader" graphic).


Posted by Christian Watson on February 4, 2006 7:53 PM to Learning Movable Type http://www.learningmovabletype.com/