Basic theme help

Theme Goals

Improving your site's theme can help you to accomplish many goals. In particular, improving your site's theme can help with the following business goals:

• help drive traffic to your site
• highlight products for sale on your site
• provide information to your site's visitors
• help your site's visitors to collaborate with each other.

The purpose of this themes help documentation is to help you accomplish the following theme development goals:

• make small design changes without having cross browser compatibility issues
• implement designers wireframes in your theme
• pick a base theme to customize
• build a new theme based on an existing theme

Improving theme help in Drupal

In a recent survey of Drupal administration, user experience respondents indicated that theming was the most difficult Drupal administration task. We conducted a series of interviews to learn more about themers' goals and the tasks that need to be completed when developing a theme.

Basic Drupal theme tasks

Whichever theme you choose to work with you will need to know how to accomplish some basic theme tasks.

• Find and open a Cascading Style Sheet(CSS) file for your theme
• Copy and paste CSS code
• Learn the CSS attributes in your theme

It is recommended you use the Firefox browser with developer toolbar and the view formatted source extensions. We also recommend you use standard CSS ID names, as recommended by Andy Clarke and Eric Meyer.

• Change colors
• Use part of another theme. For example, copy the CivicSpace Admin theme into your site's theme.
• Build a new layout on top of an existing theme. E.g. change number of columns, header and footer positions, fluid versus static body.

Difficult theme tasks

We have identified a number of difficult theme tasks that require explanation. Some tasks are both basic tasks and difficult tasks and must be further documented to explain the difficult portions of these tasks.

• CSS Layout development
• Identifying a good base theme to start with

We have added categorization capabilities to the project module which will allow themes to be categorized.

• Alter an existing theme
• Learn CSS classes and IDs

It is recommended you use the Firefox browser with developer toolbar and the view formatted source extensions. We also recommend you use Eric Meyer's standard CSS class names.

• How to add padding or margins to a class
• Remove text and images from the theme UI. E.g. Remove submitted by, which may or may not be a theme issue.
• How to fix forms that are too difficult by default.
• Fix XHTML from modules that cause the theme to display incorrectly

An issue should be filed against the module. Include a picture of the incorrect display, how it looks in a basic theme like box gray. Provide a snippet of the offending XHTML from the module and indicate what the desired XHTML should look like.

• Working with PHP variables.
• Abandoning fixed width and working with containers
• Working with complicated full-height designs or something flexible that needs lots of max-width and min-width to be done right.
• Inserting cool graphical effects designers want that will also work in Internet Explorer.
• Internet Explorer and Firefox compatibilities
• Write a theme from scratch

Additional Utilities for theme development and analysis

There are quite a few utilities and plugins you can use to ease your approach to theme development and analysis. Here is a list: