Author comments - Different Styles

Bloggers generally welcome constructive comments and feedback on their posts. Among the ways to encourage comments are to remove the “nofollow” tag and to add a Recent Comments widget into the template. Comments highlight issues that readers might have faced, and the author's reply to these comments may be useful to other readers as well. If you have many comments posted in your blog, it would be nice to add different styles to the author's comments to make them stand out from the rest. Readers with questions on commonly asked issues may easily find their answers in previous posted comments. This tutorial shall explain how the author comment styles can be added to the template.

After 7 months of blogging, we have today hit the 300,000 visitors mark. It is not a big deal to many bloggers but it means a lot to us, knowing that whatever leisure time we had given up to write these articles was worth the while. Thanks to all! While we were reviewing our articles earlier, we realized that there were so many comments in several of them that we had a hard time finding our own comments. We have therefore decided to highlight our comments to make it easy for our readers to sieve through and check if their issues have been addressed. An important point to note is that some of the answers we posted may have been superseded by events and you are still free to post the questions again.

Modify Template

Since this article is about setting a style for the comments that appear after a post, we assume that you have configured your Blog to display the comments. Check Settings -> Comments and select “Show” Comments.

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Click the check-box next to “Expand Widget Templates”.

Press Ctrl+F and search for the word “comments-block”. You should come to these lines. Insert the code (shown in red):-

<br /><dl id='comments-block'> <br /><b:loop values='data:post.comments' var='comment'> <br /><dt class='comment-author' expr:id='"comment-" + data:comment.id'> <br /><a expr:name='"comment-" + data:comment.id'/> <br /><b:if cond='data:comment.authorUrl'> <br /><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <br /><b:else/> <br /><data:comment.author/> <br /></b:if> <br /><data:commentPostedByMsg/> <br /></dt> <br /> <br /><b:if cond='data:comment.author == data:post.author'> <br /><dd class='blog-author-comment'> <br /><p><data:comment.body/></p> <br /></dd> <br /><b:else/> <br /> <br /><dd class='comment-body'> <br /><b:if cond='data:comment.isDeleted'> <br /><span class='deleted-comment'><data:comment.body/></span> <br /><b:else/> <br /><p><data:comment.body/></p> <br /></b:if> <br /></dd> <br /> <br /></b:if> <br /> <br /><dd class='comment-footer'> <br /><span class='comment-timestamp'> <br /><a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <br /><data:comment.timestamp/> <br /></a> <br /><b:include data='comment' name='commentDeleteIcon'/> <br /></span> <br /></dd> <br /></b:loop> <br /></dl> <br />



Comment Styles

After you have inserted the above code, scroll upwards in the template and Ctrl+F to search for the word “comment-body”. In the Minima template, you should have this code:-

<br />#comments-block .comment-body { <br />margin:.25em 0 0; <br />} <br />#comments-block .comment-body p { <br />margin:0 0 .75em; <br />} <br />


According to our Poll, the second most commonly used template is the Rounders template. In Rounders, this is what you will find:-

<br />.comment-body { <br />margin:0 0 1.25em; <br />padding:0 0 0 20px; <br />} <br />.comment-body p { <br />margin:0 0 .5em; <br />} <br />


In other templates, you should see “comment-body” classes similar to the above. This is the current style for the display of all comments after the posts. To have a different comment style for the author, copy what you have in your template, paste and rename the class. For example, in the Minima template, we shall add the code (shown in red):-

<br />#comments-block .comment-body { <br />margin:.25em 0 0; <br />} <br />#comments-block .comment-body p { <br />margin:0 0 .75em; <br />} <br />.blog-author-comment { <br />margin:.25em 0 0; <br />} <br />.blog-author-comment p { <br />margin:0 0 .75em; <br />padding:5px 10px; <br />border:1px dotted #254117; <br />background:#C3FDB8; <br />} <br />


You can name the new class anything you want by changing the “.blog-author-comment” to something else. (Don't omit the full-stop in front.) Just remember to rename that bit of code discussed in our earlier section. In our example, we have used the same margin settings but added a padding (space around the text) of 5px at the top and bottom, and 10px on the left and right. We introduced a thin border surrounding the text and added a background color. For more color codes you can refer to our Color Code Chart. The author's comments block will look like this:-



If you are using the Rounders template, follow the same steps as above, copy the “comment-body” styles and add the new classes. For example, the code can look like this:-

<br />.comment-body { <br />margin:0 0 1.25em; <br />padding:0 0 0 20px; <br />} <br />.comment-body p { <br />margin:0 0 .5em; <br />} <br />.blog-author-comment { <br />margin:0 0 1.25em; <br />padding:0 0 0 20px; <br />} <br />.blog-author-comment p { <br />margin:0 0 .5em; <br />padding:0 0 0 20px; <br />color:#F6358A; <br />font-style: italic; <br />} <br />


Did you notice that we have not changed the margins and padding? The author's comments will be different though as there is now a text color and the font-style is in italics. This is what you will see:-



If you are using other templates, do the same by copying the current “comment-body” styles and inserting the new classes and new styles. Experiment with the different style options and colors. If you need more ideas, you can refer to the list of properties in our article Links - Hover and Rollover Effects.

You can even insert a background image to the author's comments and change the font to a larger font or a different font typeface. The code will look like this:-
<br />.blog-author-comment p { <br />margin:0 0 .75em; <br />padding:5px 10px; <br />font-size:120% <br />font-family:courier; <br />background: url("URL OF IMAGE"); <br />} <br />