Warning message

Documentation is currently being migrated into the new system. Some pages might be temporarily missing, and some guides might appear empty. Thank you for your patience while we are improving Drupal.org documentation.

Tools and best practices

This guide presents best practices and conventions for theming Drupal 7 through a discussion of general tools and techniques for developing websites.

Safe theme development

You will invariably run into problems when developing a theme. Here are some safeguards and considerations when resolving issues with your

Theme coding conventions

Coding standards

Theming the Drupal maintenance page

What is the maintenance page?

Adding your theme to Drupal.org

Theme contributors are strongly encouraged to host your themes at Drupal.org rather than elsewhere (GitHub, BitBucket, your personal site,

Cross-browser testing

Cross-browser testing refers to the practice of testing your theme in multiple browsers to ensure that each browser renders pages as

Recommended target browsers

Drupal 8

Creating a screenshot for the appearance page

Every theme for Drupal 7 needs a screenshot in the form of a screenshot.png placed in the theme directory.

Creating a screenshot for the administration page

Note: There is a separate page on this for Drupal 7: http://drupal.org/node/647754

Making your theme semantically correct

Semantic (X)HTML elements convey meaning. Semantic markup combined with CSS is also the primary way to separate content from presentation.

Doctype, XML, and XHTML

Doctype is the first line of any HTML page and tells the browser how to interpret the HTML.

Feature detection

Browsers of all types connect to the web, and the diversity is only increasing. It used to be acceptable to specify which browser parameters

Installing Modernizr module and JavaScript library

Modernizr is not GPLv2, and therefore cannot ship within Drupal modules. Since the Modernizr module depends on the upstream JavaScript

Creating a custom build of Modernizr based on your Drupal setup

When your site is ready to go live, you'll want to take inventory of which feature tests you used, and reduce your Modernizr JS library to

Modernizr.load() and Drupal: Basics

Modernizr can also be a conditional resource loader, which means it can load different CSS or JS files based on the outcome of Modernizr

Implementing the Modernizr Test API within a module or theme

The Modernizr Drupal module provides a Test API which allows site admins to generate a custom build which contains all the features needed

Guide maintainers