Skip to main content

Zen Development / Visualization Subtheme: zen_wireframe

In:
25Feb2009

I thoroughly enjoy working with the Zen theme framework for Drupal. I wanted a way to easily illustrate what block level elements are provided by the default Zen theme in a visual way using live site data, so I made this subtheme: zen_wireframe. zen_wireframe outlines and labels all Zen block level elements (to aid in page layout visualization). It should work with either the layout-fixed.css or layout-liquid.css Zen layouts (by default it uses layout-fixed.css).

This subtheme's page.tpl.php adds labels to all page block level elements, and its wireframes.css adds wireframes and colorful boxes for all Zen block level elements. Rainbow and greyscale wireframing is available (see wireframes.css) when wireframes are enabled in the theme settings.

zen_wireframe subtheme screenshot

As you can see from the above screenshot, it isn't exactly a usable theme, but it does illustrate the Zen provided block level elements.

I've not yet applied for CVS access to Drupal.org, but once I do, I will submit this as a proper Drupal theme. For now I'm just going to make it available here. Download the zen_wireframe theme.

Feb. 26 Update: I've made a few changes and squashed a few bugs in the layout. In general this version works better with blocks and navigation elements.

Comments

Post new comment

Warning
I strongly encourage and welcome links and feedback. However, this site is moderated and comments with inappropriate links are rejected. Please do not post a one-line "Me too" or "Great post!" comment just so you can link to your site. Thank you for your understanding.
The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.
  • Use to create page breaks.

More information about formatting options