<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
   <title>Posts by Christian Watson on Learning Movable Type</title>
   <link rel="alternate" type="text/html" href="http://www.learningmovabletype.com/" />
   <link rel="self" type="application/atom+xml" href="http://www.learningmovabletype.com/contributors/christian/" />
   <id>tag:,2008-02-25:/5</id>
   <updated>2007-06-22T04:36:23Z</updated>
   <subtitle>Tutorials and helpful tips for the Movable Type web publishing system</subtitle>
   <generator uri="http://www.movabletype.org/">Movable Type Publishing Platform 4.01</generator>

<entry>
   <title>How to Style &apos;Author&apos; Comments Differently on Your MT Blog</title>
   <link rel="alternate" type="text/html" href="http://www.learningmovabletype.com/a/001532styling_author_comments/" />
   <id>tag:www.learningmovabletype.com,2006://10.1532</id>
   
   <published>2006-02-05T03:53:14Z</published>
   <updated>2007-06-22T04:36:23Z</updated>
   
   <summary>By LMT contributor Christian Watson of Smiley Cat. Tutorial cross-posted here. Recently I posted 10 tips to improve the design of your blog&apos;s comment section. One of those tips was to make your &apos;author&apos; comments look different so that your readers could easily see your contribution to the discussion. Here&apos;s...</summary>
   <author>
      <name>Christian Watson</name>
      <uri>http://www.smileycat.com</uri>
   </author>
   
      <category term="Comments and Trackbacks" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="authorcomments" label="Author Comments" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="comments" label="Comments" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="mtauthors" label="MTAuthors" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="en" xml:base="http://www.learningmovabletype.com/">
      <![CDATA[<p><img alt="mtbadge-small.gif" src="http://www.learningmovabletype.com/images/mtbadge-small.gif" width="50" height="50" class="floatimgleft" /><em>By LMT contributor Christian Watson of <a href="http://www.smileycat.com">Smiley Cat</a>.  Tutorial cross-posted <a href="http://www.smileycat.com/miaow/archives/000215.html">here</a>.</em></p>

<p>Recently I posted <a href="http://www.smileycat.com/miaow/archives/000212.html">10 tips to improve the design of your blog's comment section</a>. 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.</p>

<p>The key to making the functionality work is staggernation's excellent <a href="http://www.staggernation.com/mtplugins/Compare.php">Compare plugin</a>. This adds some much needed conditional tags that basically enable you to compare one thing to another and do something based on the results.</p>]]>
      <![CDATA[<h2>Movable Type Code</h2>

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

<div class="message">

<p>&lt;MTComments&gt;<br />
&lt;MTCommentsHeader&gt;<br />
&lt;h2&gt;Comments&lt;&#47;h2&gt;<br />
&lt;&#47;MTCommentsHeader&gt;</p>

<p>&lt;MTIfEqual a=&quot;[MTCommentEmail]&quot; b=&quot;xxx&#64;yyy.com&quot;&gt;<br />
&lt;div class=&quot;mycomment&quot; id=&quot;comment-&lt;$MTCommentID$&gt;&quot;&gt;<br />
&lt;&#47;MTIfEqual&gt;<br />
&lt;MTIfNotEqual a=&quot;[MTCommentEmail]&quot; b=&quot;xxx&#64;yyy.com&quot;&gt;<br />
&lt;div class=&quot;comment&quot; id=&quot;comment-&lt;$MTCommentID$&gt;&quot;&gt;<br />
&lt;&#47;MTIfNotEqual&gt;</p>

<p>&lt;div class=&quot;comment-content&quot;&gt;<br />
&lt;$MTCommentBody$&gt;<br />
&lt;&#47;div&gt;</p>

<p>&lt;p class=&quot;comment-footer&quot;&gt;<br />
Posted by <br />
&lt;$MTCommentAuthorLink default_name=&quot;Anonymous&quot;$&gt; <br />
&lt;$MTCommentAuthorIdentity$&gt; on <br />
&lt;$MTCommentDate format=&quot;&#37;x&quot;$&gt;<br />
&lt;&#47;p&gt;</p>

<p>&lt;&#47;div&gt;<br />
&lt;&#47;MTComments&gt;<br />
</div></p>

<h2>How It Works</h2>

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

<p>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 <code>&lt;MTIfEqual&gt;</code> makes the class of the container div for the comment equal to "mycomment". This will be the style for your author comments.</p>

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

<p>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.</p>

<h2>CSS</h2>

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

<div class="message">

<p>.comment {<br />
border: 1px solid #d5d5d5;<br />
margin-bottom: 10px;<br />
}</p>

<p>.mycomment {<br />
border: 1px solid #8EB3CF;<br />
margin-bottom: 10px;<br />
}</p>

<p>.comment-content {<br />
margin: 5px;<br />
}</p>

<p>.comment .comment-footer, .mycomment .comment-footer {<br />
font-size: 0.85em;<br />
padding: 5px;<br />
margin: 0;<br />
}</p>

<p>.comment .comment-footer {<br />
background: #e5e5e5;<br />
}</p>

<p>.mycomment .comment-footer {<br />
background: #DFF1FF;<br />
}<br />
</div></p>

<h2>Adding an 'Author Comment' Image</h2>

<p>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:</p>

<div class="message">

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

<h2>If Your Blog Has Multiple Authors</h2>

<p>If your blog has multiple authors, you can have each blog entry's author's comments be styled differently by using the <code>&lt;MTAuthorEmail&gt;</code> tag in place of writing out the author's email in the code in the first part of this tutorial.  For the <code>&lt;MTAuthorEmail&gt;</code> tag to work, you need to download and install Brad Choate's <a href="http://www.bradchoate.com/weblog/2002/08/01/mtauthors">MTAuthors</a> plugin.  Works with MT3.2.  </p>

<p><br />
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).</p>]]>
   </content>
</entry>

</feed>

