Timmargh.me

Highlight your own comments in Movable Type  8

I’ve seen this on a few sites in the past: in the list of comments, the site author’s own comments are formatted differently, usually by a different background colour to everyone else.

I was trying to figure out myself how this could be done without giving up and just reading the HTML/CSS on another site, when it struck me how simple it can be.

Taking this site as an example: each comment is wrapped in a div with the imaginatively named class of “comment”, like so:

<div class="comment">
 <p><$MTCommentAuthorLink show_email="0" default_name="Anonymous" no_redirect="1"$> said:</p>
 <$MTCommentBody$>
</div>

Along with some styling in the CSS file:

div.comment { background-color: #eee; }

We need to distinguish between the author’s comments and everyone else’s, so we just add the commenter’s name as a second class to the div, like so:

<div class="comment name<$MTCommentAuthor dirify="1"$>">

I’ve added the dirify="1" attribute to remove any illegal characters and to convert it to lowercase. I’ve also added “name” at the beginning incase the commenter’s name starts with a number, which would give an invalid class name.

Then we need to add the site author’s alternate styling to the CSS file:

div.nametimmargh { background-color: #cce !important; }

I’ve added the !important just to make sure this background colour is used instead of the one defined for class="comment" - I’m not sure if it’s absolutely necessary, but it can’t hurt. Obviously you need to substitute “timmargh” with your own name that you enter in your comment form and this needs to be your name after it has been altered by the dirify="1" attribute - alter your HTML first and do a rebuild to see how it gets changed.

So, the finished HTML looks like:

<div class="comment name<$MTCommentAuthor dirify="1"$>">
 <p><$MTCommentAuthorLink show_email="0" default_name="Anonymous" no_redirect="1"$> said:</p>
 <$MTCommentBody$>
</div>

And the styling in the CSS file:

div.comment { background-color: #eee; }
div.nametimmargh { background-color: #cce !important; }

There are probably other ways of doing this with less drawbacks - using this, method anyone who enters the same name as you do in the comment form will receive the same format as your on their comment - but I’m happy to use this method myself. You can see an example of all this in action simply by viewing a post on this site that I’ve commented on … provided I haven’t redesigned since writing this!

You could also add more styling to the CSS file to alter the format of comments made by regular visitors to your site.

Comments