How to Style ‘Author’ Comments Differently on Your Blog

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.

Well, yesterday ‘Tracy’ wrote in to ask me how I do it on my site. So here’s how 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’s the code I use to list comments:

<MTComments>
<MTCommentsHeader><h2>Comments></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"><a href="#comment-<$MTCommentID$>" title="Permanent link to this comment"><$MTCommentOrderNumber$>. 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 – <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;
}

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;
}

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

Who knows, perhaps this would be a good way to encourage people to regularly comment on your site.