Drupal 7 Themes

Create new themes for your Drupal 7 site with a clean layout and powerful CSS styling

Drupal modules

There exist within the Drupal.org site a number of modules that are relevant to your work of theming a site. Some are straightforward tools that make your standard theming tasks easier, others are extensions to Drupal functionality that enable to you do new things, or to do things from the admin interface that normally would require working with the code. The list here is not meant to be comprehensive, but it does list all the key modules that are either presently available for Drupal 7 or at least in development. There are additional relevant modules that are not listed here, as at the time this was written, they showed no signs of providing a Drupal 7 version.

Caution
One thing to keep in mind here—some of these modules attempt to reduce complex tasks to simple GUI-based admin interfaces. While that is a wonderful and worthy effort, you should be conscious of the fact that sometimes tools of this nature can raise performance and security issues and due to their complexity, sometimes cause conflicts with other modules that also are designed to perform at least part of the functions being fulfilled by the more complex module. As with any new module, test it out locally first and make sure it not only does what you want, but also does not provide any unpleasant surprises.

The modules covered in this article include:

• Administration Menu
• Chaos Tool Suit
• Colorbox
• Conditional Stylesheets
• Devel
• @font-your-face
• Frontpage
• HTML5 Tools
• .mobi loader
• Mobile Theme
• Nice Menus
• Noggin
• Organic Groups
• Panels
• Semantic Views
• Skinr
• Style Guide
• Sweaver
• Taxonomy Theme
• Theme Developer
• ThemeKey
• Views
• Webform

Administration Menu

The Administration Menu was a mainstay of many Drupal sites built during the lifespan of Drupal 6.x. With the arrival of Drupal 7, we thought it unlikely we would need the module, as the new toolbar functionality in the core accomplished a lot of the same thing. In the course of writing this, however, we installed Administration Menu and were pleasantly surprised to find that not only can you run the old-style Administration Menu, but they have also now included the option to run a Toolbar-style Administration Menu, as shown in the following screenshot:

The Administration Menu Toolbar offers all the options of the default Toolbar plus the added advantage of exposing all the menu options without having to navigate through sub-menus on the overlay. Additionally, you have fast access to clearing the caching, running cron, and disabling the Devel module (assuming you have it installed). A great little tweak to the new Drupal 7 administration interface.

View the project at: http://drupal.org/project/admin_menu.

Chaos Tool Suite

This module provides a collection of APIs and tools to assist developers. Though the module is required by both the Views and Panels modules, discussed elsewhere in this article, it provides other features that also make it attractive. Among the tools to help themers are the Form Wizard, which simplifies the creation of complex forms, and the Dependent widget that allows you to set conditional field visibility on forms. The suite also includes CSS Tools to help cache and sanitize your CSS.

Learn more at http://drupal.org/project/ctools.

Colorbox

The Colorbox module for Drupal provides a jQuery-based lightbox plugin. It integrates the third-party plugin of the same name (http://colorpowered.com/colorbox/). The module allows you to easily create lightboxes for images, forms, and content. The module supports the most commonly requested features, including slideshows, captions, and the preloading of images.

Colorbox comes with a selection of styles or you can create your own with CSS. To run this module, you must first download and install the Colorbox plugin from the aforementioned URL. Visit the Colorbox Drupal module project page at: http://drupal.org/project/colorbox.

Conditional Stylesheets

The module allows themers to easily address cross-browser compatibility issues with Internet Explorer. With this module installed, you can add stylesheets targeting the browser via the theme’s .info file, rather than having to modify the template.php file. The module relies on the conditional comments syntax originated by Microsoft.

To learn more, visit the project site at http://drupal.org/project/conditional_styles.

Devel

The Devel module is a suite of tools that are useful to both module and theme developers. The module provides a suite of useful tools and utilities. Among the options it provides:

• Auto-generate content, menus, taxonomies, and users
• Print summaries of DB queries
• Print arrays
• Log performance
• Summaries of node access

The module is also a prerequisite to the Theme Developer module, discussed later in this article.

Learn more: http://drupal.org/project/devel.

@font-your-face

@font-your-face provides an admin interface for browsing and applying web fonts to your Drupal themes. The module employs the CSS @font-face syntax and draws upon a variety of online font resources, including Google Fonts, Typekit. com, KERNEST, and others. The system automatically loads fonts from the selected sources and you can apply them to the styles you designate—without having to manually edit the stylesheets. It’s easy-to-use and has the potential to change the way you select and use fonts on your websites.

@font-your-face requires the Views module to function. Learn more at the project site: http://drupal.org/project/fontyourface.

Frontpage

This module serves a very specific purpose—it allows you to designate, from the admin interface, different front pages for anonymous and authenticated users. Though you can accomplish the same thing through use of $classes and a bit of work, the module makes it possible for anyone to set this up without having to resort to coding.

Visit the project site at http://drupal.org/project/frontpage.