Last updated 27 August 2009. Created on 20 April 2009.
Edited by bekasu, Jeff Burnz. Log in to edit this page.

The Genesis starter theme has very flexible layout options—you can choose where to position the sidebars and whether to use pixels, percentages or ems to set the width of the sidebars.

This looks complicated but its actually very simple. First you choose which layout you want (see graphic below) and what unit of measure you want to use (ems, percentages or pixels) and then apply that layout to your page.tpl.php.

The layouts are all pre-configured so applying a layout is a simple matter of copy/paste.

Jump to:
Applying the layout to your page.tpl.php.
Setting the page width.
Modifying a layout.
Using Gpanels.

About the Layouts

Layouts and Unit Variants

Tip: see layout.css in /genesis/genesis/css/

"Layout" determines the sidebar configuration
"Unit variants" are the unit of measure used to set the width of the sidebars.

Genesis uses the following convention:

  • genesis-1 standard 3 column layout.
  • genesis-2 both sidebars on the right.
  • genesis-3 both sidebars on the left.
  • a variants are always ems.
  • b variants are always percentages.
  • c variants are always pixels.

The layouts are set via a CSS id selector, which follows this schema:


For example - #genesis-1a, where genesis-1 is the layout and a is the variant.

Using these conventions we come up with the following layouts (see layout.css, these are all preconfigured).

Only local images are allowed.

Applying the Layout to your page.tpl.php

To set the layout simply copy and paste the correct id selector to the body tag of your page.tpl.php. In the following graphic on line 101 you can see the default id selector is genesis-1a.

All the layout id's can be found in /genesis/genesis/css/layout.css. You can play around trying out different selectors to see how they affect the layout. Try zooming the text size and resizing the browser window to see how they react.

Only local images are allowed.

Setting the Page Width

To set the page width you need to edit the page.css file. You will find this in your subthemes /css folder, for example genesis_foo/css/page.css.

Open up that file and scroll down to around line 106, where you will find the selector for the container div. The #container div is the main wrapper div.

Here is a snippet of code from genesis_SUBTHEME/css/page.css. As you will see there are plenty of instructions and comments right in the CSS file. This is standard for all Genesis files, you will normally find comments in most files and README files in most directories.

Set the width on the #container selector—you can see the default is 100%:

 * Width Setting
 * Genesis supports Elastic, Fluid and Fixed width values.
 * Elastic layouts are dynamic and will expand or contract when 
 * the font size is changed. Fluid widths change when the browser 
 * is resized and fixed width layouts stay the same width even 
 * when the broswer is resized or the font size is changed.
 * Elastic layouts use ems,       e.g. 80em
 * Fluid layouts use percentages, e.g. 85%
 * Fixed widths use pixels,       e.g. 960px
#container {
  width: 100%;
/* max-width: 1100px; set a maximum width */
/* min-width: 960px; set a minimum width */


Modifying a Layout

To modify a layout open up layout.css, copy the entire layout and paste it into your subthemes page.css file. This will override the default in layout.css.

Genesis includes 3 example overrides you can use as a guide—take a look in:

Below is an example of a "layout", this is genesis-1a:

 * #genesis-1a
 * Unit:   em
 * Layout: Standard 3 col - left/content/right
#genesis-1a .two-sidebars  .content-inner {margin      : 0 22em;}
#genesis-1a .sidebar-left  .content-inner {margin-left :   22em;}
#genesis-1a .sidebar-right .content-inner {margin-right:   22em;}
#genesis-1a #sidebar-left  {width: 20em; margin-left: -100%;}
#genesis-1a #sidebar-right {width: 20em; margin-left: -20em;}

This is the genesis-2c layout modified to have 200px width sidebars (the defaults are 240px). I have included comments to explain what each line of the CSS is doing.

/* The first 3 lines control the margins for the main content column (.content-inner) */

/* Both sidebar widths + the width of the gutter between each column */
#genesis-2c .two-sidebars .content-inner{margin-right:440px;}

/* Width of the left sidebar + right gutter */
#genesis-2c .sidebar-left .content-inner{margin-right:220px;}

/* Width of the right sidebar + right gutter */
#genesis-2c .sidebar-right .content-inner{margin-right:220px;}

/* These lines set the width of the sidebars and position them */

/* Position the left sidebar when both sidebars are active */
#genesis-2c #sidebar-left{width:200px;margin-left:-420px;}

/* Position the right sidebar */
#genesis-2c #sidebar-right{width:200px;margin-left:-200px;}

/* Override the position of the left sidebar when the right sidebar is in-active */
#genesis-2c .sidebar-left #sidebar-left{width:200px;margin-left:-200px;}

Heres another example setting different sidebar widths for the genesis_1c layout:

 * #genesis-1c override
 * Unit:   px
 * Layout: Standard 3 col; left/content/right
#genesis-1c .two-sidebars  .content-inner {margin      : 0 290px 0 230px;}
#genesis-1c .sidebar-left  .content-inner {margin-left :   230px;}
#genesis-1c .sidebar-right .content-inner {margin-right:   290px;}
#genesis-1c #sidebar-left  {width: 210px; margin-left: -100%;}
#genesis-1c #sidebar-right {width: 260px; margin-left: -260px;}

Using Gpanels

See /genesis/genesis/gpanels

GPanels are drop in multi-column snippets for displaying blocks in vertical columns, such as 2 columns, 3 columns or 4 columns.

How to use a Gpanel

  1. Copy and paste a Gpanel into your page.tpl.php file.
  2. Uncomment the matching regions in your subthemes info file.
  3. Clear the cache (in Performance settings) to refresh the theme registry.

Now you can add blocks to the regions as per normal. The layout CSS for these regions is already set up so they will work automagically.

See page-gpanel_examples.tpl.php for more information and examples.

Please see the README in the /genesis/genesis/gpanels directory for more information.

Looking for support? Visit the forums, or join #drupal-support in IRC.


Argus’s picture

The above doesn't make clear that best practice dictates that template files you would want to change should best be copied to your subthemes folder.

So if you would want to add changes to page.tpl.php, copy that file from '/genesis/genesis/templates' to a subfolder 'templates' in your subtheme.

And then go wild changing what ever you want.

This way you can easily update Genesis without having to add changes to 'core' Genesis. ;)

Hanscraft’s picture

I've copied the page.tpl.php from the genesis/genesis/templates folder and am now trying to figure out where to place the id="genesis-1a" code. I'm unable to find anything called

Stretsh’s picture

Because it's in the html.tpl.php.

The article needs udating.

marcoka’s picture

html.tpl.php??? there is no such file

marcoka’s picture

you place that in the BODY of you page.tpl.php

Jeff Burnz’s picture

In Drupal 6 its in page.tpl.php, in Drupal 7 its on html.tpl.php (this new template was introduced in Drupal 7).

thiruvelan’s picture

My site is based on genesis theme and working well in firefox and latest internet explorer, but layout get collapsed in IE6. I spend a lot of time without any solution can anyone suggest me a solution.

If I removed the slideshow then the layout looks fine in IE6 otherwise problem. My advance thanks for any help.