Drupal Themes The Survival Guide Drupal Camp | Managua 2009.

Drupal Themes

The Survival Guide

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?


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.


1. What is Drupal?


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!


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.


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 .


3. Why a normal HTML doesn’t work.


4. Wire frames to Regions

Mazda USA Media Home Page


Image should always fit the unit grid


Mazda USA Media Home Page


Primary Links

Header

New Region # 1

Right Sidebar

Footer

Content



5. HTML to Drupal Theme Variables


6. Overriding CSS

Drupal HTML rendering order.


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


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


7. Overriding HTML

8. Theme Debugging


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

[email protected]


Drupal Themes The Survival Guide Drupal Camp | Managua 2009.

Documents

Transcript of Drupal Themes The Survival Guide Drupal Camp | Managua 2009.