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:
layout[unit-variant]
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).
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.
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:
/genesis/genesis/css/layout-overrides/layout-override-examples.css
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
- Copy and paste a Gpanel into your page.tpl.php file.
- Uncomment the matching regions in your subthemes info file.
- 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.
Comments
Copy templates you want to change to your subtheme's folder
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. ;)
Where is the body id?
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
Because it's in the
Because it's in the html.tpl.php.
The article needs udating.
html.tpl.php??? there is no
html.tpl.php??? there is no such file
you place that in the BODY of
you place that in the BODY of you page.tpl.php
...
In Drupal 6 its in page.tpl.php, in Drupal 7 its on html.tpl.php (this new template was introduced in Drupal 7).
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Layout problem in IE 6
My site http://healthy-ojas.com 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.