Styling Your Wordpress Comments

A fun part of customizing Wordpress themes is designing a comments format which complements the rest of the site. Here are three examples from recent projects, including code samples and downloads to the original .PSDs:

Green Gravatars

This comment style was part of a very green-and-beige environmental blog which since received a makeover. It requires the gravatar plugin and three different images: the scanlines, the clock and the gradient, which can be exported from your .PSD.

First, we’ll need to first edit the ordered-list section of the “comments.php” template:

<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<cite>
<img src="<?php gravatar("R", 32); ?>" alt="" />
<span class="author"><?php comment_author_link() ?></span><br /><span class="time"><?php comment_time() ?></span> on <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?></a> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?>
</cite>
<div class="commenttext"><?php comment_text() ?></div>
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>

Aside from a few images, the rest of the styling is accomplished with CSS:

ol.commentlist {
	margin:0;
	padding:0;
	}

.commentlist li {
	list-style:none;
	margin-bottom:14px;
	}

.commentlist cite {
	padding: 7px;
	display:block;
	font-style:normal;
	background:url(http://www.yoursite.com/images/bg_comments2_cite.gif);
	border-top:1px solid #d6e4c1;
	border-bottom:1px solid #779d42;
	color:#596e3b;
	}	

.commentlist a:link, .commentlist a:visited {
	color:#596e3b;
	}

.commentlist a:hover, .commentlist a:active {
	color:#8ec343;
	}

.commentlist cite img {
	padding:1px;
	border:1px solid #aab59a;
	float:left;
	margin-right:9px;
	}

.commentlist .author {
	font: small-caps bold 1.2em Georgia, "Times New Roman", Times, serif;
	text-decoration:underline;
	}

.commentlist .time {
	background: url(http://www.yoursite.com/images/bg_clock.gif) no-repeat 1px;
	padding-left:13px;
	}

.commenttext {
	background: #9bc561 url(http://www.yoursite.com/images/bg_comments2_text.jpg) repeat-x bottom;
	border-top:1px solid #c5f386;
	padding: 0 20px 10px 20px;
	color:#fafcf6;
	}

Keep in mind, each of these examples uses ems for font sizing, so your existing CSS may need to be tinkered with to match the screenshot above.

Download

The Speech Bubble

I designed this comment style for my company’s website. It requires two images, the quote marks and the little curl. The relevant template code looks like this:

<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<div class="quote"><?php comment_text() ?></div>
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<cite><?php comment_author_link() ?> on <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></a></cite>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>

And here is the CSS:

.commentlist .quote {
	background:url(http://www.yoursite.com/images/bg_quote.gif) no-repeat top right;
	}

.commentlist li {
 	padding: 5px 18px 22px 18px;
	margin-top:15px;
	background:#454545 url(http://www.yoursite.com/images/bg_commentlist.gif) bottom no-repeat;
	color:#e4edee;
	}

.commentlist cite {
	display:block;
	font-style:normal
	}

.commentlist cite a:link, .commentlist cite a:visited {
	color:#88e5f0;
	text-decoration:none;
	}

.commentlist cite a:hover, .commentlist cite a:active {
	color:#FFF;
	text-decoration:underline;
	}

Download

Alternating Arrows

This comment styling originated from a music magazine I mocked up but never quite launched (so feel free to use it). I don’t always make use of the “.alt” class for comments, but it’s handy here for making the arrow and colors alternate. The images used are two different “paint” effects, the diagonal pattern, the chainlink and two kinds of arrows.

Here is the template code:

<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<div class="commenttext">
<cite><?php comment_author_link() ?></cite>
<?php comment_text() ?>
<span class="date"><img src="/images/commentlink.gif" alt="" /> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_time() ?> on <?php comment_date('n/j/y') ?></a></span> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';?>
<?php endforeach; /* end for each comment */ ?>
</ol>

And here is the CSS:

ol.commentlist {
	margin:0;
	padding:0;
	}

.commentlist li {
	margin-bottom:8px;
	background: #60360b url(http://www.yoursite.com/images/comment_arrows.gif) bottom no-repeat;
	color:#FFF;
	list-style:none;
	width:413px;
	}

.commentlist .commenttext {
	background:url(http://www.yoursite.com/images/bg_paint.gif) no-repeat;
	padding:22px 22px 50px 22px;
	}

.commentlist cite {
	display:block;
	color:#FFF;
	font-weight:bold;
	text-transform:uppercase;
	font-style:normal;
	background:url(http://www.yoursite.com/images/bg_cite_arrows.gif) bottom repeat-x;
	padding-bottom:12px;
	font-size:1.1em;
	}

.commentlist a:link, .commentlist a:visited {
	color:#fff9b9;
	}

.commentlist a:hover, .commentlist a:active {
	color:#FFF;
	}

.commentlist .date {
	background:#930e27;
	padding:3px;
	}

li.alt {
	background:#836241 url(http://www.yoursite.com/images/comment_arrows_alt.gif) no-repeat bottom;
	}

li.alt .commenttext {
	background:url(http://www.yoursite.com/images/bg_paint_alt.gif) no-repeat;
	}	

li.alt .date {
	background:#67421c;
	padding:3px;
	}

Download

Follow me on Twitter

199 Responses {+}

Feb 5
8:13 pm

sarki sozleri
very nice, thank you

{Reply}
Feb 7
9:30 am

Rob C
This will help a treat ! THanks for sharing… Rob

{Reply}
Feb 10
10:30 pm

Supermance
thx for this, im gonna test it on my blog, :) !

{Reply}
Feb 14
12:54 pm

Ask Band
Awesome tutor and examples. I choosed green style and implemeted it on my blogs. Thank you for your effort. Keep up writting other tips.

{Reply}
Feb 14
3:14 pm

filmizle
Thank you i just downloaded it and i liked styling comments would be very useful at my blog.

{Reply}
Feb 17
8:27 am

heratik
awesome post! i have styled my comments using your tutorial! :-)

{Reply}
Feb 19
10:27 am

Clement
Sweet!!

{Reply}
Feb 20
1:19 am

onlinereplicacatalogss
[url=http://online-seek.net/make-watches/rado-watches-home.html]replica watches corum bridge of gold[/url]
[url=http://online-seek.net/top-replica-warches/watchid674.html]baby g shock watches[/url]

{Reply}
Feb 22
10:59 pm

RickM
Helpful. Thanks. I’m also looking for how to add the formatting buttons for comments you use here yourself for those posting comments. ie. bold, italics, link, indent etc.

{Reply}
Mar 5
9:29 pm

kaan
thanks u very good..

{Reply}
Mar 30
1:53 am

Mark
Beautiful styling! I’m determined to make this work, though I must admit I’ve spent quite a while trying to identify the errors. I keep getting Parse Error codes and the only changes I made was add this code. *sigh*

{Reply}
Mar 30
1:54 am

Mark
very helpful reading, thanks

{Reply}
Apr 2
7:08 am

AIR
Thank you for the info, I’m planning to improve my blog.

{Reply}
Apr 3
8:33 am

Morten
Thanks for this, we spend several hours today fixing the look of our comments, untill we stumble on your page without any luck!

If you should have new designs later on, please inform us about that

Regards

Morten

{Reply}
May 1
5:54 pm

çizgifilm
Hi, I have a typepad account and I was wondering if anyone new of a tutorial that went step by step to show how to style the comment section. The above is great but I’m a complete novice and need a bit more explaining. Thanks so much !

{Reply}
May 8
2:40 am

Bali Web Design
Thanks for sharing….great

{Reply}
May 8
11:24 am

Jason
Cool!

Do you happen to have anything for styling an “About This Author” section, that could be added to the end of a post?

Just wondering…

{Reply}
May 12
1:36 am

Sajid
I think I got some result. Thank you here. Great job on the theme.
Thanks for sharing.

{Reply}
May 15
7:18 am

steve b
hi i want to have my comments across 4 columns do you have any examples of how to do this? Thanks

{Reply}
May 20
1:59 pm

Yiğit Özdamar
Cool! I like the second one. Thanx buddy!

{Reply}
Jun 3
8:28 pm

Charles
Nice tutorial. I’m using Cutline’s 1.4-3ColumnSplit theme and trying to implement the Alternating Arrows comment style but I’m not sure where to add the template code within my comments.php. Any assistance will be appreciated.

Thanks

{Reply}
Jun 4
12:00 am

Nintendo ds
Thanks so much for taking the time to write this post. I was able to implement it with no problems whatsoever. Big up!

{Reply}
Jun 9
5:08 am

Çizgi Film İzle
Thanks for your great help!

{Reply}
Jun 15
4:12 pm

rap dinle
Thanks ! It will help a lot

{Reply}
Jun 18
9:02 am

tatil
hi very good thank you

{Reply}
Jun 19
6:56 am

tatil
thank you very good…

{Reply}
Jun 22
11:42 am

Julian
Very useful info. Thanks for sharing.

{Reply}
Jul 12
11:37 am

Jason Pelker, Item-9 Consulting
Is the function “emptyempty” (Line 15) supposed to just be “empty”? That change worked for me.

{Reply}
- Jul 12
  11:50 am
  
  Darren
  Good question, that code is about 2 years out of date. There has since been a comment_class function that generates classes to allow alternate li styles.
  
  {Reply}
Jul 18
9:39 pm

Some0ne
Small edit required in first comment box css:
background: #9bc561 url(http://www.yoursite.com/images/bg_comments2_text.jpg) repeat-x bottombottom;

Should be:

background: #9bc561 url(http://www.yoursite.com/images/bg_comments2_text.jpg) repeat-x bottom bottom;

missing space between “bottombottom”

:D

{Reply}
Jul 29
3:16 pm

Justin
Nice layouts…

{Reply}
Jul 29
5:13 pm

Burnedbrass
Thanks a lot for the information. I implemented Alternating Arrows within about 2mins. How can I change the font size or type.

Thanks again

{Reply}
Aug 13
5:11 pm

Anthony
Really nice styles! I like it

{Reply}
Sep 14
2:12 pm

Ron Evans
Hi There, Thanks for your posts about styling comments. Here is a puzzler that i’ve been going nuts trying to figure out:

What if you’d like to have the COMMENT META DATA displayed INLINE with the COMMENT like this:

[COMMENTOR NAME HERE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non elit dolor, non sodales justo. Donec dictum, diam a aliquet suscipit, lectus mi ultricies nunc, sit amet imperdiet urna dui eu velit. Mauris molestie, libero id eleifend pretium, tellus arcu facilisis eros, sagittis ornare enim est eu mauris. In hac habitasse platea dictumst. Vivamus vehicula DATE | TIME| TRACKBACK LINKS, etc.]

In my text its not so easy to illustrate but I’d like to have the commentor’s name inline with the actual comment. Then maybe the date/time inline on the end of the comment. I’d use CSS to set them off.

Any ideas? I’d greatly apppreciate it. Thanks.

{Reply}
Sep 15
5:53 am

دانلود نرم افزار
tancks.
This Post Helped me
Good Time

{Reply}
Sep 19
2:37 pm

Health blog
Thanks ! the speech bubble looks great !

{Reply}
Sep 21
3:01 am

Teungku
great post bro, keep posting :)

{Reply}
Oct 12
4:51 pm

Moomak
Great tutorial,Thanks you.

{Reply}
Oct 14
5:41 am

Ian
Now that is pretty awesome (: Thank you.

{Reply}
Oct 14
2:01 pm

arkoma
Thank for great tutorial.

{Reply}
Nov 2
8:20 am

Cottelletje
Hi do you have a code for this style for comment :
http://i789.photobucket.com/albums/yy174/crygretll/reactie.jpg

can you mail it to me?

{Reply}
Nov 11
5:49 am

510博客
谢谢了！I’m in China

{Reply}
Nov 14
7:35 pm

WPExplorer
Great Tutorial. Thank you so much!

{Reply}
Nov 15
11:47 am

印第安小狮
Oh! Great!!!

{Reply}
Nov 24
11:22 am

caillou türkçe izle
thank for share to us !

{Reply}
Jan 2
5:12 am

Liron
Cool !

just wanted to know what extension you are using for putting the code in your posts like that ?

{Reply}
Jan 11
12:54 am

Rodger
Thanx

{Reply}
Jan 15
3:04 pm

guybrush
very nice post

thanks

{Reply}
Jan 24
4:26 pm

_tristan
Nice! Great tips

{Reply}
Jan 30
11:29 am

sssssssssssssssssssssssss
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddsssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

{Reply}
Jan 30
1:30 pm

Infographiste
Thanks for sharing mate, have a great week end!

{Reply}

Darren Hoyt Dot Com | Design, Development, CSS, CMS, WordPress

Styling Your Wordpress Comments

199 Responses {+}

Tweetbacks

Trackbacks

Leave a Response

More in CSS

More in Design

More in Wordpress

Search