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.
