Drupal Themes

One common practice when using CSS frameworks such as 960 Grid System, Blueprint, or Baseline is to use a CSS reset. Each web browser applies a set of default styles to HTML elements, and these styles vary among browser vendors. A CSS reset is a stylesheet that clears these default styles so that you know what you’re working with as you implement your theme’s CSS.

The caveat with a CSS reset is that it needs to come before all of your other stylesheets. This presents a problem if you want to use a reset in your Drupal theme: all of the theme’s CSS will be added after Drupal’s system CSS and after any modules’ CSS. If your reset is loaded after these, the system and modules’ styles will all be undone, which probably isn’t what you want. Drupal loads theme styles last because, usually, you’re just adding to or overriding the existing styles, not wiping them all clean. It is possible, however, to have Drupal output a stylesheet from your theme before the system and module stylesheets.

What CVS does to (some) designers

There’s been a lot of talk lately about how Drupal designers shouldn’t have to learn CVS. Nothing new to see here, really — just the same tired, self-fulfilling arguments about how much CVS sucks, how developers also hate using it, and how designers shouldn’t be expected to learn something so… technical.

Jake Strawn of Drupal Dynamics and I are teaming up to propose a Accelerated grid theming using NineSixty session for DrupalCon Paris. (To be fair, he beat me to it and was gracious enough to add me as a co-presenter.)

Our session will cover the following basics of the 960 grid system:

• What is 960.gs?
• Using the NineSixty theme as your starting point / parent theme
• Understanding the grid-x, push-x, pull-x classes
• Why a grid-based system can help speed up theme development
• How to break the 960-pixel limit

In the last month, I have presented sessions on 960.gs and the NineSixty theme at DrupalCamps in Copenhagen, Helsinki, and Stockholm. Most recently, I co-presented a session at Drupal Design Camp Boston with Nathan Smith, creator of the 960 grid system. You can download the slide decks on our “Presentations” page.

Note: This HOWTO covers Drupal 6.x.

By default, Drupal adds an .error class to the form element itself: textarea, select, input, and so on. Sometimes, that’s not good enough. Maybe a client needs the label’s color changed — or a big, red border encompassing both the label and input elements.

This can be achieved by overriding theme_form_element() to add an error class to div.form-item, the div that wraps all elements in a form.

Our website has been featured on 960.gs, home of the 960 grid system! This is quite an honor, as we’re big fans of grid-based design — especially 960.gs — and have begun implementing its principles and techniques in virtually every project.

“CVS Instructions” tab on the Author Taxonomy module

Drupal’s CVS is now more user-friendly!

As part of the Documentation Sprint at Drupalcon DC 2009, web chef David Strauss built a “CVS Instructions” tab for Drupal.org. The tab provides concise, step-by-step instructions on how to check out, commit, patch, tag, and branch any module or theme. A simple drop-down box at the top of the page allows the user to select the version of the module or theme they want to work with, and the instructions are updated to display exact, copy-and-pastable commands.