960 grid-system Zen sub theme for Drupal 6

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.

INSTALLATION:

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

Trackback URL for this post:

http://duvien.com/trackback/254

Attachment	Size
zen_ninesixty-6.x-2.0.zip	231.6 KB

Sun, 05/07/2009 - 20:59 — duvien

Bookmark/Search this post with:

Comments

toplum

Tue, 24/08/2010 - 09:43 — toplum (not verified)

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

create another sub theme?

Sun, 14/03/2010 - 06:59 — brunorios (not verified)

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!!

See comment:

Sun, 14/03/2010 - 20:09 — admin

See comment: http://duvien.com/blog/960-grid-system-zen-sub-theme-drupal-6#comment-1786

Thanks

and the theme settings?

Mon, 15/03/2010 - 20:59 — brunorios (not verified)

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?

thanks!

Try copying the

Mon, 15/03/2010 - 21:32 — admin

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

worked

Mon, 15/03/2010 - 22:52 — brunorios (not verified)

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!

If I want to create a theme

Sun, 21/02/2010 - 23:10 — Adrian (not verified)

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

Sun, 21/02/2010 - 23:17 — admin

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

How to

Mon, 05/10/2009 - 01:57 — dok (not verified)

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,

Mon, 05/10/2009 - 22:48 — admin

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.