Overview of theme files
A theme is a collection of files that define the presentation layer. You can also create one or more "sub-themes" or variations on a theme.
Writing theme .info files
The .info file is a static text file for defining and configuring a theme. Each line in the .info file is a key-value pair with the key on
Default .info values
The following are the assumed defaults. When they are not defined, the theme will automatically take these values.
Assigning content to regions
If none are defined, the following values are assumed in Drupal 6 and Drupal 7.
Checking if a region is occupied
While theming page.tpl.php it's possible to check whether a region is empty, by checking the content of the relevant variable which
Theme settings
Various page elements output by the theme can be toggled on and off on the theme's configuration page.
Global settings
The global settings a theme has
Integration with the Color module
The Color module allows to change the theme color scheme.
Creating a sub-theme
Sub-themes are just like any other theme, with one difference: They inherit the parent theme's resources. There are no limits on the
Clearing the theme cache
The contents of the .info file is cached in the database, so altering it will not be noticed by Drupal. Also if you add new tpl.php files or
Sub Theme - Inheritance Summary
In the previous section, we understood how a sub theme is created along with inheritance of various properties. The table summarises
Example: creating a Garland sub-theme that utilizes the Color module
A Garland sub-theme that utilizes the Color module
Working with CSS
Working with CSS in Drupal 7.
- CSS overview
- Overriding style sheets from modules and base themes
- Adding style sheets
- Adding CSS to form or page with attachments
- Adding styles through the API
- Live_css with .less support
- Sass techniques and tools
- Standard Drupal core styles and classes
- .clear-block and .clearfix
- Supporting "right to left" (RTL) languages
Working with JavaScript and jQuery
Using JavaScript adds dynamic presentation effects to a theme. In addition to custom JavaScript files many Drupal developers find jQuery
Using Newer Versions of jQuery
You will often need a newer version of jQuery to use a certain jQuery plugin. There are several ways to achieve this.
Core templates
Core comes with a number of default template files. You can override these templates in a number of ways.
Template (theme hook) suggestions
A theme hook suggestion is an alternate template (.tpl.php) file that you have created to override the base or original template file.
Theming blocks
Theming blocks in Drupal 7 individually, by region, or by module.
Advanced theming
Advanced theming in Drupal 7.
Overriding themable output
Overriding themable output in Drupal 7.
- Overriding themable output
- Beginners guide to overriding themable output
- Introduction to PHP for theming
- About overriding themable output
- Setting up variables for use in a template (preprocess and process functions)
- Default baseline variables
- Customizing and Overriding User Login page, Register, and Password Reset in Drupal 6 and 7
- How to add a "?destination=URL" to the request new password link
- Useful tutorials & links
- Example: Themable output
- Identifying Core Components
- Core Block CSS IDs
- Mission statement and highlighted region
- Primary and Secondary links renamed to Main and Secondary menu
- Taxonomy
- Unrendered taxonomy links no longer available as a separate variable in node.tpl.php files
- Menu theming
- Overriding a menu in a block or template file
- The theme registry for special cases
- Working with template suggestions
- Architectural view of theming
Creating accessible themes
This guide provides a guide to accessibility best practices for theme developers.
- Accessibility principles
- Building accessible forms
- Contributed modules to help with accessibility
- Creating accessible site and page navigation
- Creating accessible structure and markup
- Getting started with accessibility
- Hide content properly
- Improving readability with fonts and typography
- Maintaining accessibility in rich Internet applications and Javascript/Ajax features
- Managing images and media for accessibility
- Providing Useful Alternative Text for Images
- Providing a way to skip navigation
- Specifying colors and contrast for accessibility
- Tools for validating accessibility
- Using headings to improve accessibility
Theming HowTos
Theming HowTos for Drupal 7.
- Change the favicon
- Clearing floats with class="clear-block"
- Convert any website layout or template into a Drupal theme - easily!
- Create a Views event list grouped by month
- Create a new custom theme with CSS alone
- Customize Drupal User Profiles with CiviCRM Contact Fields
- Customize the User Edit page in Drupal 7 - an example
- Customize the front page template
- Customizing core and/or contributed themes
- Enable submit via Enter key on Ajax forms
- How to edit ALT tag on your site logo
- Overriding Theme Templates in Drupal 6 and 7
- Put an HTML non breaking space ( ) in menu items titles
- Rounded Corners in Drupal 7 (jquery corner)
- Show a block depending on node type and node id
- Static and Dynamic Thumbnails for Facebook
- Style a horizontal login block in the footer
- Theming Web-Form
Tools and best practices
Best practices and conventions for theming Drupal 7.
- Safe theme development
- Theme coding conventions
- Theming the Drupal maintenance page
- Adding your theme to Drupal.org
- Cross-browser testing
- Recommended target browsers
- Creating a screenshot for the appearance page
- Creating a screenshot for the administration page
- Making your theme semantically correct
- Doctype, XML, and XHTML
- Feature detection
- Installing Modernizr module and JavaScript library
- Creating a custom build of Modernizr based on your Drupal setup
- Modernizr.load() and Drupal: Basics
- Implementing the Modernizr Test API within a module or theme
Upgrading 6.x themes to 7.x
NOTE: We are now using a different system to track version-to-version changes in Drupal. Most of the theme changes between Drupal 6 and