I’ve been asked many times by many people how I do my comments. Be it the comment numbers, the alternately styled even and odd entries, the special formatting that applies to my comments, the shadows behind the gravatars, or the live previewing of comments, it seems that my comments template has struck a chord with a lot of you in some way or another. I can’t say I can take credit for any of them, I’ve borrowed from a lot of designers to get those comments to appear the way they do now — elements from people like D. Keith Robinson, John Oxton, Michael, and Matt — and I still tweak them once in a while.

I’ve said it before and I’ll say it again: I’m no one’s web designer. I don’t know color. I don’t know spacing. I’m no elegant CSS stylist, and my CSS code itself is a hideous travesty (PHP code, at least for my plugins which are more classically organized, I can format elegantly… CSS I just fling crap hither and yon). I can’t think in terms of design for some reason, it’s just hard. That’s likely why the redesign I referred to, what, two months back still hasn’t occurred. So, if you’re looking for insightful commentary on choosing colors and making your CSS a joy for others to behold both in resultant style form and in syntax, you’re barking up the wrong tree. If, rather, you want to borrow some elements that you see in my comment template, you should find something useful below.

So, let’s break the features of my comment template down into manageable chunks. You can see my entire comment template here so pull that up in a separate tab or window to follow along, and keep that stuff in mind that I said before about not being an HTML stylist, okay? First, here’s a representative example of the comments output so we’re all on the same page.

Alternating Backgrounds

As you can see, I use alternating colored backgrounds for a couple of reasons: to provide some visual interest and to more easily distinguish adjacent comments. The default template that shipped with WordPress 1.5 had built-in support for this, so it’s not black magic. Let’s see what causes it.

/* This variable is for alternating comment background */
$oddcomment = "graybox";

PHP isn’t black magic either. Here we’re declaring a variable that we can use later called $oddcomment and we’re assigning it a value of the string "graybox". Later on, when we’re actually outputting our comments, you can see that we’re echoing the value of that variable as the class for our comment list item.

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

This wouldn’t be very useful if we didn’t alternate the class for each comment, so luckily down at the bottom of the comment output loop you can see the magical clearing of the variable.

<?php /* Changes every other comment to a different class */    
    if("graybox" == $oddcomment) {$oddcomment="";}
    else { $oddcomment="graybox"; }
?>

For those not overly familiar with programming or with PHP this code says ‘if the variable $oddcomment has a value of the string "graybox" then set the value of the variable $oddcomment to be an empty string, otherwise set the value of the variable $oddcomment to be the string "graybox".’ So, the first time we output a comment, it will have a class of "graybox". Then we reach this code which says ‘yes, the value of $oddcomment is "graybox" so I need to set the variable to an empty string,’ and the next comment will have a class of an empty string. Which is just dandy.

Now all we have to do is style it. This is cake with CSS, of course. Here are my style declarations for the base comment list item and the override to change the background color on the alternate comments.

.commentlist li {
        margin: 15px 0 3px;
        padding: 5px 10px 3px;
        list-style: none;
        background-color: #F0F4FF;
        -moz-border-radius: 7pt;
        }
li.graybox {
        background-color: #DFE4F8;
        }

Styling That Comment Index

I wanted to display the comment number — not the comment ID which, to me, is utterly useless to show to readers — in the comment so people could easily reference previous comments. Since the comments are ordered lists, you’d think it would be easy to specify a style for just the numbers but you’d be so wrong. In the currently-unimplemented CSS3 draft specification a new selector has been created to do this very thing and there’s a workaround for Mozilla users in the form of the -moz-list-number pseudo-selector, but there’s a way to do it that’s slightly less easy but at least it’s universally available.

Look for this part in the code.

$commentcount=1;

Using our keen understanding of PHP we know that this creates a variable called $commentcount and sets its value to 1. Wonderful. However, it’s what we do with it that counts.

<div class="commentnumber"><?php echo $commentcount++;?></div>

Ah-ha! Within the comment loop we find this code segment. We’re declaring a div with class of "commentnumber" and… what the hell is that? If you know PHP that ain’t tricky, but for those of you who don’t that little PHP section says ‘print out the value of the $commentcount variable as it stands right now and then increment its value.’ The first comment will therefore have HTML output that looks like this

<div class="commentnumber">1</div>

And then the $commentcount variable gets incremented so it now has a value of 2, ready to be output for the next comment. Easy, right? Now all we have to do is style that DIV like we want. Here’s my style declaration for the commentnumber class.

.commentnumber {
        font: italic normal 14px 'Times New Roman', Times, serif;
        margin-top: -5px;
        float:right;
        color: #B4D8FE;
        font-size: 28pt;
        font: italic;
}

Noteworthy Comment Styling

I apply a different style to my posts. Why? I love me. What I have to say is obviously sooo vastly superior to what everyone else has to say that it’s simply expedient to highlight my own words so the eye is drawn naturally to the pure goodness therein.

Yeah right. I simply figure that, especially in the case of comments on my plugins, people will want to graphically easily distinguish something written by me perhaps in response to their query. Therefore, some delineation seems appropriate. So, how do we identity my posts?

<?php if( $comment->comment_author == "ColdForged" ) { ?>
    <li class="cfpost" id="comment-<?php comment_ID()?>">
<?php } else { ?>
    <li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<?php }?>

Why, we use the handy dandy comment author field! What this confusing looking mess says is ‘if the author of this current comment is named "ColdForged" I’m going to output a list item with a class of "cfpost", otherwise I’m going to output the standard comment list item.’ Now, does this have security concerns? Anyone can post as “ColdForged” after all. True, but it’s doubtful I’d allow that comment to hang around long. The nice thing is you can have any kind of test you want for whether it’s “you” including email address. That’s likely the best choice as people generally cannot see your email address on comments. You can get as wacky as you want, checking name, email, URL, and even IP if you so desire.

Now all that’s left is to have some style overrides for the "cfpost" class. For mine, I have a slightly lighter background and a heavy border, and I’ve also made the comment index slightly darker.

li.cfpost {
        background-color: #F6F8FE;
        border: 2px solid #88C2FE;
}

.cfpost #commentnumber {
        color: #88C2FE;
}

What’s nice is that we can extend this however far we want. Want it so that certain specific readers have their own style? Have a check for their name or email address. As written, this particular method is not very extensible so if you had too many special cases you’d likely want to break it out into a function that returned the appropriate class to use based on the comment parameters, but I’ll leave that as an exercise for the reader.

But I want more!

That’s it for part 1. Next time we’ll talk about slightly more advanced topics like my gravatar usage, input hiding, and live comment previews. If there’s anything else you’d be interested in discussing, let me know here.

This entry was posted 3 years, 5 months ago and is filed under Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.