On Line Websites
How to add Regions to your Zen Base Theme
Introduction
Base themes are great and the documentation supplied with Zen is the best.
In addition the Zen Gardens website which illustrates many example sites based around the Zen Starter Kit, but goes one step further to include the CSS code so you can learn more.
However, only a limited number of Drupal Regions are available in the starter kit. Such as Header, Footer, Left and Right and you need more than that in your new Drupal website.
For instance most sites you like the layout of have a set of Footer Positions which enable a neat summary at the base of the site with links to other sites, or links to interesting aspects of your website. Chances are that this would be 4 or 5 Boxes at the bottom. Of course it’s for SEO purposes and these would contain relevant related Anchor Text tags too. These are also a pleasant reminder to your website visitors what’s on offer at your site as they proceed to scroll down to the bottom of the page.
Maybe you need to same elements available at the top of the site too. You can do this easily with Drupal and the Zen Starter Theme.
Overview
This article supplies example code that may be of some value as you learn the methods associated with Drupal Themes. Often Drupal related documentation focuses in on Theming of particular Node or Page – but you just want a template with some common options at present.
Today’s article focuses on the Back Bone specifics of adding new regions and uses CSS to represent these regions to automatically scale in pixel percentage across the page in the form of elements. This depends on how many elements (Drupal speak Regions) are published for that page. So it’s neat and scales to cater for your published content as well. However typically the Footer Region will not need this function. But like all good things Drupal, it can do this too!
File Modifications Required
Lets assume we are going to add 5 New Regions to a Footer area at the base of the site and the site uses the Fixed Template supplied in the Starter Kit. (I don’t talk about fluid layouts)
- Xxx.info file
- Layout_fixed.css
- Page.tpl.php
These are presented so you know the areas that are required. What do they do and where can they we found in the Zen Template Starter Kit is discussed below. Also code snippets to send you on you way.
xxx.info
Located in the root directory of the Starter kit. Call it what ever you like, but follow the instructions in the readme.text files. Sufficient documentation is already available to create a new Zen based Starter Theme and name it ‘foo’ and that’s not today’s focus.
xxx.info defines the new regions and makes this information available to Drupal core.
Add this code into the file
regions[bottom_first] = bottom_First
regions[bottom_second] = bottom_Second
regions[bottom_third] = bottom_Third
regions[bottom_fourth] = bottom_Fourth
regions[bottom_fifth] = bottom_Fifth
This is the starting point of adding 5 new regions in the footer area.
Page.tpl.php
Located in the Templates folder of the Zen Starter Kit find the page.tpl.php file as we need to add some php snippets to call and screen print data from the database. Where you place this is important and to achieved the desired result in this instance would be to place this code directly beneath the following statements
<?php print $sidebar_first; ?>
<?php print $sidebar_second; ?>
</div></div> <!-- /#main, /#main-wrapper -->
Cut and paste this stuff…..
<?php if($bottom_first || $bottom_second || $bottom_third || $bottom_fourth || $bottom_fifth): ?>
<div style="clear:both"></div>
<div id="bottom-teaser" class="in<?php print (bool) $bottom_first + (bool) $bottom_second + (bool) $bottom_third + (bool) $bottom_fourth + (bool) $bottom_fifth;?>">
<?php if($bottom_first) : ?>
<div class="column A">
<?php print $bottom_first; ?>
</div>
<?php endif; ?>
<?php if($bottom_second) : ?>
<div class="column B">
<?php print $bottom_second; ?>
</div>
<?php endif; ?>
<?php if($bottom_third) : ?>
<div class="column C">
<?php print $bottom_third; ?>
</div>
<?php endif; ?>
<?php if($bottom_fourth) : ?>
<div class="column D">
<?php print $bottom_fourth; ?>
</div>
<?php endif; ?>
<?php if($bottom_fifth) : ?>
<div class="column E">
<?php print $bottom_fifth; ?>
</div>
<?php endif; ?>
<div style="clear:both"></div>
</div>
<?php endif; ?>
Layout_fixed.css
This file is located in the Zen Starter Kit folder and specifically beneath the CSS directory.
Cut and paste this code to ensure the new positions present themselves across the page and scale automatically
Cut and past this code….
-------------------------------------------------------------- */
#bottom-teaser {
width:960px;
margin: 10px auto 10px; font-size: 10px;
}
#bottom-teaser .column {
float: left;
}
#bottom-teaser.in1 .column {
width: 100%;
}
#bottom-teaser.in2 .column {
width: 50%;
}
#bottom-teaser.in3 .column {
width: 33%;
}
#bottom-teaser.in4 .column {
width: 25%;
}
#bottom-teaser.in5 .column {
width: 20%;
}
#bottom-teaser .block {
padding-left:15px;
padding-right:15px;
}
/* Bottom teaser-end - I added this
-------------------------------------------------------------- */
Conclusion
That’s about it.
You should be able to go back the Drupal Administrator and create 5 New Blocks and define these to appear in your newly created Drupal regions.
Good Luck and happy Drupal Theming