CSS classes field added by the Block Class module on Block configuration form.

Block Class allows users to add classes to any block through the block's configuration interface. By adding a very short snippet of PHP to a theme's block.tpl.php file, classes can be added to the parent <div class="block ..."> element of a block. Hooray for more powerful block theming!

Installing the Drupal 7.x version

  1. Enable the module
  2. To add a class to a block, simply visit that block's configuration page at Administration > Structure > Blocks

Installing the Drupal 6.x version (6.x-1.3)

  1. Enable the module
  2. Add this snippet to your theme's block.tpl.php file (see detailed instructions below): <?php print block_class($block); ?>
  3. To add a class to a block, simply visit that block's configuration page at Administration > Site Building > Blocks

How to add the PHP snippet (7.x-2.x, 7.x-1.x, 6.x-1.3 or lower)

Here's the first line of the Garland theme's block.tpl.php prior to adding the code:

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

And here's what the code should look like after adding the snippet:
For 7.x-2.x:

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

For 7.x-1.x, 6.x-1.3 or lower:

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="clear-block block block-<?php print $block->module ?> <?php print block_class($block); ?>">

IMPORTANT: Remember to separate the PHP snippet from the existing markup with a single space. If you don't add the space, your CSS classes could run together like this: block-modulecustomclass instead of block-module customclass.

Installing the Drupal 6.x dev version

  1. Enable the module
  2. Add this snippet to your theme's block.tpl.php file (see detailed instructions below): <?php print $block_classes; ?>
  3. To add a class to a block, simply visit that block's configuration page at Administration > Site Building > Blocks

How to add the PHP snippet (6.x-dev, 6.x-1.4 or greater)

Here's the first line of the Garland theme's block.tpl.php prior to adding the code:

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

And here's what the code should look like after adding the snippet:

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

IMPORTANT: Remember to separate the PHP snippet from the existing markup with a single space. If you don't add the space, your CSS classes could run together like this: block-modulecustomclass instead of block-module customclass.

Similar modules

  • Block Attributes: For users looking for more theming flexibility, capabilities or with more advanced requirements, the Block Attributes module allows to specify additional HTML attributes for blocks, through the block's configuration interface, such as HTML id, style, title, align, class and more.

 

Supporting organizations: 
Creation and ongoing support and development of the module.
Development of the 7.x-2.x branch and maintenance of the module.

Project Information

Downloads