zebra striping [#1039638]

How do I get zebra striping in a views block of node-titles? Firebug tells me each row has a class of "row-1" or "row-2". Being a newbie, I don't understand where zebra striping lives, or how to add it.

Comment	File	Size	Author
#7	Styling Zebra Striped Tables With CSS.png	22.08 KB	ashish_nirmohi

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

topdillon CreditAttribution: topdillon commented 25 January 2011 at 16:16

Poorly worded. classes are like, row-1, row-2, row-3, etc.

Comment #2

aquariumtap CreditAttribution: aquariumtap commented 25 January 2011 at 16:27

Hi diwwin,

The HTML is generated by the Views module, not by Fusion. To add CSS classes to add zebra styles, I usually use take these steps:

Install the Semantic Views module (http://drupal.org/project/semanticviews). This provides a bit more control over how the HTML is output by Views.
Edit your view (admin/build/views). Under "Basic Settings", there is a setting called Style. Change this to Semantic Views.
Edit the Semantic View by clicking on the gear icon. There is a field called "striping class attributes", and the default is "odd even". (Odd rows will be given the class "odd", and even classes will be given the class "even").
Save the view, and you should now have the classes available to add zebra striping to your spreadsheet

Hope that points you in the right direction

Comment #3

topdillon CreditAttribution: topdillon commented 26 January 2011 at 14:45

Thanks.

I am learning (struggling with) CSS. I got the view setup correctly with Semantic Views, but I have not been successful in referencing the even and odd classes. In my fusion subtheme, "sidebar-first" is correct. Why would this not work?

/* Zebra Stripes */

#sidebar-first .boxstyle .even,
#sidebar-last .boxstyle .even{
background-color: #F1F4A3;
}

below is my blocks.tpl.php...

<?php

// $Id: block.tpl.php,v 1.1.2.2 2010/04/16 21:09:14 sociotech Exp $

?>

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class=" tintback block block-<?php print $block->module ?> <?php print $block_zebra; ?> <?php print $position; ?> <?php print $skinr; ?>">
  <div class="inner clearfix boxstyle">

   <div class="boxstyletop">
    <div class="boxstyletopright">
     <div class="boxstyletitle">
      <?php if (isset($edit_links)): ?>
      <?php print $edit_links; ?>
      <?php endif; ?>
      <?php if ($block->subject): ?>
      <h2 class="title block-title"><?php print $block->subject ?></h2>
      <?php endif;?>
     </div><!-- /boxstyletitle -->
    </div><!-- /boxstyletopright -->
  </div><!--/boxstyletop-->

   <div class="boxstylesideright">
    <div class="boxstylesideleft">
     <div class="content clearfix boxstylecontent">
       <?php print $block->content ?>
     </div><!--/boxstylecontent-->
     <div class="boxstylebottom">
       <div class="boxstylebottomright">&nbsp;
       </div><!-- /boxstylebottomright -->
     </div><!--/boxstylebottom-->
    </div><!-- /boxstylesideleft -->
   </div><!-- /boxstylesideright --> 

</div><!-- /block-inner -->
</div><!-- /block -->