A couple days ago, Ryan and John pointed out to me that they had some usability issues with the color of the links on my site when you hover over them. I had been making them white, but that was just too hard to read on the light background of the site, especially for on some displays.

In a nod to all of the help and advice John’s given me, I immediately set the a:hover style to “Sinosplice Green“, i.e., the background color of John’s site that he’s been using since the bronze age of blogging. I was been busy with the school, and Google Docs had basically wreaked a gigantic curriculum document I’d been working on. There just wasn’t time to think about it. I just had to pick something that was readable. The only problem is that that particular color (#363) is ugly on this site. After giving my students a few new chapters in their textbook and getting their CDs burned yesterday, I finally had a little bit of time to turn my attention to fixing up my site a bit.

I ended up choosing just plain old blue for my link hover color. But, once I start fixing things, it’s hard to stop. As soon as I settled on blue for my links, I started getting irritated by other usability problems. For one, there were forty comments on my post about SEO. Most of them were from people, but a lot of comments were also just trackbacks from other people linking to the site. It was kind of hard for me to follow the discussion thread and read through them. In other words it was time to edit my comments.php and see what could be done.

Here’s what I came up with:

  1. Comments are now numbered.
  2. Comments made by me are now light blue, #eef, to be precise.
  3. I’m not quite sure what the difference between a trackback and a pingback is, but they’re pink now.
  4. All other comments still alternate between normal (#eec) and lighter (#ffd) shades.

Now, it’s easy to tell refer to comments by number, it’s clear which of them are from the me and which are from guests, and it’s easy to skip over trackbacks and pingbacks while reading a thread. I’m pretty happy with it, but feedback and suggestions about the layout are more than welcome.

For those curious about how I did it, I’ve posted the code below:

All the changes I made were in the comments.php and my style.css files. Near the top of my comments.php, I created a variable to keep track of comment count, and one to hold the “type” of comment.

<?php $count = 0; ?>
$commenttype = 'alt';

I put them right before the line with

<?php if ($comments) : ?>

Then, right after the line with:

<?php foreach ($comments as $comment) : ?>

I added a counter and set a few more variables:

<?php $count++; ?>
<?php
  $isByAuthor = false;
  if($comment->comment_author_email == 'me@somewhere.com') {
    $isByAuthor = true;
  }
?>
<?php
  $istback = false;
  if($comment->comment_type == 'trackback') {
    $istback = true;
  }
?>
<?php
  $ispingb = false;
  if($comment->comment_type == 'pingback') {
    $ispingb = true;
  }
?>

What that in place, it was very easy to set the class of each comment and print the comment number, using those variables. I put the following lines right after the block above:

<?php /* Changes  class based on type of comment */
  if ($isByAuthor) $commenttype= 'authorcomment';
  else if ($istback) $commenttype= 'tbcomment';
  else if ($ispingb) $commenttype= 'pbcomment';
  else if ('alt' == $commenttype) $commenttype = '';
  else $commenttype = 'alt';
?>

<li class="<?php echo $commenttype; ?>" id="comment-< ?php comment_ID() ?>">
  <span class="count">
    < ?php echo $count; ?>
  </span>
  <cite>< ?php comment_author_link() ?></cite> Says:
...

After that, it was just a matter of adding styles to my style.css:

.alt {
   background-color: #ffd;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
}

.authorcomment {
   background: #eef;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
}

.pbcomment, .tbcomment {
   background: pink;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
}

.count {
   float: right;
   margin: 10px 0px 10px 10px;
   font-size: 2em;
   color: #ddd;
}

Similar posts: