Support » Themes and Templates » Alternating comment colours

Alternating comment colours

  • I’ve seen a couple of plugins to highlight the authors comments and display it as a different colour, what I would like to do is have alternating colours for the comments posted (doubt there will ever be any!). I’ve seen it used on some sights – actually even this forum would be a good example of that. Where the reply will be a light gray, and the one after will be white etc.

    How can I get this same effect in my blog?

    Thanks in advance

Viewing 15 replies - 1 through 15 (of 25 total)
  • Thanks for that thread, however I’m still having some difficulty understanding it.

    I’ve written a comment on the authors site for the daily doodles my-comments plugin.

    It states that <?php my_comment(); ?> should be placed in wp-comments like so:

    <li id=”comment-<?php comment_ID() ?>” <?php my_comment(); ?>>

    Now I am using 1.5 and the only comments.php file that I could edit I assume was comments.php, within that I found:

    < a href=”#comment-<?php comment_ID() ?>”> which was the only reference to that particular php reference. So I did as instructed and the only thing it highlighted was the time the post was made with the CSS edits.

    Any idea how I can get it to highlight the entire comment? How can I make the comments alternate in colour, or is this just not possible currently without knowing coding?

    Thanks in advance


    use and copy the comments template and css portions from the default theme…this is implemented in Kubrick and it is how I got it working on my site…

    Would this affect the current theme layout for my site – that is to say, I would need to change the id and class here and there, but I wouldn’t actually know what it is I’m supposed to apply it to if it’s written differently – or they all written the same generally?

    Well I tried copying from Kubrick, suffice to say it didn’t look write and nothing was highlighted – I attempted to assign the appropriate class and ids as in the CSS but not much look. It disjointed and broke the page.

    study the code by using FF’s web developer plugin. it will allow you to temporarily adjust css on the fly and will help you know the code better…..

    I always use that FF plugin, but I’ll give it another go since it’s quite a nice effect that I would like to obtain. There seems to be a lot of html tags within the comments.php file though, hope it doesn’t mess anything up too badly

    Ok, I am halfway to what I want to achieve, but still having trouble could someone help?


    What I’m trying to do is first I need an alternative colour for the default rather than being transparent or blank, because frankly the text colour does not go well with the green without a contrasting background.

    I also need to center all the comments, as they are now they’re all shifted to the right – I tried adding margins but they didn’t work.

    Finally below you’ll notice the quicktag buttons – well everytime I tried to shift them to the right (they were a bit too far to the left) they keep spacing out. I’d like them grouped together and to be shifted either aligned with the box on the left hand side or to be centred above it.

    Anyway to do this? I’m very close to getting this done, so I hope someone could help me finish this part.

    try this, with your own colors:
    .commentlist li {
    background: #ccc;
    .commentlist li.alt {
    background: #f0f;

    The quicktags appear as you describe to me, so I assume that part of the question is fixed.

    thank you tdw, that did the trick. and thanks to philpeeps for suggesting the idea and Kafkaesqui for pointing me in the right direction;)

    Now, I just need to figure out where to place <?php my_comment(); ?> within the comments.php

    EDIT: I figured it out, but it just isn’t working @( I’ll try another plugin, perhaps it doesn’t work if you set two alternating colours?


    I wrote the plugin (my-comments)., and as far as I can see you got it working (?).

    I, my self, use the plugin with wp1.5, and I have no problems using it with alternating comments. You might notice the changing border color on the comments in my blog which is generated from a different script than my-comments – while my-comments inserts a cartoonified face in the top right corner of comments written by me (yes, I have Gravatar-support enabled, but I don’t have a gravatar myself).

    This solution is rather discreet, but I found that using both alternating backgrounds and my-comments (or our-comments) would lead to a confusing amount of background colors displayed in the comments section – thus making the blog a usability nightmare.

    hi martin- actually I don’t have the plugin working. I tried to and tried to change the background colour but it doesn’t seem to be working. In order to distinguish admin posts I was thinking of adding a a fairly transparent images in the background.

    Now, the code for my-comments is in there, but I just wonder if my-comments doesn’t like the set background colours – and therefore is unable to change the alt colour?

    hi again,

    I’ve looked through your comments page source, and I can see that the class mycomments is generated by the script, which means the plugin is actually working.

    But there is a conflict between your alternating background script and the mycomments plugin, which means that your commentlist li ends up looking like this:

    <li class="" id="comment-17" class='mycomments'>


    <li class="alt" id="comment-17" class='mycomments'>

    To solve this problem I would advice you to modify the plugin by changing:

    if (($the_name == $your_name) && ($the_url == $your_url)) {
    echo "class="mycomments'";


    if (($the_name == $your_name) && ($the_url == $your_url)) {
    echo "style='background: url(/path/to/background/bg.gif) no-repeat top right'";

    But then another problem probably arises since you are now defining the css background both locally in the li-tag and globally (in your stylesheet).

    This basically means that you can’t use the alternation effect on the background, while also changing the background with the my-comments plugin. But you can change other elements such as the border – as I do in my blog.

    Alternatively you should look here.

    I guessed as much, and looking at scripty goddesses plugin seems to be a similar job, but I’ll try again and see if I can get it working. Thanks for the reply in any case.

    Can anyone suggest an alternative solution? Would it be possible to add a third class which only highlights the comments of user x based perhaps on the Email?

    I have a slightly different problem. I’m trying to apply different colored blackgrounds to two different authors. One slighly pink and one slightly blue and then everybody else will have something different. Should I just take the my_comment plugin and duplicate it and make like a my_comment_plugin_2 ? Any ideas of how to make this work with more then one author?

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Alternating comment colours’ is closed to new replies.