Customizing the Drupal 6 LiteJazz Theme - Customize User Regions

Submitted by nigel on Friday 23rd October 2009

The Litejazz theme - and now cloned to be my own Beezee theme - has a number of regions where content can be placed. A diagram of this can be found in the Litejazz manual. This is extremely powerful and one of the 'must have' features. I particularly like user regions 4,5 and 6 which are placed above the footer, and have used that feature on my site as you can see.

However, out of the box the three regions align all the text to the left. That's fine for user region 4 - it looks correct. Do this on region 5 (the one in the middle) and it looks slightly offset to the left and not in the centre where you'd expect. Region 6 looks the worse with the content skewed crazily to the left.

So it is time to theme these regions. As ever, there is more than one way to achieve this. All we really want to do is change user region 5 to have centrally aligned text, and region 6 to have right aligned text. That can be accomplished using css only. But let's imagine for a second that we wanted something much more profound - say adding graphics and complex text manipulation.

Here we would need to create a new template file. The usual template file for a block is block.tpl.php. So what should we call a template file to override this? The answer lies in the Devel module. Install this extremely handy module in Drupal in the normal way and ensure that Themer Info is enabled. Now you will see a checkbox in the lower left of your screen. Enable this and move your mouse over, and click, the region you want to inspect. So click over region 5 (the one in near the bottom, in the centre. You will see in the Drupal Themer Information window (top right) a list of 'candidate template files'. This is giving you a pointer as to what to call an override template file. Which one you select would be dependent upon the scope of what you are trying to achieve. For instance, creating a new block.tpl.php file would override all blocks, including those in the sidebars for example. Creating a new block-block-3.tpl.php would only affect that particular block.

As previously mentioned, on this occasion, we don't need new template files. We just need to add a little css code to realign the text. But how do we do this? The answer is quite easy - it is in the source code of the HTML sent to your screen. Add the content you want - such as the 'Legal Stuff' links in the bottom right of my screen. Load any page, then right click and load the source code. Search for the phrase 'Legal Stuff'. That will locate you near the formatting for this block. Above the text you will see something similar to

<div class="block block-block unstyled-block" id="block-block-3">
Yours will be slightly different - but the id tag will be of the format block-block-n. This id needs to go into your style.css file. See below, and see I have also added css for block-block-5 which on my system is the block in region 5 - but yours could be different.
#block-block-3 {
   text-align: right;
#block-block-5 {
   text-align: center;
Flush the cache and you should now have right and centred text in regions 5 and 6.
blog terms
Drupal Drupal 6 Litejazz