Concept

Why headings?

Headings allow screen-reader and assistive technology users to skim the structure of a page and navigate to or skip over sections.

Use headings for:

• structure of page content
• sections and sub-sections of an article
• navigation menus
• breadcrumbs
• any other consistent sections that users may want to find or skip

Video example

Watch how a screen-reader user navigates with headings:

http://www.youtube.com/watch?v=AmUPhEVWu_E

Best Practices

There are few simple rules to follow when using headings:

Web pages comprise of five basic layers:

1. Content
2. Semantics
3. Structure
4. Presentation
5. Behavior

Content refers to the text, images and multimedia components of web pages. Behavior refers mainly to JavaScript, which is covered in the page on JavaScript and AJAX. This page concentrates on the other three layers.

Depending on how your site is configured, the HTML code that makes up each page in your site is compiled from the output of various Drupal modules.

If the default HTML markup supplied by any module does not suit the requirements of your theme, you can override some or all of it, so that the resulting page is exactly what you need for your design.

For example, you might decide that for your site, the default search box should have an image of a magnifying glass and that the label on the search button should read "Discover great stuff!" rather than the default label of "Search". You can completely override the default markup, so that the markup calls for your image file and that the button is labeled the way you want.

Its very important to understand the concept of "overriding". While it is technically possible to just find the module responsible for the search field and edit the code directly, this is definitely NOT recommended. In the short term, it will seem to solve your problem, but it will soon make it difficult to keep your site up to date. Whenever you update the module, perhaps for a general security release, you would need to remember to redo any of your customizations.

The "Drupal Way" is to do an override. This involves four basic steps:

1. Locate the module responsible for the markup
2. Do one of the following:

Cascading style sheets (CSS) are a standard technology for controlling the presentation of web pages. When a page is called by a browser, one or more .css files provide information about how the content on the page should be displayed. The specifics of CSS are beyond the scope of this guide. For a general overview, see the Cascading Style Sheet article on Wikipedia.

A CSS file in a Drupal theme is no different than any CSS file on the web. However, the procedure for adding a CSS file to a theme is unique to Drupal. Drupal 5 (and earlier) and Drupal 6 (and later) have different procedures for adding a CSS file. Consult the version-specific guides for more information.

Some modules (both core and contributed) provide their own default CSS files for controlling the presentation of the content they generate. While you can theoretically edit these files directly, it is highly recommended that you "override" a default .css file by copying (not moving) it to your theme's directory.

This handbook is about customizing the look and feel of a Drupal site. If you are developing a module that outputs presentation data, then please read the module developer's guide Using the theme layer section.

For information about installing existing, contributed themes, please visit Installing themes

This entire handbook is currently undergoing a reorganization to help make this information more accessible. Please pardon the dust. Everyone can help with this project. You can find out more information about this reorganization and how to join in on the working group's project page.

Sub-themes are just like any other theme, with one difference: They inherit the parent theme's resources. There are no limits on the chaining capabilities connecting sub-themes to their parents. A sub-theme can be a child of another sub-theme, and it can be branched and organized however you see fit. This is what gives sub-themes great potential.

Imagine starting with a base theme designed as wireframes, then applying and refining all the details from a sub-theme. Then, off the same wireframe, testing out alternate designs by branching out another sub-theme. Working on a multi-site installation but you need a cohesive look and feel? With sub-theming, a lot of the design resources can be shared. Site-specific changes can be set to a specific sub-theme, but any shared resources can be edited once to be applied across all the installations. With careful planning, the possibilities are endless.

To declare a parent or "base theme", set this inside the sub-theme's .info file," themeName" being the internal name of the parent theme:

The following are inherited: