Genesis Lesson 2 - Layout and Width

Please note that this tutorial is specific to Genesis 6.x-1.2, although the process almost exactly the same for 6.x-2.x except the main CSS file is now page.css and the use of genesis_SUBTHEME.css is deprecated.

Additionally in 6.x-2.x the 7 layouts have been replaced with a more flexible approach using 4 layout methods. To have different width sidebars you will need to copy/paste the CSS code for your preferred layout from layou.css to your subthemes page.css file and make modifications there. I will be updating this page in due course with a short video showing how to do this. Thank-you.

This tutorial walks you through the process of modifying the layout for your Genesis subtheme (Genesis includes 7 pre-configured layouts) and setting the width - either fluid or fixed.

Genesis is a rapid development theme framework for the Drupal content management system.

Requirements

1. A text editor - in the video I am using Dreamweaver 8 in code edit mode.
2. Drupal 6 installed on your testing server. I use Wampserver on my localhost and have installed Drupal.
3. Genesis theme framework must be uploaded to the server as well, all subthemes require the core framework as a dependency.

The basic steps

1. To modify the layout - change the body ID selector to match your preferred layout (in your subthemes page.tpl.php file).
2. To change the width edit the .width class in your subthemes CSS file. User percentages for fluid width, pixels or ems for fixed width.

Tips for the Pro's

Lets say you want one layout for the homepage, and another layout for all other pages.

1. Copy and paste your subthemes page.tpl.php file and rename the copy to page-front.tpl.php
2. Give it a different body ID selector, for example <body id="genesis_4">, save and upload the new template.
3. Clear the theme registry in Performance settings (Clear cached data) if your changes don't show up immediately.

WOW, wasn't that easy!

Screen shots of all the layouts

The label above each layout is the id selector. This is all covered in great detail in layout.css in the base theme.

Last updated 24th April, 2009 - 1:20am