Some blogs have alternating background colors for their comments and posts, i.e. a green background for every even comment and post, and a grey background for every odd comment and post. How do they do that?
Alternating Comments Styles
To alternate comments, add the following code to your comments.php template file, under where it says <?php if ( $comments ) : ?>
:
<ul>
<?php $i = 0; ?>
<?php foreach ($comments as $comment) : ?>
<?php $i++; ?>
<li id="comment-<?php comment_ID() ?>"<?php if($i&1) { echo 'class="odd"';} else {echo 'class="even"';} ?>>
Then, create a style called .even and a style called .odd in your style.css file. Give each style a different background color, like this (but change the colors to what you want):
.odd {
background-color: #fcf9fc; }
.even {
background-color: #616161; }
This information is from the following WordPress support topic:
How to alternate background colors of comments posted on blog?
Alternating Post Styles
Adam Brown has a tutorial on his site for creating alternating styles for posts. Basically, you do the following:
- Right before the loop begins, add the following code:
<?php $odd_or_even = 'odd'; ?>
- Right after the loop, there will be a div. Let’s say it’s called class=”post”. Change it to
<div class="post <?php echo $odd_or_even; ?>">
, and then add the following piece of code on the next line:<?php $odd_or_even = ('odd'==$odd_or_even) ? 'even' : 'odd'; ?>
- Now, create .odd and .even styles in your style.css.
Adam’s site has another really useful PHP Tutorial for WordPress Users, which is good for those of us who aren’t going to become PHP gurus, but would like to know enough PHP to extend our WordPress sites.
Pingback: PHP Coding School » Blog Archive » php tutorial [2007-12-26 15:34:13]()
Pingback: Buffer Dump 29DEC07 « Feet up, eyes closed, head back()
Pingback: Come alternare i colori di sfondo dei commenti nei blog Wordpress - Geekissimo()
Pingback: Get to know every line of your comments.php WordPress theme file | WordPressGarage.com()
Pingback: How to: Alternate background color in comments list()
Pingback: Stupid WordPress Tricks | Serita()