Alternating LI background colors

Resolved

(@volfro)

Searching for awhile didn’t bring me the answers I’m looking for, so I’m posting.

I’m developing a custom theme for a client, and part of it involves, in the sidebar, a list of recent posts of the category “Articles”.

So for now the PHP looks like this:

<ul id="recentEntries">
     <li class="entriesHead"><h3>Articles</h3></li>

     <?php query_posts('cat=4&showposts=10'); ?>

     <?php while (have_posts()) : the_post(); ?>

     <li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?> <span><?php the_time('F jS, Y') ?></span></a></li>
     <?php endwhile; ?>
</ul>

producing HTML that looks like this:

<ul id="recentEntries">
	<li class="entriesHead"><h3>Articles</h3></li>

	<li><a href="http://localhost/wordpress/?p=18" title="Article trois">Article trois <span>March 23rd, 2007</span></a></li>
  	<li><a href="http://localhost/wordpress/?p=17" title="Article dos">Article dos <span>March 23rd, 2007</span></a></li>
	<li><a href="http://localhost/wordpress/?p=16" title="Article 1">Article 1 <span>March 23rd, 2007</span></a></li>
</ul>

What I’d like to do is have every other <li> in that <ul> be given a class of alt, so that the background colors can alternate.

My PHP skills are still pretty rudimentary, so any help to this end would be terrific.

Thanks!!

Viewing 12 replies - 1 through 12 (of 12 total)

Moderator Samuel Wood (Otto)
(@otto42)

WordPress.org Admin

17 years ago
```
<ul id="recentEntries">
     <li class="entriesHead"><h3>Articles</h3></li>
     <?php
query_posts('cat=4&showposts=10');
$alt = '';
while (have_posts()) : the_post();
?>
     <li<?php if ($alt=='') { $alt = 'alt' }
     else { echo ' class='.$alt; $alt = ''; } ?> >
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?> <span><?php the_time('F jS, Y') ?></span></a></li>
     <?php endwhile; ?>
</ul>
```
Thread Starter volfro
(@volfro)

17 years ago

Thanks!!

Could you explain to me what’s going on there?
Moderator Samuel Wood (Otto)
(@otto42)

WordPress.org Admin

17 years ago
Sure.

Before the loop, we set $alt to empty string:
$alt = '';

Inside the loop, we do this:
```
<li
<?php if ($alt=='')
{
$alt = 'alt'
}
else
{
echo ' class='.$alt;
$alt = '';
}
?>
>
```
If $alt is empty, we set it to ‘alt’ for the next iteration. If $alt is not empty, we output a class=’alt’ and then set $alt to empty for the next iteration. So it just cycles back and forth, alternating with every pass through the loop.

And actually, my previous code was not entirely correct. It works, but won’t validate. Since I’m big on validation, I recommend using this instead:
```
<ul id="recentEntries">
     <li class="entriesHead"><h3>Articles</h3></li>
     <?php
query_posts('cat=4&showposts=10');
$alt = '';
while (have_posts()) : the_post();
?>
     <li<?php if ($alt=='') { $alt = 'alt'; }
     else { echo ' class="'.$alt.'"'; $alt = ''; } ?> >
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?> <span><?php the_time('F jS, Y') ?></span></a></li>
     <?php endwhile; ?>
</ul>
```
That’ll fix it.
Thread Starter volfro
(@volfro)

17 years ago

Actually, it’s saying there’s an error on line 12 of the document, which I would pastebin, but pastebin is screwing up today.

Not sure where to go from here. I’ll keep messing with it.

Thread Starter volfro
(@volfro)

17 years ago

Op. You posted the explanation as I typed my reply.

Your update works flawlessly and validates. Thanks very much!!

I’m still trying to wrap my head around your explanation…that’ll take some time, as I’m still learning. But thank you for that, I really appreciate it. Hopefully when I get better at this I’ll be able to answer some questions too.

gtcave
(@gtcave)

16 years, 8 months ago

Hello this is really difficult to understand but is exactly what i am looking for. Im having a little trouble getting it working. Im not anywhere near a professional at this so can someone give me an example of what i would put in the CSS file for the class etc?

Please reply asap.

Regards
Moderator Samuel Wood (Otto)
(@otto42)

