Custom Regions using Drupal and Zen Subthemes

Having the ability to layout each page according to your own specifications is a must when designing a web site. In Drupal development, creating custom page regions gives control over content areas to achieve a personalized look. I'll walk you through creating two regions that split the content area in half.

Prerequisites: A basic understanding of Drupal and how it works, a Drupal site that you have access to installing themes and a basic text editor.

1. If you haven't already, download and install the Zen Subtheme into the themes directory and ensure that it is functioning properly

2. Copy the STARTERKIT folder from the Zen folder into the themes directory and follow the instructions in the enclosed readme.txt file for standard configuration. Let's call it myzensubtheme for this tutorial

3. Once the subtheme is configured you will need to add the regions to the info file for Drupal to know to look for them. Open myzensubtheme.info, you will see a section for page regions including 'regions[sidebar_first]  = First sidebar'. Add the following two lines in this area.

regions[mid_left] = Content Middle left
regions[mid_right] = Content Middle Right

*you can change the name of the region by changing the mid_left or mid_right text as well as changing the label of the region by changing the Content Middle Left/Right text. I inserted the lines after the content top region to keep them in order that they would appear.

4. To add the region to your pages copy 'page.tpl.php' from the themes -> zen -> templates directory to the theme -> myzensubtheme -> themplates directory, open the file in your text editor and add each of these lines encased in PHP tags above 'print $content_bottom'

print $mid_left;

print $mid_right;

*don't forget the PHP tags

5. Open layout-fixed.css from myzensubtheme's CSS directory in your text editor. You will need to add the following lines to this file which will give the regions a width of 50% and floating left so they will be side by side.

.region-mid-left .section {
    margin:0 0 0 0;
    padding:0 0 0 0;
}
.region-mid-right {
    float:left;
    clear:none;
    margin-top:10px;
    margin-right:0px;
    width:50%;
}
.region-mid-right .section {
    margin:0 0 0 0;
    padding:0 0 0 0;
}

The regions were placed above the content bottom region and inside the content div tag so they will be half the span of content whether you have one, two or no sidebars. If you need a more static region change accordingly.

See custom regions in use on Try2Stop.Us/About


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

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