1. Drupal Themes The Survival Guide Drupal Camp | Managua 2009

2. Drupal Themes The survival guide Agenda

3. 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

4. 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?

5. Drupal Camp | Managua 2009 1. What is Drupal?

6. 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

7. 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

8. 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.

9. Drupal Camp | Managua 2009 4. Wire frames to Regions

10. Mazda USA Media Home Page Drupal Camp | Managua 2009 Image should always fit the unit grid 4. Wire frames to Regions

11. Mazda USA Media Home Page Drupal Camp | Managua 2009 Primary Links Header New Region # 1 Right Sidebar Footer Content 4. Wire frames to Regions

12. Drupal Camp | Managua 2009 5. HTML to Drupal Theme Variables

13. Drupal Camp | Managua 2009 5. HTML to Drupal Theme Variables

14. Drupal Camp | Managua 2009 5. HTML to Drupal Theme Variables

15. Drupal Camp | Managua 2009 6. Overriding CSS

16. 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

17. template.php Drupal Camp | Managua 2009 7. Overriding HTML

18. Template by path http://drupal/ page-front.tpl.php http://drupal/user page-user.tpl.php http://drupal/story node-story.tpl.php http://drupal/contact page-contact.tpl.php http://drupal/about page-about.tpl.php Drupal Camp | Managua 2009 7. Overriding HTML

19. 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

20. Questions? enzo@anexusit.com Drupal Camp | Managua 2009

21. Presentation prepared by: Eduardo Garcia Drupal Camp | Managua 2009 ©Anexus IT