Drupal 7 Comments Alternating Row Colors

Question

I'm interested in making the comments that appear on my resource content type nodes show with alternating background colors. Anyone know how to make this happen?

I tried something like this with CSS but I'm not seeing how I can make this work as the comments don't seem to have anything regular I can target (as the class is quite a bit different if the comment is made by a logged in user vs. an anonymous user for instance):

.comments-by-anonymous .field-item:nth-child(even) {
    background: #fcfc33;
}

Then I thought, well I could try and do some PHP if/then hackery to my comment.tpl.php template but I'm unfamiliar enough with that template to know if its a) even the correct one to edit, and b) if perhaps there might just be a better way to do it.

Anyone have any good ideas?

Answer 1

Looks like you can use the $zebra class in the comment template.

Add it in the preprocess hook as a class:

/**
 * Implements hook_preprocess_comment
 */
function THEME_preprocess_comment(&$variables) {
  // Zebra classes are added in the default template_preprocess function
  if (!empty($variables['zebra'])) {
    $variables['classes_array'][] = $variables['zebra'];
  }
}

You can then style the 'odd' and 'even' comments with CSS

e.g, something like:

.comment.odd{
  background-color: #efefef;
}
.comment.even{
  background-color: #ffffff;
}