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


[...] more here:  960 grid-system Zen sub theme for Drupal 6 | duvien.com Share and [...]

[...] 960 grid-system Zen sub theme for Drupal 6 | duvien.com [...]

This is awesome as I was just setting up a site with the 960 theme and was thinking about merging it with Zen. Going to download it!

For some reason, Mollom didn't generate an image captcha when I first visited.

Hello I am interested in asking how to make a layout with zen_ninesixty like the one this site http://duvien.com/

What I say is, header , content top. content (both in left ) and the two sidebar (right and left) to the right of content.

I would like to make a loyout as I show here www.ta21.com.ar/theme

From now thank you very much

Sorry for my English.

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.

If I want to create a theme base on zen 960, should zen and zen 960 , both themes should be installed ?

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

Hi, i've downloaded your zen ninesixty sub theme, and i don't know if i create a sub theme of your sub theme, or if i copy your sub theme, rename it and make the modifications...

thank you!!

hi, i've created a sub theme using the zen_ninesixty as base... but now i can't use the theme settings to enable/disable the grid etc... what should i do?


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

I did a copy of theme-settings.php and template.php, replacing zen_ninesixty with zen_ninesixty_mytheme and it works!

thank you for your sub-theme!

Superior thinking demonsttraed above. Thanks!

Hi there, I found your blog via Google while searching and your post looks very interesting for me, I definitely agree with your point here! I am a fan of the material you post and the quality information you offer in your blog! toplum


This link should help walk everyone through how to set up a zen_ninesixty subtheme. Just change out the "sub" references to zen_ninesixty, and the subsub to your custom sub theme name.

This might be a silly question - is there a way to turn on "Wireframes" without having the "960 Grid System Image" being activated? This doesn't seem to work using the "configure" page for the theme in Drupal. Ideas?

960 grid system is getting old now. I got the very nice tutorial about development wordpress theme with 978 grid system. Check following URL

I found this article is really useful for me in my job. Thanks for sharing this useful information.

Add new comment