Change the Background Color of Alternate Comments in WordPress

Your comment section is where most of the really interesting stuff happens! For many blogs that have carefully built up a community over the years, the real proof of it is in the discussions that occur at the end of every article. If you take a forum board like Reddit for example, most of the value is found in the comment section rather than the actual post itself. So it makes sense to pay as much attention to the look and feel of the discussions as you can.

WordPress gave the option to switch to threaded commenting quite a long while ago, and most blogs make use of it. But there are still those who prefer the simplicity of the unthreaded comments being simply a list of posts one after the other. If you currently have threading enabled on WordPress and want to give your blog a more streamlined look and feel, you can always disable it by going to Settings->Discussions and unchecking the “Enable threaded(nested) comments” item as shown below:

This will make all comments appear one after the other in a single column. While it certainly looks distinctive, you may want to improve the visibility by alternating the color of each comment. Of course you can also do this with comments threading enabled, but I think it goes really well with non-nested comments. So how do we go about styling alternate comments?

Examining the Comment CSS Classes

If you examine the HTML generated for any given comment on a modern installation of WordPress, you see that it has a large number of classes assigned to it. This enables us to create complex styles for all our requirements. For example if we take a post with a large number of comments, you can see that alternate discussions are assigned “thread-even” or “thread-odd” comment classes.

In earlier versions of WordPress we needed to explicitly hack the comment loop in order to achieve this effect but now it comes built-in thereby making our job much easier.

For example if you want to change the background color of all even comments, place the following piece of CSS code into your style.css file or wherever you normally place custom CSS code:

.thread-even {
    background-color: antiquewhite;
}

With this change in the stylesheet, our comment section now looks like this:

Similarly, if we want to change the styling for all odd comments, we simply need to add the following CSS:

.thread-odd {
    background-color: aquamarine;
}

This gives all even comments an aquamarine background combined with the first modification, the two together look like this:

Retaining Threading

If you want to retain threading but still have some kind of alternating color structure, we can make use of the “children”, “even” and “odd” classes to do so – otherwise implementing the above solution by itself can look pretty strange.

All comment replies are assigned the class “children”. In addition to that, they are also given the “even” and “odd” designations. This allows us to create interesting color variations for alternating threaded comments. For example, put the following code into your custom CSS location:

.children .even {
    background-color: aliceblue;
}

.children .odd{
    background-color: burlywood;
}

This will give you the result as shown below:

So now not only are the individual threads alternating in color, the resulting children have different backgrounds as well. It’s important to find a careful balance between these color palettes so as to not overwhelm the user. What’s important is to have a combination of simplicity and elegance while at the same time clearly delineating the various discussions so that users can easily follow them.