Last updated 23 March 2011. Created on 5 July 2010.
Edited by Mojah. Log in to edit this page.

Opengrid was developed by Mojah Media for the purpose of having an uncluttered and coherent interface through which various grid based layouts could be configured without having to delve into css or theme files. The theme serves as an ideal starting point and foundation upon which to design and test out different ways to present information.

Here's a short guide to get you going.

Pre-configuration Layouts Based on Active Sidebars Regions.

Opengrid has by default two lateral regions: first and second sidebar. These regions are visible only when there is content assigned to them, in that case it is said that the region is active.

Depending on which side regions are active in a given page, you may have four situations:

  • neither sidebar is active
  • both sidebars are active
  • only the first sidebar is active
  • only the second sidebar is active

Within the theme settings page can be seen the form that provides pre-configured the layout in each of these cases, allowing if necessary, to set different widths or positions in each of the regions, for each of the four situations listed above.

Grid Actions - How to set the grid.

When we use a grid-like framework, the width of our layout is divided into columns, the number of columns depends on the value chosen for the container, in our case the options will be 12 or 16 columns - with a fixed width for each column using the fixed container; or a fluid width using the liquid container.

Having defined the grid type, the layout is split in that number of columns, then you can begin to configure each region as a function of the grid.

Configuration options:

  • Width: width of the region in number of columns
  • prefix: padding left in columns
  • Suffix: Padding right columns
  • Push: Move right the region, in number of columns
  • Pull: Move left the region, in number of columns

Considerations about Options Push & Pull.

The region where the main content is loaded is above the lateral regions, if we want to then show one of the sidebars in front of the region where the main content of the page is loaded, you should make use of push-pull options.

Suppose our design needs to show the first sidebar to the left of the main content, where also the dimensions in columns are:

  • container: 16 columns
  • sidebar first region: 5 columns
  • Main content area: 10 columns

In this case we move:

  • the region's main content to the right by an amount equal to the width of the first sidebar, ie Push: 5 columns
  • the sidebar to the left first by an amount equal to the width of main content region, ie 10 columns Pull

About Opengrid Layout - Containers & Regions

Opengrid is a theme whose structure is built using a system of grids. One of the major limitations that can be found from the design point of view of this type of framewprk, is the fixed width. Some designs need backgrounds that span the entire width of the screen, where clearly a fixed width would make it impossible to use a theme based on grids.

To circumvent this problem Opengrid implements a system of independent containers, thus each region is surrounded by a div container, said container in turn is surrounded by a div, the latter div being independent of the grid system, allowing for a background that can be applied to the entire width of the screen, thus removing the limitation mentioned above. Where not required for these backgrounds can be used as general container the div # page.

Extra Classes - Adding Personal Classes

Perhaps the most difficult concept to understand when you start working with a grid-like system, is the investment in the workflow of labor between HTML and CSS. Conventionally, at least for most people, the first step is to set out the structure of the HTML page, defining id's and classes to be later styled by css. By working with grids this process is reversed, thus we have a CSS file with existing classes that we apply to our HTML layout in order to build the site.

We define and load classes (now converted into variables) via the theme settings page that are applied to the html generated by Drupal and the theme engine. This methodology opens up a range of options regarding how to apply styles to our theme. In the same way we apply classes/variables related to the grid system, we can create new style sheets with pre-defined classes that may be applied to each region.

Example:Styles for lists by region.

Let's define a class style sheet with styles that apply to lists.

/ *** CSS *** /
.Red-navigation ul li a (
  color: red;
. Blue-navigation ul li a (
  color: blue;
. Green-navigation ul li a (
  color: green;

now, from the theme settings form, look for the section of "both sidebars active" and for the regions main , first and second sidebar assign each one a different class from which we just created,

  • main -> extra class: red-navigation
  • first sidebar -> extra class: blue-navigation
  • second sidebar -> extra class: green-navigation

For each of the regions will have lists of links of different colors.

The example, although simple, gives an idea of what is possible to achieve with pre-configured css classes. In terms of reusable css, it is very interesting.


Drupal starter theme
Drupal foundation theme
Drupal base theme
Drupal grid base theme

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