A author’s comment if has different background color, or different text style or even border, helps readers to easily locate what Author has to say if a question is asked in comments or even what he thinks of the comments coming.

author-comment-highlight

This simple tutorial will help you achieve same and that too without any plugin used.


For WordPress Users:

Note: Do take backup of your theme before you try this.

01. Go to Appearance => Editor.
editor

02. Then choose style.css file from right hand side and add below code:
style.css

.authorstyle { background-color: #ebf4fb!important; }


03. Then choose comments.php file from right hand side and find below code:
comments.php

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"></li>

And replace with

<li class="<?php if ($comment->user_id == 1) $oddcomment = "authorstyle"; echo $oddcomment; ?>"></li>


04. Save the files and you are done.

Note: You must replace 1 with the user ID of the author.


For Blogger Users:

Note: Do take backup of your template before you try this. Only try this if you are familiar with blogger codes.

01. Go to Layout => Edit HTML, click on Expand Widget Templates and find below code and add the codes which are in red in exact positions:

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’"comment-" + data:comment.id’>
<a expr:name=’"comment-" + data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said…
</dt>

<b:if cond=’data:comment.author == data:post.author’>
<dd class=’comment-body-author’>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class=’comment-body’>
<b:if cond=’data:comment.isDeleted’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href=’"#comment-" + data:
comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>

Note: The text in Red color, should be placed at right position as shown above.


02. Now put below code before ]]></b:skin> in your template:
blogger-skin

.comment-body-author {
background: #ebf4fb; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Position*/
}

03. Save Template. You are done.


If you are finding blogger code implementation hard, then try our Blogger to WordPress Service

Cheapest and Best Blogger to WordPress Service

References:

How to highlight author comments in WordPress
How to Highlight Author Comments

That concludes this simple and useful tutorial. Hope you like it.