CSS styling for alternating comment colors with author differentiation in WordPress
by Evil Overlord in
Web Design/WP
during afternoon tea on
January 18th, 2006:
4 years, 1 month ago
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.
- Project Dolphin Wordpress Plugin released
- listing only posts that share two categories in WordPress
- CSS styling for alternating comment colors with author differentiation in WordPress
11 Responses to 'CSS styling for alternating comment colors with author differentiation in WordPress'
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]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]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]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]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][…] 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][…] 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]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][…] 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]frasa.t35.com
[Quote][…] 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]