By romand@drupal.org on

How to apply css classes "odd" & "even" for .item-list ul li elements?
Thank you in advance!

Comments

somes’s picture

somes commented

http://drupal.org/node/88096

romand@drupal.org’s picture

romand@drupal.org commented

Thanx! But but this topic about menu items.
I need to apply zebra to elements .item-list ul li in block "Popular content" of module Statistics.
How can I do this?

sorry for my english.

somes’s picture

somes commented

You've got several options here on how you do this

the function you need to modify (maybe) is the

http://api.drupal.org/?q=api/function/theme_item_list/HEAD

I'm not sure on the details but it would be better to override the function using a template.php file

you need to added/modify two lines of code mainly in defining the zebra variables ie towards the bottom of the theme_item_list change

$output .= '[li'. drupal_attributes($attributes) .']'. $data .'[/li]';

to

$zebra = ($count % 2) ? 'odd' : 'even';
$output .= '[li'. $zebra . drupal_attributes($attributes) .']'. $data .'[/li]';

that should do it I haven't tested it but would be confident if you directly put in these 2 line above into the function you should see the odd even class added to you html (not recommending to directly change the function look at overriding it)

later
M

romand@drupal.org’s picture

romand@drupal.org commented

Seems it's work after adding this function to template.php:

function themename_item_list($items = array(), $title = NULL, $type = 'ul', $attributes = NULL) {
  static $count = 0; //add
  $output = '<div class="item-list">';
  if (isset($title)) {
    $output .= '<h3>'. $title .'</h3>';
  }

  if (!empty($items)) {
    $output .= "<$type" . drupal_attributes($attributes) . '>';
    foreach ($items as $item) {
      $zebra = ($count % 2) ? 'odd' : 'even'; // add
      $count++; // add
      $attributes = array();
      $children = array();
      if (is_array($item)) {
        foreach ($item as $key => $value) {
          if ($key == 'data') {
            $data = $value;
          }
          elseif ($key == 'children') {
            $children = $value;
          }
          else {
            $attributes[$key] = $value;
          }
        }
      }
      else {
        $data = $item;
      }
      if (count($children) > 0) {
        $data .= theme_item_list($children, NULL, $type, $attributes); // Render nested list
      }
      $output .= '<li class="' . $zebra . '"' . drupal_attributes($attributes) . '>'. $data .'</li>'; //changed
    }
    $output .= "</$type>";
  }
  $output .= '</div>';
  return $output;

Is this right solution?

summit’s picture

summit commented

Hi,

I think you misted a } on the end.
Do you also know how to get rid of the annoying empty line between two variabels?
See http://www.vindtocht.nl the blocks are using item-list, but I can't get rid of the empty line between the nodes..\

greetings,
Martijn

vood002’s picture

vood002 commented

Thanks, this worked for my D6 build

sense-design’s picture

sense-design
sense
Primary language German
Location Münster
commented

This is an update to work with "first" and "last" classes

function THEMENAME_item_list($items = array(), $title = NULL, $type = 'ul', $attributes = NULL) {
  static $count = 0; // added
  $output = '<div class="item-list">';
  if (isset($title)) {
    $output .= '<h3>' . $title . '</h3>';
  }

  if (!empty($items)) {
    $output .= "<$type" . drupal_attributes($attributes) . '>';
    $num_items = count($items);
    foreach ($items as $i => $item) {
      $zebra = ($count % 2) ? 'odd' : 'even'; // added
      $count++; // added
      $attributes = array();
      $children = array();
      if (is_array($item)) {
        foreach ($item as $key => $value) {
          if ($key == 'data') {
            $data = $value;
          }
          elseif ($key == 'children') {
            $children = $value;
          }
          else {
            $attributes[$key] = $value;
          }
        }
      }
      else {
        $data = $item;
      }
      if (count($children) > 0) {
        $data .= theme_item_list($children, NULL, $type, $attributes); // Render nested list
      }
      if ($i == 0) {
        $attributes['class'] = empty($attributes['class']) ? 'first' : ($attributes['class'] . ' first');
      }
      if ($i == $num_items - 1) {
        $attributes['class'] = empty($attributes['class']) ? 'last' : ($attributes['class'] . ' last');
      }
      $attributes['class'] .= ' ' . $zebra;
      $attributes['class'] = trim($attributes['class']);
      $output .= '<li' . drupal_attributes($attributes) . '>' . $data . "</li>\n";
    }
    $output .= "</$type>";
  }
  $output .= '</div>';
  return $output;
}