Alternating css classes in loop

  • Here’s what I’m trying to accomplish:

    I have a 1 column layout where I have posts being published in 3 horizontal columns. The issue is, is that I need the first two posts to have a 30px margin-right and the third to have none. I have created a class with the 30px margin-right, I just need to have the loop modified so it adds the class to the first two and not the third. Also, I need it to loop, there are going to be many posts on a page. Here is what the code looks like thus far:

    <ul id="post">
		<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
		<li class="end"> //this is the 30px margin-right
		<a href="<?php the_title(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
		<span class="ss"><?php the_content(); ?></span></a>
		<div class="post">
			<span class="heart"><?php if(function_exists('the_ratings')) { the_ratings(); } ?>
			</span><span class="comment">
			<img alt="Comments" src="<?php bloginfo('template_directory'); ?>/images/comment.png" /><em><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></em></span>
		</div>
		</li>
		<?php endwhile; ?><?php else : ?>
		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
	</ul>

    I’ve accomplished this before with the help of friend who was better than I at PHP, but I can’t get in touch with him. Thanks!

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

  • Try:

    <ul id="post">
	<?php $c = 0; if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
	<?php $c++;
	if( ($c % 3) == 1 || ($c % 3) == 2 ) $myclass = ' class="end"';
	else $myclass = '';
	?>
	<li<?php echo $myclass;?>>
	<a href="<?php the_title(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
	<span class="ss"><?php the_content(); ?></span></a>
	<div class="post">
		<span class="heart"><?php if(function_exists('the_ratings')) { the_ratings(); } ?>
		</span><span class="comment">
		<img alt="Comments" src="<?php bloginfo('template_directory'); ?>/images/comment.png" /><em><?php comments_popup_link('No Comments ?', '1 Comment ?', '% Comments ?'); ?></em></span>
	</div>
	</li>
	<?php endwhile; ?><?php else : ?>
	<h2 class="center">Not Found</h2>
	<p class="center">Sorry, but you are looking for something that isn't here.</p>
</ul>
    Thread Starter aedeeley

    (@aedeeley)

    thank u so much, worked like a charm!

    if I read this code correctly it just counts the post in the loop and when you reacht the 3 one an if else statement occurs.

    Thing is I have the same problem as the OP, but within my loop I have a statement that excludes a category this way it shows 3 posts while the loop actually is 5, so trying to target the third post and change its css can be done but it might not show for it is excluded.

    Any sollutions for this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Alternating css classes in loop’ is closed to new replies.

Tags