Theming Drupal Blocks in a Zen Sub-theme

Adding block styles to your sub-theme are important for several reasons. My original objective behind learning to style blocks was to eliminate large  titles and awkward spacing that was inherited from the parent style sheets, especially the H2 tag. Once I got a grasp on how easy it was to style individual blocks or groups of them I started to utilize this more. Blocks.css comes packaged in your sub-theme's CSS directory with many useful classes and ID's listed (commented with their purpose as well).

Taking a look at the page source you can see how styles are applied to blocks...

From Try2Stop.Us's AboutUs page:
div id="block-block-7" class="block block-block region-odd odd region-count-1 count-5"

Div id is specific to this block. By adding #block-block-7 {} to my block.css document and inserting style attributes I can customize the look of only this block without affecting the style of others. This is very useful for blocks that require specific spacing. You can also make a block stand out by using contrasting colors or a different background drawing the visitors attention to the area. CSS standards apply which allow you to customize how tags appear for this div. For example #block-block-7 h2.title {} would affect only the h2 titles of block 7, leaving all others untouched.

The classes run left to right ordered least specific to most specific. The block class will apply to all blocks while the region-count-1 class will only apply to the first block in that region. CSS rules apply the same here as with anywhere else ".CLASSNAME" is added to the stylesheet blocks.css.

Here's a quick explaination of the other classes:

  • block-block applies to all blocks that are blocks, this sounds redundant but you could also have block-menu or block-view because the menu or views modules both have the ability to create blocks.
  • region-odd would style any odd blocks in the region you choose. Using region-odd and region-even works well to Zebra Stripe long sections that would otherwise be overwhelming. If you don't specify the region it will affect them all however.
  • each block has a load order on the page, this load order determines count-x
  • region-count-x refers to the Xth block in the region, very useful for styling the first block

Different Uses of Styling Blocks

  • Set a static width for blocks and float multiple to create a column like effect
  • Use top and bottom borders to differentiate sections
  • Use background images that will catch the readers eye

I can be reached for comments, questions or ideas on twitter @Try2StopUs

Try2Stop.Us | Contact Us | Log In | Try2Stop.Us © 2011