Zebra Striping Questions
-
I have some questions about zebra striping my posts (and eventually an RSS feed… but that will come much later).
I’d like to have three styles, one even, another odd, and one for the last post on the page. So far all of the tutorials I’ve seen involve only an even and odd class.
Are there any easy ways to have the three classes?
-
Yes. Set up a counter variable before the Loop and increment it inside the Loop. Then use the counter value to determine what additional post class to generate. The classes can them be formatted using CSS.
For example, this should generate three different classes: “two” and “three” for the 2nd and third post in every group of 3. Plus an additional class (“last”) for the last post in a page:
<?php $c = 0;?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php $c++; $extra_class = ''; if( $c % 2 == 0 ) $extra_class = ' two'; elseif( $c % 3 == 0 ) $extra_class = ' three'; elseif( $c == get_option( 'posts_per_page' ) ) $extra_class = ' last'; ?> <div <?php post_class($extra_class) ?> id="post-<?php the_ID(); ?>"> [ standard Loop stuff ] <?php endwhile; ?> <?php endif;?>
Okay, that pretty much works, except for the first post
EDIT: nvm, I figured it out. Thank you so much!
EDIT 2: Can you maybe explain how I could work that into an RSS feed? If you take a look, I have that “Latest Posts” area, and I’d like that to alternate automatically as well. The Reviews are I can do manually because reviews don’t happen often.
RSS feeds don’t incorporate any CSS classes.
I worded that poorly.
What I meant was:
I have an area for latest posts. There would be five entries in this area. Each new entry would be in its own div, and that div would have the style.It’s a similar look to the Recent Reviews area on my site, however I’m doing that one manually.
What will you be using to pull in those posts? What RSS plugin/widget?
@esmi:
you are doing a great work here in the forum.
just to say that this respond is in no way any critique, just the expression of my – still unresolved – perfectionism:
the given logic of generating the extra class would generate a sequence like:
1 2 3 2 1 2 1 2 3 2 1 2 1 2 3 2
and would not catch the last post if it can be divided by 2 or 3.
to really get the last post shown on the page, i would use the number of posts for the page:$wp_query->post_count;
.this slightly revised logic could create three different classes plus a last:
<?php $c++; if( $c == $wp_query->post_count ) $extra_class = ' last'; elseif( $c % 3 == 0 ) $extra_class = ' three'; elseif( $c % 3 == 2 ) $extra_class = ' two'; elseif( $c % 3 == 1 ) $extra_class = ' one'; ?>
@tanshin:
the original idea of ‘odd’, ‘even’ and ‘last’ could be realised by:<?php $c++; if( $c == $wp_query->post_count ) $extra_class = ' last'; elseif( $c % 2 == 0 ) $extra_class = ' two'; else $extra_class = ' one'; ?>
@alchymyth: Thanks! That worked as well!
@esmi: I’m still not entirely sure what I’ll be using… I ran into this:
https://simplepie.org/ a few months ago, however I have no clue if it’s what I want.@alchymyth: You’re right. My logic was flawed. The
if last post
test needs to be the first in any series of if statements.<table width="100%" cellspacing="0"> <tbody> <?php global $post; $myposts = get_posts('numberposts=7&category=5'); foreach($myposts as $post) : setup_postdata($post); ?> <tr><td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td></tr><?php endforeach; ?> </tbody> </table>
script type="text/javascript"> /* Javascript to style odd/even table rows Derived from 'Zebra Tables' by David F. Miller (https://www.alistapart.com/articles/zebratables/) Modified by Jop de Klein, february 2005 jop at validweb.nl https://validweb.nl/artikelen/javascript/better-zebra-tables/ */ var stripe = function() { var tables = document.getElementsByTagName("table"); for(var x=0;x!=tables.length;x++){ var table = tables[x]; if (! table) { return; } var tbodies = table.getElementsByTagName("tbody"); for (var h = 0; h < tbodies.length; h++) { var even = true; var trs = tbodies[h].getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { trs[i].onmouseover=function(){ this.className += " ruled"; return false } trs[i].onmouseout=function(){ this.className = this.className.replace("ruled", ""); return false } if(even) trs[i].className += " even"; even = !even; } } } } </script>
css
/* zebra */ table{ border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; } tr td{ font-family: "lucida grande", verdana, sans-serif; font-size: 8pt; padding: 3px 8px; background: #fff; } thead td{ color: #fff; background-color: #C8C028; font-weight: bold; border-bottom: 1px solid #999; } tbody td{ border-left: 1px solid #D9D9D9; } tbody tr.even td{ background-color: #FAEB99; } .banner { padding-bottom: 10px; } tbody tr.selected td{ color: #ffffff; background-color: #FDCC00; } tbody tr.ruled td{ color: #000; background-color: #FDCC00; } /* Opera fix */ head:first-child+body tr.ruled td{ background-color: #FDCC00; } #content_wrapper #footer table td{ padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; left: 10px; background-color: #FDCC00; } img.alignleft { padding: 0px; float: left; } img.alignright { padding: 0px; float: right; }
- The topic ‘Zebra Striping Questions’ is closed to new replies.