Weekend Project: Styling Author Comments in Advanced Templates

All comments on your blog look the same by default but, as the author of the blog, you want your comments to stand out. This Weekend Project post will show you how to add formatting to your own comments. The use of an Advanced Template Set for your blog's design is required for this tip.

First, go to Design > Templates and click to edit the Individual Archives Template. Look for the section below in the template:

<MTComments><!-- comment listing -->
<a id="c<$MTCommentID$>"></a>
<div class="comment" id="comment-<$MTCommentID$>">

Add <$MTCommentAuthor dirify="1"$> to the third line of code just after <div class="comment

<MTComments><!-- comment listing -->
<a id="c<$MTCommentID$>"></a>
<div class="comment <$MTCommentAuthor dirify="1"$>" id="comment-<$MTCommentID$>">

The MTCommentAuthor tag calls the Display Name of the commenter. If the commenter is signed in to comment, the Display Name is set at Account > Summary in the author's TypePad account. If the commenter is not signed in to comment, the content of the Name field in the comment form is used.

The dirify attribute converts the Display Name to all lower-case, strips non-alphanumeric characters, and converts spaces to underscores.

In the example, the author name is Rex Manning, and the dirify tag will convert the name to rex_manning making it easy for us to use CSS to apply formatting to comments submitted by Rex.

If you viewed the source code for a post you've left a comment on, you'd see the result of the above code would be:

<MTComments><!-- comment listing -->
<a id="c####"></a>
<div class="comment rex_manning" id="comment-####">

At Design > Templates, click on the Stylesheet Template to add the CSS to style comments submitted by the post author.

The class for the author comments is going to be the author's Display Name converted to all lower-case, no alphanumeric characters, and underscores used instead of spaces. If your display name is Sarah, the class used is .sarah. If your display name is Sam Callahan, the class used is .sam_callahan.

To indent the comments submitted by the author, you would use the CSS:

.rex_manning {
  margin-left: 20px;
  margin-right: 20px;
}

To also add a background color and border to the comment:

.rex_manning {
  background-color: #DDEBEB;
  border: #000000 1px solid;
  margin-left: 20px;
  margin-right: 20px;
  padding: 8px;
}

You can add an image to the comment. First, upload the image to your TypePad account at Library > File Manager. Copy the URL for the uploaded image to include in the CSS. The example CSS below places a small pencil icon to the left of the author's name.

.rex_manning .comment-footer {
  background: url(http://example.typepad.com/pencil.png) no-repeat;
  padding-left: 18px;
  border-top: #000000 1px solid;
}

Combining all the above styles together results in:

Comments

[Kofla Olivieri]

For those of us that don't have an advanced template set, how about including an image of the "finished product" to see what it looks like?.

[Lilolu]

I agree.

[Dave]

.comment-by-owner{
padding: 10px;
border: 1px solid #DDDDDD;
background: #E9E9E9;
}

Can't you just put that in the Custom CSS area of your blog...? I'd appreciate if someone who actually has comments would test it, but it works for me. Only effects comments by the owner, note, but if the owner of the blog is the only author (which is the case with me) then that's fine. I don't have any comments, though, besides my own, so i can't see if it works. If it does, then that is a far easier alternative for bloggers where there is only one author: the creator.

EDIT: I tested it, it works. No need for an advanced template. There will be a need for an advanced template and this post if you are not the sole author of your blog, though. Hope this helps someone. You can see the effect on this blog post:

http://www.ihavefury.com/2011/08/testing.html

[Dave]

Those who use advanced templates and multiple authors will require the method found above, but for all the others using one author can skip everything, and just replace
.rex_manning (the author's name)

with

.comment-by-owner

I took a screen shot of what my comments on my blog look like, which can be found below.

http://ihavefury.typepad.com/Screen%20Shot%202011-09-26%20at%203.26.08%20PM.png

The CSS for this was:

.comment-by-owner{
margin-left: 20px;
margin-right: 20px;
padding: 10px;
border: 1px solid #CDFFFE;
background: #DBFDFC;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}

Note that the

-moz-border-radius: 12px;
-webkit-border-radius: 12px;

is used to control the radius of the rounded corners, for those who didn't know.

[Bri]

Hi there,

This Friday we'll be focusing on styling author comments with the .comment-by-owner CSS class for those who do not use Advanced Templates. For anyone using Advanced Templates, however, they will not see reference to .comment-by-owner since the templates do not include the code to if/then test whether a comment is by an author or not. Because of that, we suggested the method described in this post.

[Dave]

Thank you for the quick response.