« Recent Comments | Main | Redirects »

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

Comments (17)

Great article. I've seen this on a blog I read that's on WordPress and liked it. I've wondered how to do it with MT.

Question - Is there a way to link this to a Typekey identity rather than jsut the email addess? I use my Typekey login whenever I leave comments on my own blog.

BTW - your notifications aren't working. I haven't gotten a notice for the last several posts you've put up. Thought you'd like to know.

salguod - I'm afraid I don't know if you can do this with a Typekey identity as I've never tried it. Perhaps Elise will be able to advise if she reads this comment thread.

As for notifications (I assume you mean the RSS feed for this site), it's working fine for me. Perhaps you could try adding it to your lists of feeds again?

Lisa [TypeKey Profile Page]:

It works with TypeKey if you require email addresses from your TK people. :)

PS: Nice tutorial. I've wanted to do this but was a bit lazy about getting around to it, so thank you!

Wow, that's cool. I'll be getting that into my blog right away, it rules.

I just dropped this into my 'recent comments' template, which is something I've wanted for ages. I wanted to exclude my own comments from that section.

Only problem is I can't seem to get it to honor both 'MTIfNotEqual' and 'MTComments lastn="13"'; if I put the notequal inside of MTComments I get my desired number minus my own comments (so 13 minus my last two, giving me 11), or if I put the notequals outside of MTComments, it ignores the MTIfNotEqual and displays my comments anyway.

(This might be a question for Kevin).

Anyway, it's still cool. Thanks!

supa:

This is exactly what I've been looking for. I knew there was a way to style author comments differently, I just couldn't figure out what that was! Thanks for the how-to.

Thank you very much. sassen.org now styles 'author' comments differently.

This way is OK, but what to do when we have 4 comments and want to reply to (for example) second comment?! As you know, we can not change the date of a posted comment in MT.

Babak - if you want people to be able to respond to individual comments, then you need to display the permalink for each comment so that they can link to it.

Forgive me, but I'm not sure I understand your point about changing the comment date - can you elaborate further?

Thanks for your reply.
In fact I mean that our reply to a comment should disply under that comment, not after 2-3 comments! And with this way, web can not place our reply after a selected comment, because comments in MT display by date, and we can not edit the date of a comment. For example, when there are 4 comments, And I want to reply to second comment, How can I place my reply after that comment?
I have two candidate in mind:
1. Quote the selected comment in reply. (I don't know how to do it in MT!)
2.If we write a hack for MT to edit the date of a comment, The problem will solve ;)
I hope you catch to point ;)
Babak

Babak - thanks for the clarification. Sounds like you're talking about threaded comments, similar to the functionality you find in online forums. I'm afraid I don't know how to do that, but it would quite a cool feature!

As for quoting someone, all I ever do is copy the text I want and put it in <blockquote> tags in my comment - somewhat manual, but it works.

I don't think you want to start editing the date that comments were posted - I think it's important to know when something was said as well as what was said.

Hi,
Thanks for your reply,
I think that you don't get the point, because of my bad clarification.
I mean that we have to edit the date of our own comment to display after a selected comment,
I think it's very important to display a reply of a comment after that comment ;)
Babak

This is a great article providing some really eye pleasing results. It took me about 2 hours to get my templates tweaked nicely but it was well worth it. I just finished writing an entry how I styled my own comments using your guide: http://www.profitpapers.com/dev/styling-movabletype-comments.php

I really didn’t do a lot different besides add an image to the entry author’s posts. Much like I see done here. Thanks for the inspiration.

I think people who actually take the time to stylize their comments can attest to its success rate for garnering more activity. Can anyone comment on that?

Thanks again to Chris and Elise for providing the tutorial.

Santi:

hello everybody!

Anyone can tell me where i have to put the movabletype code to work the apperance of the comments? Thank you very much!! I've tried to write this post at the forum, but it seems i haven't permission, in spite i'm registered..

The first part of the article, not css part.
Thank you very much!

Santi - you need to put the code into the individual entry archive template, which is where the comments code is located.

Santi:

Thank you Christian!! But still doesn't works... I've seen that i have installed the plugin in main plugin directory of movabletype, but it dosen't appears as installed in my weblog template! I don't undersatnd, it'll makes me crazy!!!!

Luke:

I'm using the Compare plugin with the MTAuthors plugin, with MT 3.2

When I rebuild the page, the MTIfEqual/MTIfNotEqual part removes the div tag entirely, rather than using one or the other.

Meaning that as one of the divs is missing, each additional comment closes an extra div, eventually ruining the look of my whole page.

What am I doing wrong?

Kevin Story [TypeKey Profile Page]:

This is a very nice tutorial but doesn't reallly help people with dynamic templates. I have written a very sloppy script that will do the same thing as your tutorial but will work with dynamic templates:

{{capture assign="MTCommentEmail"}} <$MTCommentEmail$>{{/capture}}

{{if $MTCommentEmail == "username@domain.com"}}
<div class="comment1" id="comment-<$MTCommentID$>">
{{/if}}

{{if $MTCommentEmail != "username@domain.com"}}
<div class="comment" id="comment-<$MTCommentID$>">
{{/if}}

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)