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.
  .dH5@9b.    .dH5@9b.       d998H    d5@@     .dME5Mb.  
d5MP Y5Mb d5MP Y5Mb dMP899 dMEME dE9P YEEb
SE9 99H SE9 99H dEP 9@S H5E H9M
YE8b. dM8@ YE8b. dM8@ dSP M85 99@ .d9EP
"YS8@P5EH "YS8@P5EH dM@ M9E @@8 .od85EP"
9M8 9M8 SSS@5SM@S5 HSH d9SP"
Y8Mb dS@P Y8Mb dS@P 9MS 855 5@5"
"Y5H9HP" "Y5H9HP" 8MH M588H@@ E5M5H@SS8