WordPress.org Admin

16 years, 8 months ago
Okay, the idea is that you want to have every other item (whatever it is) to have a different class. That’s what the PHP code segment does, it switches a variable back and forth every time through the loop, and either outputs a class or not. I used alt and nothing, but you could easily use odd and even or whatever.

The key in the php is similar to this (not real code, example only):
```
$switcher = "even";
-begin LOOP
if ($switcher == "even") $switcher == "odd";
else $switcher == "even";
--do some output with class = "$switcher";
-end LOOP
```
See how it switches back and forth? Okay, now that you have that working, you can look and see that whatever you have looping will have different classes for the odd and even ones. Then, in the CSS, you style the two things differently:
```
.odd {color:black}
.even {color:white}
```
And that’s the general idea. It’s a concept, not exact specific cut-and-paste code. You have to adapt it to whatever you’re doing.

If you absolutely cannot write PHP or XHTML or CSS, then I suggest you hire somebody to do it for you. The wp-pro mailing list is a good place to start.
gtcave
(@gtcave)

16 years, 8 months ago
i know a little php and css and i see exactly how its working, much easier when viewing it like above. I got it working now thanks. See in the example you gave below
```
<ul id="recentEntries">
     <li class="entriesHead"><h3>Articles</h3></li>
     <?php
query_posts('cat=4&showposts=10');
$alt = '';
while (have_posts()) : the_post();
?>
     <li<?php if ($alt=='') { $alt = 'alt'; }
     else { echo ' class="'.$alt.'"'; $alt = ''; } ?> >
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?> <span><?php the_time('F jS, Y') ?></span></a></li>
     <?php endwhile; ?>
</ul>
```
Okay so,
if $alt is not empty then the class=alt and when alt is empty it doesnt use any class. How would i set a class for when $alt is empty? Just replace the empty ” with a class name like alt2?
Moderator Samuel Wood (Otto)
(@otto42)

WordPress.org Admin

16 years, 8 months ago

You would replace the empty with something like alt2, but you would also need to move the echo class=$alt stuff out and down out of the else section. You can’t have an empty class, which is why I had it only outputting when there was something there. If there’s *always* something there, then you need to always output the class as well.
gtcave
(@gtcave)

16 years, 8 months ago
Okay small flaw in this code.

I pasted what you said:
```
<ul id="recentEntries">
     <li class="entriesHead"><h3>Articles</h3></li>
     <?php
query_posts('cat=4&showposts=10');
$alt = '';
while (have_posts()) : the_post();
?>
     <li<?php if ($alt=='') { $alt = 'alt' }
     else { echo ' class='.$alt; $alt = ''; } ?> >
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?> <span><?php the_time('F jS, Y') ?></span></a></li>
     <?php endwhile; ?>
</ul>
```
just above
```
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post">
	<h2 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
	<div class="meta">Posted <?php the_time('F jS, Y h:i') ?>  by <?php the_author() ?>
</br>
<div class="metacat"> Posted in <?php the_category(', ') ?>
</div>

	</div>
```
in the Index.php page so it just shows above the frontpage posts. I set the category to 13 so it shows list of all posts in category 13. Now this has affected what full posts appear on the code below it on the front page. Now only posts from cat 13 are appearing instead of all. How can i change it so it doesnt do this OR change it so it shows a list for all categories
gtcave
(@gtcave)

16 years, 8 months ago

okay nevermind i worked it out.

I removed cat=13& from the code. Looks fine now.

Thanks for your help. Your a saviour lol.

Regards
thunderdust
(@thunderdust)

16 years, 4 months ago
I would like to kick this threat up since it is not working for me

i’ve copied this code
```
<ul id="recentEntries">
     <li class="entriesHead"><h3>Articles</h3></li>
     <?php
query_posts('cat=4&showposts=10');
$alt = '';
while (have_posts()) : the_post();
?>
     <li<?php if ($alt=='') { $alt = 'alt' }
     else { echo ' class='.$alt; $alt = ''; } ?> >
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?> <span><?php the_time('F jS, Y') ?></span></a></li>
     <?php endwhile; ?>
</ul>
```
And for some reason I will get an error ? anyone here who can help out

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Alternating LI background colors’ is closed to new replies.

Alternating LI background colors

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics