February 04, 2006
How to Style 'Author' Comments Differently on Your MT Blog
By LMT guest author 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:
How It Works
The code that makes the comments look different is near the beginning - the
<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 "[email protected]". 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 "[email protected]" (
<MTIfNotEqual>) then the class of the comment container div will be set to "comment", which is used for all other comments.
By making "[email protected]" 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.
Then, all you have to do is to style the two classes for the comment container div. Here's how I do it:
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:
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).
Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!
If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/449