It goes without saying that the IconDock comments combine many of the common Web 2.0 trends into one sleek design; rounded corners, shadows, gradients, speech bubbles and gravatars. What more could you ask for?

The first step in creating sleek comments would be to author their container. This code is fixed-width but allows the height to be expanded as required.

<div class="comments-container">
	<div class="top"></div>
	<div class="bottom"></div>
</div>

The top and bottom div‘s will be used for the rounded corners, meaning our comments will appear in between.

The following CSS code applies the appropriate background images, and centres the container to its parent (in the case of our demo – the body.

.comments-container {
	background: url('comments-container-bg.gif') repeat-y;
	margin: 20px auto;
	width: 520px;
}

.comments-container .top {
	background: url('comments-container-top.gif') no-repeat;
	height: 6px;
	overflow: hidden;
}

.comments-container .bottom {
	background: url('comments-container-bottom.gif') no-repeat;
	clear: both;
	height: 4px;
	margin: -4px 0 0 0;
	overflow: hidden;
}

Now that we have the container sorted, we can move onto code the exciting part – the actual comments. For now we will just be looking at just using static HTML for our comments and worry about the CMS implementation later on.

<div class="comment">
	<div class="gravatar">
		<img src="gravatar.gif" alt="Author" />
	</div>
	<div class="inner-content">
		<div class="author">
			<a href="http://www.google.com/">Author Name</a>
		</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
			do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
			enim ad minim veniam, quis nostrud exercitation ullamco.</p>
		</div>
		<div class="date">
			July 22nd, 2009 at 10:52pm
		</div>
	</div>
	<div class="clear"></div>
</div>

As you can see, the comment includes all of the relevant content. Author name, gravatar, message and date.

.comments-container .comment {
	padding: 2px 9px 9px 7px;
}

.comments-container .comment a {
	color: #686868;
	text-decoration: none;
}

.comments-container .comment a:hover {
	color: #686868;
	text-decoration: underline;
}

.comments-container .comment .gravatar {
	background: url('comment-gravatar-bg.gif') no-repeat;
	float: left;
	height: 53px;
	margin: 0 8px 0 0;
	padding: 11px 0 0 13px;
	width: 59px;
}

.comments-container .comment .inner-content {
	background: url('comment-content-bg.gif') repeat-y;
	float: left;
	width: 424px;
}

.comments-container .comment .author {
	background: url('comment-author-bg.gif') no-repeat;
	color: #686868;
	font: bold 14px/14px "Lucida Grande", Arial, Sans-serif;
	height: 13px;
	padding: 15px 0 0 19px;
	width: 405px;
}

.comments-container .comment .content {
	background: url('comment-content-bg.gif') repeat-y;
	color: #686868;
	font: 12px/18px "Lucida Grande", Arial, Sans-serif;
	overflow: hidden;
	padding: 0 19px 0 19px;
	width: 386px;
}

.comments-container .comment .content p {
	margin: 0;
	padding: 10px 0 5px 0;
}

.comments-container .comment .date {
	background: #efefef url('comment-date-bg.gif') no-repeat left top;
	color: #686868;
	font: bold 12px/12px "Lucida Grande", Arial, Sans-serif;
	height: 14px;
	padding: 14px 2px 0 2px;
	text-align: right;
	width: 420px;
}

.comments-container .comment .clear {
	clear: both;
	height: 1px;
	overflow: hidden;
}

Most of the CSS is fairly self-explanatory. We use the author and date div‘s to apply the rounded corners of the comment content. Removing the need for any extra code.

If you are using the images from the demo, your comments should look like the following:

Alternating comments

If you are like me, you are always looking at how you can improve your work. A way to improve these comments would be to add some alternating style to the comments, something which IconDock does not do.

To add our alternating style, we need to add an “alt” class to the comment. We can then use CSS to change some of the elements to suit:

<div class="comment alt">

.comments-container .comment.alt .gravatar {
	background: url('comment-gravatar-alt-bg.gif') no-repeat;
	float: right;
	margin: 0 0 0 8px;
	padding: 11px 0 0 19px;
	width: 53px;
}

.comments-container .comment.alt .inner-content {
	float: right;
}

.comments-container .comment.alt .date {
	text-align: left;
}

The above code applies a different background to our gravatar, and swaps the items around so the content now appears on the left.

WordPress Implimentation

Now that we have the CSS and static HTML in place, it is time to impliment our code into a WordPress theme. First off, we need to replace our content with the comment data.

<?php foreach ($comments as $comment) { ?>
	<?php $i++; ?>
	<div class="comment" id="comment-<?php comment_ID() ?>">
		<div class="gravatar">
			<?php echo get_avatar($comment,$size = '40'); ?>
		</div>
		<div class="inner-content">
			<div class="author">
				<?php comment_author_link() ?>
			</div>
			<div class="content">
				<?php comment_text() ?>
			</div>
			<div class="date">
				<?php comment_date() ?> at <?php comment_time() ?>
			</div>
		</div>
		<div class="clear"></div>
	</div>
<?php } ?>

Now we have WordPress using our CSS and HTML for the comments, all that is left to do is add the alternating style. Just replace class="comment" with:

<?php if($i&1) { echo 'class="comment"';} else {echo 'class="comment alt"';} ?>

And that’s it! We know have a sleek comment’s list inspired by IconDock’s web 2.0 design. All static code can be found in the source files along with a sample comments.php for your WordPress theme.

Tutorial based off of original design and coding by Nick La.