Quick Way to Customize a Block's theme

Published June 22, 2009

The Block Class module allows you to add CSS class names to any block on your site via the block's configuration page. This is extremely useful if you want to make just one of your blocks look a little bit different than the others.

For example, let's say you want the header of one of your blocks to be red. Here's how you'd do it:

  1. Download and enable the Block Class module
  2. Add the magic snippet to your block.tpl.php file (see the Block Class's readme.txt file for details)
  3. Go to admin/build/block and click the "configure" link for the block you'd like to modify
  4. Add the CSS class name "redheader" to the "CSS Classes" input field
  5. Add the .redheader definition your site's CSS file :

    .redheader {
    background-color: red;
  6. Clear the cache and off you go!

Sign up to receive email notifications of whenever we publish a new blog post or quicktip!