First class Drupal blocks

When working on more complex themes the default CSS classes assigned by the Drupal system do not provide enough distinction to effectively style blocks. It would be useful to have classes assigned that identify the following:

The first and last blocks
The block number within each region
The block number within the page
An alternating even/odd class for zebra striping

To accomplish this we have to create two custom override functions in the template.php file.

First and Last block classes

The first function looks at the blocks in each region and assigns the first and last classes.

function theme_blocks($region) {

  $output = '';

  if ($list = block_list($region)) {

    $counter = 1;

    $total = count($list);

    foreach ($list as $key => $block) {

      // create the first_last block classes

      if ($counter == 1) {

        $block->first_last = "block-first";

      } else if ($counter == $total) {

        $block->first_last = "block-last";

      };

      $output .= theme('block', $block);

      $counter++;

    }

  }

  $output .= drupal_get_content($region);

  return $output;

}

Counts and Even/Odd Zebra Stripes

The second function processes each block and assigns the rest of the classes. It then combines the classes into a block variable $classes that can be used in the block template page block.tpl.php.

function theme_preprocess_block(&$vars, $hook) {

  $block = $vars['block'];

  // New classes for blocks.

  $classes = array('block');

  $classes[] = 'block-' . $block->module;

  $classes[] = 'region-' . $vars['block_zebra'];

  $classes[] = $vars['zebra'];

  $classes[] = 'region-count-' . $vars['block_id'];

  $classes[] = 'count-' . $vars['id'];

  if (!empty($block->first_last)) $classes[] = $block->first_last;

  // New variable for block classes.

  $vars['classes'] = implode(' ', $classes);

}

Using $classes in block.tpl.php

Finally we can use the new classes in the block.tpl.php file

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="<?php print $classes; ?>">

<?php if ($block->subject): ?>

  <h3><?php print $block->subject ?></h3>

<?php endif;?>

  <div class="content"><?php print $block->content ?></div>

</div>

Function names and template cache

Remember that custom theme override function should be renamed to match the theme name. If the template we are working on is called cool_design then