Create new themes for your Drupal 7 site with a clean layout and powerful CSS styling
This article by Ric Shreves, author of Drupal 7 Themes, looks at software tools that can aid theme development. The article includes a list of Drupal modules that are useful to themers as well as third-party tools that can make the job faster and easier. Each tool is listed along with a brief synopsis and a URL to the relevant project site. This list should not be viewed as an endorsement of any particular module or product over any other; it is simply an attempt to help you discover some of the tools that are at your disposal.
The tools listed here fall into two categories:
|Read more about this book|
(For more resources on Drupal, see here.)
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.
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:
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.
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.
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.
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.
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:
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 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.
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.
|Read more about this book|
(For more resources on Drupal, see here.)
This module, still in development at the time this was written, aims to allow Drupal sites to be built using HTML 5. The module includes multiple tools intended to get HTML5 elements into Drupal, from forms, to DOCTYPE, to markup and the various Drupal entities. This module looks promising, but it is still too early to evaluate it.
Track their progress at http://drupal.org/project/html5_tools.
The .mobi Loader module is intended to work with the .mobi theme—a specialty theme intended for use specifically on mobile devices. The module automatically detects requesting the .mobi alias of the site and overrides the default theme with the .mobi theme.
View the project at http://drupal.org/project/mobi_loader.
Mobile Theme is a theme switcher. The module adds the ability for the administrator to designate a theme for use with mobile devices directly from within the Theme Manager. When site visitors access the site on mobile devices, they selected theme will be displayed in preference to the default theme.
Learn more at http://drupal.org/project/mobile_theme.
Need a quick drop-down menu solution? Nice Menus has the answer. This module provides multiple menus with configurable multi-tier menus that can be positioned on your page via the Blocks Manager. The system supports up to ten horizontal and vertical menus with multiple levels. The following screenshot shows a vertical menu configured with a fold right sub-menu:
Menus created with Nice Menus are predominantly CSS. You can style them easily by overriding the default selectors. The module developer has also kindly included theme functions that give you even more control over the appearance. The Nice Menus project includes decent documentation to get you started.
Learn more at: http://drupal.org/project/nice_menus.
The Noggin module closes a gap in the core Drupal themes by providing the ability to add a custom header image to the default Drupal themes directly from the Theme Manager. As you can see in the following screenshot, the module adds a new section to the Theme specific configuration settings page:
Using the controls on the page, you can upload the header image of your choice to any of the default themes. For themes that employ different markup, you can add a custom CSS selector to enable the functionality.
Visit the project at http://drupal.org/project/noggin.
Organic Groups is not directly about theming, but if you need to enable users to create and manage their own groups, then this module is a lifesaver. We mention it here because the implementation of this module makes it easy to control block and content visibility by group. Additionally, you can also set up the module to provide different themes for different groups of users.
Organic Groups is a very powerful module and quite popular. An entire eco-system of modules has grown up around Organic Groups and there are many options available here. It powers come very big sites and makes building intranet and extranet-type functionality much simpler.
Learn more by visiting the project page: http://drupal.org/project/og.
The Panels module makes the creation of multi-column layouts a breeze. With Panels, you are able to divide a page into content areas and control the content in each area. Blocks and nodes can be mixed freely. The Panels module also allows you to create custom blocks, so-called "mini Panels" using similar logic and tools.
The system comes with several default two and three column formats, but you can do virtually anything you want with a little configuration work. The Panels Everywhere module provides an interesting variation on this functionality, unfortunately, at the time this was written, there was not yet any sign that it would be updated for Drupal 7. Panels require the Chaos Tool Suite module.
Learn more: http://drupal.org/project/panels.
This module extends the Views module functionality. The purpose of the module is to simplify the theming of Views by making it easier to insert HTML markup for your Views rows and fields. Instead of overriding row style templates for views, you can specify the HTML elements and classes from inside the Views UI. You must have the Views module to use this module.
To learn more, visit http://drupal.org/project/semanticviews.
The Skinr module is drawing a fair amount of attention these days. The module sets out to allow a themer to define a set of reusable CSS styles and to then make those available throughout the Drupal UI. The idea is exciting and holds a tremendous amount of promise for helping rationalize and create manageable CSS structures in the complex world of Drupal stylesheets. Themes do have to be modified slightly to be Skinr compatible, making it more difficult to retrofit Skinr into an existing site (though not impossible by any stretch of the imagination). An increasing number of themes are being made available in Skinr compatible format and as a community begins to grow around the extension we are seeing not only more themes but also more "skins," that is, bundles of reusable style definitions. The module was still under development for Drupal 7 at the time of writing so full evaluation was not possible.
Learn more: http://drupal.org/project/skinr.
|Read more about this book|
(For more resources on Drupal, see here.)
The Style Guide module does just exactly what the name implies—it produces a visual reference page that lets you check the styling for your theme. Once enabled, a quick visit to the Theme Manager shows a new link next to each theme: Style Guide. Click the link to see a page of sample text showing all the most common page elements and HTML styles compiled in one place, as seen in the following screenshot. A great time-saver and a fast way to check your work, and spot inconsistencies and conflicts in your CSS styling.
Download the Style Guide module at http://drupal.org/project/styleguide.
Sweaver is intended to make themes editable by anyone. With Sweaver installed, the user has an easy-to-use graphical interface inside their browser that allows them to completely change their theme without knowing CSS. You can modify fonts, colors, sizes, and element positions. Once you achieve the look you like, you can save your changes. The following screenshot shows Sweaver in action:
While this module is certainly not for the hardcore themers in the crowd, it does open up Drupal theme customization—at least at the CSS level—to those with little or no coding skills. Sweaver requires Chaos Tool Suite.
Visit the Sweaver project to learn more: http://drupal.org/project/sweaver.
Taxonomy Theme is a simpler and more limited frontend for the ThemeKey functionality, explained next. Taxonomy Theme is focused on providing the ability to change the theme of a given node based on the taxonomy term or vocabulary. Additionally, you can designate themes by path or by views if you are using the Views module. You will need to install ThemeKey to use this module.
Visit the project page at http://drupal.org/project/taxonomy_theme.
The ThemeKey module is an advanced theme switcher that allows you to run multiple themes on your site and to automatically switch between them based on criteria. This not only provides an alternative to relying on multiple page templates and the theme layer, but also perhaps more importantly, lets you designate specific themes to specific types of devices or for older browsers. You can also use it to provide a splash page for your site, or set up promotional landing pages. Moreover, if you have a live site and you want to put a new theme on it, ThemeKey gives you the means to test the new theme on the live site without having to expose the work in progress to visitors.
Download the module from http://drupal.org/project/themekey.
The Views module enhances your control over the listing of content items (nodes). With views you can create custom lists that contain the content you want, sorted in the manner you want. Views makes it easy to make blog-site type lists of the most recent articles, most recent comments, top posts in a category, most popular posts, and so on. Essentially a smart query builder, Views is a very powerful module that enables you to really open up your content display in a wide variety of manners. Additionally, it can also be used to generate reports, create summaries, and group and display images.
Views require the Chaos Tool Suite, discussed earlier in this article.
Learn more: http://drupal.org/project/views.
The Webform module provides you with enhanced form building capabilities. It enables you to produce complex and advanced forms directly from within the admin interface. Once installed it adds a new content type, which can then be customized to display the fields, controls, and widget you require. The forms support Mollom, CAPTCHA, and form validation.
Once published, submissions of the form are collected inside the system and can also be e-mailed to one or more persons. The data collected in the system can then be displayed and browsed from within the admin interface.
Visit the project page to learn more: http://drupal.org/project/webform.
In addition to the wonderful world of Drupal modules, there are third-party software tools that you should consider. Three of the four items on this list are browser plugins. While your preference in browser is entirely your own, all three of the browser plugins are Firefox compatible:
Drush is a command-line shell and scripting interface for Drupal. The utility can greatly speed your development time—if you are comfortable working with a command-line tool. Though there is a Drush project page on the Drupal.org website, it is not a Drupal module. Drush is a third-party project.
Drush provides tools to execute cron, clear caches, and query the database. Among the many things Drush does well is the rapid installation of modules and themes from the Drupal.org site. You can literally install things with just a few key strokes. If you know what you want, you can grab it and install it in no time at all. Migrating an entire Drupal installation is similarly fast and easy. It's a huge time saver and well worth the effort it takes to get over any dread you may experience at the site of a command line. Visit the Drush home page to learn more at http://drush.ws.
The Drush Project page at Drupal.org also has more information: http://drupal.org/project/drush.
Grab your copy at https://addons.mozilla.org/en-US/firefox/addon/firebug/.
The Web Developer Extension is very similar to Firebug but with a few extra tools thrown into the mix, such as the ability to re-size your browser window to preset sizes. Though it seems people use both, many people prefer one over the other.
Grab your copy at https://addons.mozilla.org/en-US/firefox/.
YSlow is a site performance assessment tool. It is focused on helping you identify how a site performs and where bottlenecks may be. In addition to providing you with a window into how the page loads, it also provides suggestions for improvements. YSlow is a Firefox add-on, but it also integrates with Firebug.
You can get the Firefox YSlow add-on here: https://addons.mozilla.org/en-us/firefox/addon/yslow.
This article provides a list of various modules and third-party software tools that can be used to improve your theming experience. The Drupal modules listed cover a wide variety of functionality, from simple utilities to complex GUI-driven theming interfaces. Additional modules like Views and Panels cross over from theming into site building and provide you with fantastic tools for controlling the organization and presentation of output on the page. The third-party software tools are dominated by a list of add-ons for the Firefox browser, but also include the powerful Drush command-line shell and scripting interface for Drupal.
There are plenty of other modules out there and as this was written in the early days of Drupal 7, there will certainly be more appearing. Consider this list a starting point for your explorations.
Ric Shreves is a web applications consultant and tech author. He’s been building websites since the mid-90s and writing about tech for almost as long. Ric specializes in open source content management systems and has written texts on each of the big three: WordPress, Joomla! and Drupal.
Ric is the founding partner of water&stone, a digital agency that focuses on new media and online marketing. He works with clients on digital marketing strategy and supervises the SEO implementation team. Ric lives in Bali and divides his time between the island and Singapore.