Drupal Themes

The Survival Guide

Drupal Camp | Managua 2009

Drupal Camp | Managua 2009

Drupal ThemesThe survival guide

Agenda

1. What’s Drupal.

2. What is a theme.

3. Why a normal HTML doesn’t work.

4. Wire Frames to Regions

5. HTML to Drupal Theme Variables

6. Overriding CSS

7. Overriding HTML

8. Theme Debugging

9. Questions?

Drupal Camp | Managua 2009

Agenda

Drupal is free, open source software that can be used by individuals or groups of users -- even those lacking technical skills -- to easily create and manage many types of Web sites. The application includes a content management platform and a development framework.

Drupal Camp | Managua 2009

1. What is Drupal?

Drupal Camp | Managua 2009

1. What is Drupal?

In the context of Drupal, the term "theme" means a collection of files that are responsible for the look and feel of the website. Other systems use different names for the files that perform the same function in their particular systems—the most common term used elsewhere being "template.“

Conceptually, a theme is a visual container that is used to format and display data on the screen. Expressed in terms of its component parts, a theme is a collection of files that format data into the presentation layer viewed by site visitors and system administrators. Expressed in simplest terms: The theme determines how your site looks!

Drupal Camp | Managua 2009

2. What is a theme

2. What is a theme

A generic theme cover the 80% of needs for a project; the rest 20% belongs to theme customization.

Remember you know you build a good theme when developers could install and use with three clicks.

Drupal Camp | Managua 2009

Even if our PSD transformation to HTML looks OK, this representation only works in a static scenario.

These the list of issues.

• CSS ignore Drupal styles.

• HTML is raw data. We need Information.

• HTML is not oriented to dynamic content and/or layouts .

Drupal Camp | Managua 2009

3. Why a normal HTML doesn’t work.

Drupal Camp | Managua 2009

4. Wire frames to Regions

Mazda USA Media Home Page

Drupal Camp | Managua 2009

Image should always fit the unit grid

4. Wire frames to Regions

Mazda USA Media Home Page

Drupal Camp | Managua 2009

Primary Links

Header

New Region # 1

Right Sidebar

Footer

Content

4. Wire frames to Regions

Drupal Camp | Managua 2009

5. HTML to Drupal Theme Variables

Drupal Camp | Managua 2009

5. HTML to Drupal Theme Variables

Drupal Camp | Managua 2009

5. HTML to Drupal Theme Variables

Drupal Camp | Managua 2009

6. Overriding CSS

Drupal HTML rendering order.

Drupal Camp | Managua 2009

The active theme's files(if no function defined then ...)

The theme engine files(if no function defined then ...)

The default Drupal file

7. Overriding HTML

template.php

Drupal Camp | Managua 2009

7. Overriding HTML

Template by path

http://drupal/page-front.tpl.php

http://drupal/userpage-user.tpl.php

http://drupal/storynode-story.tpl.php

http://drupal/contactpage-contact.tpl.php

http://drupal/aboutpage-about.tpl.php

Drupal Camp | Managua 2009

7. Overriding HTML

8. Theme Debugging

Drupal Camp | Managua 2009

Using the devel module for drupal 6 we could debug our themes.

Note that this module injects markers into the DOM to do its magic.

This may cause some themes to behave erratically and less capable

Theme Developer (Drupal 6 Only) http://www.drupal.org/project/devel

Questions?enzo@anexusit.com

Drupal Camp | Managua 2009

Presentation prepared by:Eduardo Garcia

Drupal Camp | Managua 2009

©Anexus IT