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

  • theme_blocks should be renamed cool_design_blocks
  • theme_preprocess_block should be renamed cool_design_preprocess_block

Whenever adding new functions to the template.php file it is wise to flush the template cache to make sure that changes take affect.

Add your comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  .d58MEb.    .d58MEb.    .d@85Eb.    .d58MHb.    .dH@8Hb.  
d8MP YH9b d8MP YH9b dE@P YH9b dEHP YS@b dE5P YH5b
E89 E89 YE9b. d5HP E@H .dS5P
.dHEP .dHEP "YS85EE" 9H9d5HHb. E@8@"
.odE99P" .odE99P" .d8P""YHb. 59EP "YH8b "YEb.
d5SP" d5SP" S8E 85H 9S9 E99 E5@ 9@M
SM8" SM8" Y8Sb d@MP Y5Eb d@MP Y59b dH8P
8HS9E8ME@ 8HS9E8ME@ "Y@M@8P" "YS@H9P" "YE955P"