Web Designer / Developer Drupal | Commerce | Themes | UK

960 grid-system Zen sub theme for Drupal 6

960 grid-system Zen sub theme
The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.
Smashing Magazine

This is a Drupal 6 Zen sub Theme. It is taken from the excellent theme by Dvessel called NineSixty based on the 960 grid-system

The 960 Grid System was created by Nathan Smith as a way to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

You can download this Drupal 6 theme below in attachment. It will be added as a project to the drupal.org later.

I know you can create sub theme for nineSixty theme but since i used the Zen theme a lot and prefer that it already has some nice theme settings, i thought i should just adapt the Ninesixty theme to Zen instead.


  • Download Zen Theme for Drupal 6 version (http://drupal.org/project/zen) and unzip this theme into /sites/all/themes/
  • - Quick install guide: You must install the base Zen theme and then install this sub theme for it to work properly (place it in a directory like /sites/all/themes/).
  • Login as admin go to Administer --> themes and enable '960 Grid System (Zen sub theme)' theme (/admin/build/themes)
  • You can configure the theme settings. To do this click on 'configure' link next to the theme in the theme listing page.

What's different in this theme compare to the original NineSixty theme:

  • It inherits all the theme settings from the Zen theme such as inline block editing
  • Added Debug mode (showing grid on the page) so you can enable/disable it in the theme settings (/admin/build/themes/settings/ninesixty)
  • Additional regions added: 'content top' and 'content bottom' so blocks can be assigned to the top or bottom of the main content area.

UPDATE (28th June)

This theme has now been committed to Drupal.org theme project page (http://drupal.org/project/zen_ninesixty)

UPDATE (5th July)

Fixed some bugs and updated this theme to zen_ninesixty-6.x-2.0

Package icon zen_ninesixty-6.x-2.0.zip0 bytes

Related Posts


Off the top of my head, create a new region called 'top-left' just above the 'left' region in your page.tpl.php file and use .container-16 .grid-8 as the css class.

This site uses the css blueprint framework before i created the zen 960 sub theme which is based off 960 theme. I haven't gotten around to updating this site to use the Zen 960 sub theme yet.

Once i re-designed my site i plan to release this theme to the community. Not sure when i'll get around to it, busy with work just now.

Yes, you need to install both themes since it uses the Zen theme as the base theme. However, if you create a sub theme you can reference Zen 960 as the base theme for your sub theme so it'll inherit the settings from it.

You do this in your .info file for your new theme, something like:

base theme = zen_ninesixty

Try copying the theme-settings.php file from zen_ninesixty into your new sub theme.

Add new comment