How to add a sidebar-top region in Genesis

3 Comments
Latest Comment

Submitted by Jeff Burnz on Saturday, August 22nd, 2009

The Genesis starter theme for Drupal supports 3 different layouts including both sidebars on either the left or right of the main content. In this configuration it can be useful to have a sidebar-top region that spans the width of both sidebars, but sits on top of them. This tutorial shows you how to do this in Genesis.

An example of when you might want to do this would be to display a fixed height banner or contextual ads. Its not good for content that will change in height as it could overflow the div—while the fixed height limitation could be overcome, this tutorial is meant for beginners and is a simple strait forward explanation of how to add new regions in Drupal and how to position the new sidebar-top region using CSS.

Overview

Add a new region to your subthemes .info file.
Print the new region in page.tpl.php.
Add CSS to position the new region correctly.

For the purposes of this tutorial I am using the genesis-2c layout, which places both sidebars on the right. You will need to make adjustments if you have altered the default width of the sidebars (default is 240px).

1. Add a new region

Open up your subthemes .info file and add the new region. You can call it whatever you want and in the example below I have called it sidebar_top

Note: after you have saved the info file you need to clear the theme registry so the new region will show up on the blocks page. By far the easiest way to do this is by using the Admin Menu module, which has a link to do this included under the Drupal links (the Drupalicon on the left). Otherwise go to Performance settings and clear cache data.

;----------// Regions

  ; You can define new regions here.

  regions[leaderboard]        = Leaderboard
  regions[header]             = Header Blocks
  regions[secondary_content]  = Secondary Content
  regions[content_top]        = Content top
  regions[content]            = Main Content
  regions[content_bottom]     = Content bottom
  regions[tertiary_content]   = Tertiary Content
  regions[sidebar_top]        = Sidebar Top ; Our new region
  regions[left]               = Sidebar Left
  regions[right]              = Sidebar Right
  regions[footer]             = Footer

2. Print the new region

Now in page.tpl.php we need to print the new region. The easy way is to just copy/paste one of the existing sidebars and change the variable name and add a new id, or just copy and paste the new sidebar_top code in the snippet shown below. Note that I have used id="sidebar-top".

Place the new region above the other sidebars. It should look like the following code snippet:

      <?php if ($sidebar_top): ?>
        <div id="sidebar-top" class="section sidebar region"><div class="sidebar-inner">
          <?php print $sidebar_top; ?>
        </div></div> <!-- /sidebar-top -->
      <?php endif; ?>
      
      <?php if ($left): ?>
        <div id="sidebar-left" class="section sidebar region"><div class="sidebar-inner">
          <?php print $left; ?>
        </div></div> <!-- /sidebar-left -->
      <?php endif; ?>

      <?php if ($right): ?>
        <div id="sidebar-right" class="section sidebar region"><div class="sidebar-inner">
          <?php print $right; ?>
        </div></div> <!-- /sidebar-right -->
      <?php endif; ?>

3. Add CSS to position everything

So now we have to position the new sidebar-top region so it displays correctly.

First we float it left.
Then we need to give it some negative margin-left to pull it into position.
We need to set a height on it.
Finally we need to add margin-top to the other sidebars so they don’t overlap the new sidebar top.

The margin top for the left and right sidebars needs to be more than the height of sidebar-top. For those of you who know Zen and how it positions the primary navigation, this is pretty much the same sort of idea.

Heres the CSS - the screenshots below show the CSS and regions using Firebug. Place the CSS in page.css with the other sidebar styles. You will notice I have added 20px to the margin-top value so there is a horizontal gutter.

#sidebar-top {
  background: #EEE; /* background color for dev only */
  float:left;
  height:240px; /* set a height on the new region */
  margin-left:-500px; /* use negative margin to pull the sidebar-top into position */
  width:480px; /* set a width equal to left + right sidebar widths */
}

#sidebar-left,
#sidebar-right {
  margin-top: 260px; /* use margin top to push the left and right sidebars down */
}