Drupal Theming For Beginners – Danté SELF 2010


Published on

What is Drupal?
What is a Drupal Theme?
Contributed Drupal Themes, Engines, & Services
What can you do with Drupal themes?
Drupal Theme Anatomy 101
How to Design for Drupal
Create a Drupal Theme the easy way
Where to find help

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Drupal Theming For Beginners – Danté SELF 2010

  1. 1. Drupal ThemingFor BeginnersBy Danté TaylorMediacurrent Senior Designer<br />South East Linux Fest<br />June 13, 2010<br />
  2. 2. We will cover<br />What is Drupal?<br />What is a Drupal Theme?<br />Contributed Drupal Themes, Engines, & Services<br />What can you do with Drupal themes?<br />Drupal Theme Anatomy 101<br />How to Design for Drupal<br />Create a Drupal Theme the easy way<br />Where to find help<br />`<br />
  3. 3. About Me<br />Bachelor of Fine Arts (BFA) from Savannah College of Art and Design<br />Worked as a Designer for 10 years<br />Have worked with Drupal since version 4.7 release (5 years)<br />Biggest project worked on in Drupal is savannahnow.com<br />Favorite project worked on in Drupal is ymib.com<br />`<br />
  4. 4. What is Drupal?<br />Content Management System (CMS)<br />Application Programming Interface (API) built on top of PHP<br />A community of more than 800,000+ users and developers contributing to build needed tools, services, and programs using a standard methodology or practices. <br />There are more than 6,000+ profiles, modules, and themes supported by the Drupal community <br />People who use Drupal include: Ubuntu.com, Whitehouse.gov, FastCompany.com, MTV.com<br />`<br />
  5. 5. What is a Drupal Theme?<br />A set of files and templates used to build the Front-end of a Drupal site.<br />The User-Facing section of a Drupal site that facilitates the majority of the user experience.<br />To put it in Real Estate terms it is the Décor of a Web Site. <br />`<br />
  6. 6. Contributed Drupal Themes, Engines, & Services<br />Zen Theme (Themes)<br />Garland Theme* (Themes)<br />PHPThemple* (Theme Engine)<br />Smarty (Theme Engine)<br />PHPTal(Theme Engine)<br />Drupal Gardens (Service)<br />
  7. 7. What can you do with Drupal Themes?<br />Design photo sharing sites.<br />Build a site for your local baseball team.<br />Build a personal portfolio or résumé site.<br />Build a theme for your church, civic group, or organization.<br />There are not many limits to what can be done with Drupal and Drupal theme design.<br />
  8. 8. Drupal Theme: AutoTrader<br />`<br />
  9. 9. Drupal Theme: University of Georgia:<br />`<br />
  10. 10. Garland Theme<br />`<br />
  11. 11. Choose A Theme<br />`<br />
  12. 12. Configure Theme<br />`<br />
  13. 13. Add some color<br />`<br />
  14. 14. How to Design For Drupal?<br />Install Drupal to experiment and learn how modules UI functions work together, before you begin your design project. <br />Use built-in features of Drupal and modules to achieve Design objectives. (Try not to reinvent)<br />Think in terms of how your Design elements can be reused or repeated throughout Web site.<br />Work closely with specialist in Drupal Design or Development to save on time and budget as you plan your Drupal project. <br />`<br />
  15. 15. Drupal Theme Anatomy 101<br />`<br />
  16. 16. File Structure<br />`<br />
  17. 17. Popular Drupal Terms<br />Hooks<br />Preprocess Functions<br />Theme Functions<br />Template Files<br />Regions<br />Nodes<br />Blocks<br />Delta<br /><ul><li>Content Types
  18. 18. Taxonomy
  19. 19. Settings.php
  20. 20. Template.php
  21. 21. Views
  22. 22. CCK
  23. 23. Menu System</li></ul>`<br />
  24. 24. Create a Drupal Theme the easy way<br />Create Theme Name directory (mytheme) inside “/sites/all/themes/” (create new directories if they do not exist)<br />Copy Garland theme from “/themes” and move it to “/sites/all/themes/”, then rename it to mytheme directory.<br />Change the garland.info file to mytheme.info. Open new mytheme.info file and change all names with garland to mytheme. <br />Change the screenshot.png file to match your new theme.<br />Clear system cache. (/admin/settings/performance)<br />Go to Themes list page and select mytheme, to start using or editing your new theme. (/admin/build/themes)<br />`<br />
  25. 25. .info file<br />`<br />
  26. 26. Where to Find Help?<br />Mediacurrent.com/blogs<br />Drupal.org<br />Api.drupal.org<br />Drupal.org/project/Themes<br />AListApart.com<br />Lynda.com<br />Drupal.org/node/39451<br />Drupal.org/node/171205<br />Drupal.org/books<br />Drupal.org/node/190815<br />`<br />
  27. 27. Tools of the trade<br />Firefox<br />FireBug<br />Theme Developer Module<br />MAMP<br />Admin Menu Module<br />YSLOW<br />`<br />
  28. 28. Contact Me<br />dante.taylor@mediacurrent.com<br />404 537 2493<br />`<br />