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

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.

Posted on: January 24, 2006 | 1 Comment

Recent Entries in "Blogging"

1 Comment Posted (Add Yours)

Thanks Smiley! I've always wanted to know how to do this with Movable Type. This was very clearly explained; now I've just got to find time to implement it on my own blog...

Richard - glad to be of help! Yes, that time issue can be a real problem.

For example, I originally envisaged updating the badge in my masthead with a new, pithy (!) comment on a regular basis. So much for that great idea.

I just caught this tutorial via Learning Movable Type. The plugin installs easily and the stylesheet modifications aren't hard, but I ran into a bit of difficulty trying to get the Compare tags to work with TypeKey identities. Using MTCommentAuthor or MTCommentAuthorIdentity as the A value didn't seem to work, no matter what I input as the B value - the raw TypeKey profile name, the full profile URL, or the stored TypeKey author name. Am I missing something here?

AJ - I'm afraid I don't know the answer to your problem. I'm not sure why this wouldn't work with TypeKey MT tags.

You might want to try posting your question over at Learning Movable Type (where they know a lot more about MT than I do) or in the MT support forums. Good luck!

Awesome, thanks Christian. That was just what I needed to get me started. I couldnt get it to work for me though :), I think maybe because Im using dynamic publishing.? anyway I came up with a solution for those wanting to implement this with dynamic publishing enabled. the solution (for me at least) was to write a small snippet of php code to be inserted in the template.

something like the following:

<?php
$commentEmail= $this->tag('MTCommentEmail');
if ($commentEmail=="youremail@yourdomain.com")
echo "<div class=\"commentauthor\">";
else
echo "<div class=\"comment\">";
?>

i think its pretty obvious how it works. right.
i posted a small implementation bit on my blog at
http://isaachorton.liquidratio.com/

Isaac - thanks for the dynamic publishing solution. I don't use it on my blog, so haven't encountered this problem myself.

Worked like a charm! Danke!!!

Great reading, keep up the great posts.
Peace, JiggaDigga

Just wanted to say I found this very useful and most informative Thx!.

Subscribe

Subscribe to my RSS FeedSubscribe to my Web Design Blog RSS Feed

Categories

Proud member of 9rules network