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:
