Styling User Comments

For the longest time my personal site has been using the default comment template. Today it finally annoyed me enough that I got around to theming it. The revised comments have the date and name floated to the left. I've replaced the "Submitted by" bit with a customized output using the variables $date and$author. The author name has the "not verified" bit stripped out.

The final version looks like this:

To style your comments you will need to complete the following steps:

1. Create a new file named comment.tpl.php in your theme's directory. Mine is based on the default file provided by Drupal core which you can view online.
2. From the template file remove the title, picture, "new" tag and signature areas.
3. Remove the variable $submitted and replace it with its component parts: $date and $author. A full list of variables for the comment template is available from the API documentation.
4. Adjust the output of the variable $author to remove the "not verified" bit. This is done with the PHP variable str_replace:
   <?php $name = str_replace("(not verified)", "", $author); ?>
<?php print $name; ?>
   The snippet looks for the words "(not verified)" and replaces them with "nothing" (technically it's an "empty string").
5. Update your style sheet to float the "submitted by" info to the left. Make any additional colour adjustments you'd like to make at this time as well. See the style sheet below for all of the changes I made.
6. Clear your cache by going to Administer, Performance and clicking the clear cache button.

That should be it! Full reference files are included below for your copy-paste convenience.

file: comment.tpl.php

<div class="comment <?php print $comment_classes;?> clear-block">
<div class="submitted">
<p class='date'><?php print $date; ?></p>
<?php $name = str_replace("(not verified)", "", $author); ?>
<p class='name'><?php print $name; ?></p>
</div>
<div class="content">
<?php print $content ?>
<?php if ($links): ?>
<div class="links">
<?php print $links ?>
</div>
<?php endif; ?>
</div>
</div>


In the CSS file I added the following:

.comment .submitted {
float: left;
width: 150px;
background: #ddd;
padding: 5px;
}
.comment {
clear: all;
border-top: 1px solid black;
}
.comment .content {
float: left;
width: 550px;
margin-left: 10px;
padding-top: 5px;
}
.comment p.date {
margin-bottom: 5px;
}
.comment .links ul, #main-content .comment .links li.first {
margin: 0;
padding: 0;
}