CSS styling for alternating comment colors with author differentiation in WordPress

Disclaimer: I am not the originator of most of this PHP/CSS code, and I would like to give full credit whenever possible. My contribution was to manage to weave the two functions into a useable styling - a feat that I thought might be easy but turned out to be rather difficult.

Check for the author is taken from Scriptygoddess, but changed to reflect Scott Vandehey’s idea for multiple authorship.

The alternating comment color itself was taken from a Wordpress support forum thread that I seem to have lost the addy for. If you know the thread or are the author of the code, please feel free to leave a comment or contact me so I can give due credit.

Purpose: I really wanted two things:
1. alternating colors for normal comments (in this case, blue and yellow)
2. a separate color defined only for the author of that post - I didn’t want to tie to an email addy since we have multiple authors here at tylerwillis.com

1. alternating colors for normal comments

It’s pretty easy to assign a single alternating color to your comments and leave the second “color” as the background, but I wanted two separate colors. Cause I like colors. Makes stuff festive.

Based on the support forum thread, I found a bit of code that outputted a class called odd to separate itself from normal comments.

< ?php
function comment_style() {
static $comment_count;
$comment_count++; 
if ($comment_count % 2) {
echo "odd";
}
} 
?>

Which is great if you have one color be the normal background color of the content area, but I needed two classes - two separate colors from the background, so I added:

< ?php
function comment_style() {
static $comment_count;
$comment_count++; 
if ($comment_count % 2) {
echo "odd";
}
else {
echo "even";
}
} 
?>

Now I have my two classes: odd and even, appropriately enough. To use, I looked for the opening of the comments loop:


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

Then after the comments open, I used this bit of code:


<ul><li class="<? comment_style(); ?>">
DO STUFF HERE
</li></ul>

This simply called a class that was either odd or even. The CSS for my comments looks like this:


.odd {
	border: 2px solid #236B8E; 
	background: #F0F8FF;
	}

.even {
	border: 2px solid #FFD700; 
	background: #FFFAF0;
}	

This can be styled to taste, of course, but it gives a basic differentiation between comments.

2. a separate color defined only for the author of that post

I found this bit of wonderful code at Scriptygoddess’ site:


< ?php
$authorcomment = '';
if($comment->comment_author_email == get_the_author_email()) {
$authorcomment = ' authorcomment';
}
?>

What it does is check and see if the comment author’s email matches the post author’s email. If so, then it returns a TRUE value, if not, a FALSE value.

This is where I started to run into problems. I found that it was easy enough to insert a bar type graphic using the given code:


< ?php if($authorcomment ) { echo '<"INSERT WHATEVER CODE HERE">';} ?>

But I had real problems getting it to play nicely with the commentstyle function. I needed to have the commentstyle called - but only if $authorcomment was FALSE. In the end, it was my lack of mad PHP skillz that led to many days of frustration, of getting ever so close, but not doing it. The final success was so simple that I almost cried. Almost.


<?php if($authorcomment == true ) : ?>
<ul><li class="authorcomment">
<?php endif; ?>

<?php if($authorcomment == false ) : ?>
<ul><li class="<? comment_style(); ?>">
<?php endif; ?>

DO STUFF

</li></ul>

I had been trying variations of echoing out that commentstyle li class, even trying a switch case at one point - but the above worked perfectly.

It only opens the authorcomment class if the email matches, and if doesn’t then it uses commentstyle to pick between two classes: odd or even. This was my CSS for authorcomment:


.authorcomment {
	border:2px solid #00AF33;
	background-color:#F5FFFA;
	}

Not that much different from the normal CSS, just a color switch.

That’s the basics of it, and you can continue to play with it. I added a hover attribute to the styling and then created secondary functions that duplicated the above for a div class within my comment boxes (that’s the random word box that you see). Of course, I have a number of plugins in my comment box, as well as more styling, but you can take the principle of it and do what you will.

As of this moment, the PHP/CSS is in use here at tylerwillis.com, but if I decide to change it in the future, I’m going to take a screenshot of the final product.

And the basic code does validate to XHTML 1.0 Strict.

Hope someone finds this useful.

 
WordPress stuff
  1. Project Dolphin Wordpress Plugin released
  2. listing only posts that share two categories in WordPress
  3. CSS styling for alternating comment colors with author differentiation in WordPress

