codesnippets.info

When your blog has lots of comments, then it’s a great way to get visitors to interact more by styling the way your comments are displayed. If this is what you’re looking to to, then open your comments.php file and replace your comments loop with the following code:

<ol id="commentlist">
<?php foreach ($comments as $comment) : ?>
	<?php // The extra stuff to get commenter's role
	$user_id = $comment->user_id;
	$role = ( isset( $roles[$user_id] ) ? $roles[$user_id] : '' );
	?>
	<li class="<?php echo $role; ?>">
	<p>By <?php comment_author_link() ?> - <?php comment_date() ?></p>
	<?php comment_text() ?>
	</li>
<?php endforeach; ?>
</ol>

Now to structure your comment you’ll need to open your style.css file and place the following code:

#commentlist li { border:2px solid white; } /* not logged or subscriber */
#commentlist li.administrator { border:2px solid red } /* blog admin */
#commentlist li.editor { border:2px solid blue } /* editor */

You may want to check :

1. Display Recent Comments
2. Style WordPress editor using CSS
3. twitter avatars in comments
4. comments template
5. Highlight Searched Text In Search Results