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);

  $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>

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.
     dHM8H    .d9HE9b.    .d@MHEb.    .d9HE9b.    dSMM   
dSPHM9 dH5P Y@@b d8EP YM9b dH5P Y@@b dHH9E
dHP 9MH @SS .dS@P @SS EE9
d9P 8@9 .d9@P M99M" .d9@P 9H8
dMM 98M .od5E@P" "YSb. .od5E@P" @@E
S9SEE9EH9S d5@P" H@8 M98 d5@P" 8ES
S8M 8MS" YSHb d9EP 8MS" 988