9 Responses to 'CSS styling for alternating comment colors with author differentiation in WordPress'

  • a gravatar 1
    On January 18th, 2006 at 3:49 pm - 0 minutes after declaring sushi to be the coolest thing ever - a dastardly pillager who speaks entirely through the usage of telepathic translators, having made 141 accidental prevarications already, playing with the nifty Opera 8.51 on Windows XP and whose alias is Evil Overlord, judged:
    tylerwillis

    This is an official comment by the author of the post. That’d be me. I’m going to link to the Wordpress support forum post for easy reference.

    This is an example of the comment class authorcomment.

    [Quote]
  • a gravatar 2
    On January 18th, 2006 at 3:54 pm - 5 minutes after declaring sushi to be the coolest thing ever - a sordid traveler on the way to the brothel, having made 1 feverish equivocations before blowing up teh intraweb, exploiting the evanescent Firefox 1.0.7 on Windows XP and whose appellation is Evil Minion #1, answered:

    This is a response from some random evil minion, no doubt seeking to undermine the empire that is tylerwillis.com.

    (IE, NOT the author.)

    This is the comment class even.

    [Quote]
  • a gravatar 3
    On January 18th, 2006 at 3:57 pm - 8 minutes since using the bathroom - a certain martial arts master who plays too many RPGs, having made 1 random comments before eating a bag of potato chips, manipulating the flippant Firefox 1.0.7 on Windows XP and whose appellation is HAWT GRRL #3, broke silence:

    This response doesn’t actually exist, as we all know that there is no such thing as a “girl on teh intraweb.” And if there were, she would not be coming to tylerwillis.com.

    (IE, most definitely NOT the author.)

    This is an example of the comment class odd.

    [Quote]
  • a gravatar 4
    On January 21st, 2006 at 9:08 pm - 3 days, 5 hours after having consummated a rendezvous - a thieving varmint who once accidentally mooned the Queen, having made 1 riveting assertations beforehand, possessing the wee Firefox 1.5 on Windows XP and whose common moniker is Billy, theorized:

    Your comments work is cool, and your revolving header is to die for.

    So the last block of code and then the CSS is everything needed to get your results? Sorry and TIA.

    [Quote]
  • a gravatar 5
    On January 21st, 2006 at 10:01 pm - 3 days, 6 hours after engaging in an Anime-Fest! - a degenerate villain who spends too much time looking at websites, having made 141 stupid comments already, exploiting the domineering Opera 8.51 on Windows XP and whose trade name is Evil Overlord, disclosed:
    tylerwillis

    Billy on January 21, 2006 at 9:08 pm said:

    Your comments work is cool, and your revolving header is to die for.

    So the last block of code and then the CSS is everything needed to get your results? Sorry and TIA.

    Billy, thanks much.

    The revolving header is actually just using the Wordpress FlashFader plugin with Photoshopped images.

    The short answer is: no, the above code won’t produce the exact results that I have. I did a lot more styling in addition to using several plugins to achieve what you see currently. The CSS will put a different colored box around your comments, but it won’t do anything more than that.

    I don’t have a problem posting my exact code, but it’s been fine-tuned for the plugins I use and this site… I’m not sure how much good it would do you, but if you would like to take a look at it, let me know and I’ll update the original post.

    [Quote]
  • a gravatar 6
    On June 19th, 2007 at 6:01 am - 1 year, 5 months after watching Dora the Explorer - a thieving hero on a mission from God, having made feverish communications hitherto, employing the wee WordPress 2.1.2 and whose nickname is MrGray.id.au » Blog Archive » Some Comment Styling, articulated:

    […] The following sites might be of use for me to get this happening: Gravatar and the Broken Image Icon Gravatar Popup Plugin CSS Styling for Alternating Colours & Author Comment Background WordPress Codex - Using Gravatars WordPress Codex - Plugins Comment Styling Styling your WordPress Forms WordPress Author Comment Highlighting WordPress Support - number on comments Plugin for my comments Counting Comments & Trackbacks Share This (No Ratings Yet)  Loading …  Email This Post  Print This Post […]

    [Quote]
  • a gravatar 7
    On August 11th, 2007 at 7:49 am - 1 year, 6 months after watching Dora the Explorer - a debauched whiz kid who likes to tickle Smaug on his underbelly, having made arbitrary directives before now, making use of the pastoral WordPress 2.2.1 and who is the alleged “Some Comment Styling” by MrGray.id.au, communicated:

    […] The following sites might be of use for me to get this happening: Gravatar and the Broken Image Icon Gravatar Popup Plugin CSS Styling for Alternating Colours & Author Comment Background WordPress Codex - Using Gravatars WordPress Codex - Plugins Comment Styling Styling your WordPress Forms WordPress Author Comment Highlighting WordPress Support - number on comments Plugin for my comments Counting Comments & Trackbacks […]

    [Quote]
  • a gravatar 8
    On February 26th, 2008 at 1:58 pm - 2 years, 1 month too late to prevent ice-9 - a vulgar soldier from the bawdyhouse, having made 1 accidental proclamations before doing everything in the world, controlling the flawless Internet Explorer 7.0 on Windows XP and whose pet name is Norman, jawed:

    Thanks a lot for this information, that what i was looking for to do in my blog but, I didn’t know what was the term for it. Well now i know and thanks for the tips.

    [Quote]
  • a gravatar 9
    On June 1st, 2008 at 6:55 am - 2 years, 4 months too late to prevent me from pushing the button - a servile charlatan who plays too many RPGs, having made hit-or-miss prevarications before doing everything in the world, waving the obsolete WordPress 2.5.1 and whose epitaph will read Some Comment Styling » MrGray.id.au, pledged:

    […] The following sites might be of use for me to get this happening: Gravatar and the Broken Image Icon Gravatar Popup Plugin CSS Styling for Alternating Colours & Author Comment Background WordPress Codex - Using Gravatars WordPress Codex - Plugins Comment Styling Styling your WordPress Forms WordPress Author Comment Highlighting WordPress Support - number on comments Plugin for my comments Counting Comments & Trackbacks […]

    [Quote]

Leave a Response

177 MYSQL queries. Creative Commons License Loaded in 3.789 seconds.