Removing the mittens in Drupal Gardens' June 10 update
by Chris Brookins
When we started planning Drupal Gardens 18 months ago one of our goals was to help break down the barriers to creating stunning Drupal web sites. To that end we developed the Drupal Gardens' ThemeBuilder -- to allow people to point and click to create uniquely designed web sites, even if they don't know what CSS is or don't have the time to learn Drupal 7's powerful theme system. While the early beta versions of the ThemeBuilder went a long way, our beta testers asked for more, and rightly so. At the time it was difficult or impossible to add custom image borders and backgrounds around some sections of their site, and they couldn't implement fluid-width columns, or custom page widths. Also designers with a strong vision spent a significant amount of time undoing the styles in our starter-themes instead of building up their masterpiece from a blank slate. In addition, sometimes there were not enough hooks available to attach custom styles, which prevented our beta testers from creating some amazingly unique designs. Thankfully, the Drupal Gardens team is pretty good at listening. After absorbing the requests that we heard in our forums, usability tests and in many conversations, we decided what was needed was a rethinking of the Drupal Gardens themes from the ground up to address those concerns. In addition, we needed to enhance the ThemeBuilder to let power users access all the underlying structure of the themes without resorting to Firebug and writing CSS (which Drupal Gardens still lets you do -- in the rare case you need to). All of this new power isn't for everyone, and so we made sure most folks can still just pick a theme and click and style it to make it their own. But when the mittens have to come off so you can intricately style your site exactly as needed, you can now turn on a new "Power theming" switch to access a powerful new CSS Navigator and element selector to reveal every detail of of the Drupal Gardens themes. We have seen some of the fruits of this effort already - less than 1 day after posting the update one of our users created this unique site and we see hundreds more unique sites sprouting. We are pretty excited to see how people use these new gardening tools!On to the meat of this release. Here is what's new:
- Updated all sites to Drupal 7 Alpha 5 + all core changes through May 31. For a complete list of what is new, see the Drupal 7 Alpha 5 release notes or the raw CVS commit messages from May 14 to May 31.
- Enabled Mollom comment spam blocking on all sites. Every site has been provisioned with a Mollom account and comments made on the site will be protected. You can turn on Mollom protection for most other Drupal forms as well. You may choose to disable Mollom as long as you first turn on comment moderation for anonymous users.
- Added a new "Bare bones" theme which contains no styling at all (no borders, no colors, no font styles, etc.) Use this theme if you want to start completely from scratch and build up from a base to create your own theme masterpiece.
- Restructured and updated all themes to make them very flexible, standard, accessible, and SEO friendly. The benefits are significant including:
- Easier ThemeBuilder styling: Now more than ever, the first thing you click on will be the element you want to style -- without resorting to use of the element selector (now hidden under Power theming, see below).
- Flexible width support: Containers within the "page" element have fluid width styling. The page width can be easily resized from 0 to 1100px. The default is 960px wide.
- Flexible gridding with fluid-width columns: All columns can be re-sized with the ThemeBuilder. By default, they distribute evenly across a row according to the visible content.
- Standardized HTML Structure: All themes are based on a standard structure so it is possible to start with any one theme like Kenwood and eventually style it to look like any other theme such as Campaign or Impact.
- Better SEO: The h1 tag is always used exclusively for the node title on a node page. No more than one h1 is used per page which is important for search engine optimization.
- More accessible: Every Gardens theme page has a "skip to content" link just inside the body tag to provide a shortcut to screen-reading browsers and keyboard support.
- Plenty of styling hooks: There are now a sufficient number of wrapping elements to reproduce nearly any design while satisfying Internet Explorer's lack of support for CSS 3 styles. The structure of blocks now includes hooks for top and bottom cap decoration as well as an inner wrapping element that can be used to style the vertical edges or background of blocks.
- New styling elements: Each top-level container (page, header, content, and footer) contains decoration structures. With them you can place background images and styles that are not dependent on content, separating how your theme looks from the data it presents.
- New Power theming. While Power theming is off (the default ThemeBuilder behavior) you simply point, click and style your site. If you need more fine-grained control over what you are styling, click to turn Power theming on and you will be able to:
- Select many more theme elements with the new CSS Navigator. After selecting any element on your theme, arrows will appear next to it allowing you to select the element's parent, first child, or sibling element (basically traversing the DOM to access elements hidden from the point and click method). This is very useful to find the right element for the style change you need, and see the theme's structure.
- Access the Element selector to control the scope of your styling. e.g. style all h2s identically or only style the h2s located in your theme's sidebar. Or style how any element appears in the hover state, active state, etc.
- Fixed many bugs as reported by our awesome beta testers.
Are you a CSS junkie?
If you want to learn more about the structure of the Drupal Gardens themes, our own Jesse Beach who lead the effort has started writing about them on her blog. Check it out.Haven't tried Drupal Gardens yet?
We are sending out invitations all the time - just sign up and we'll get one out to you ASAP!