Intro to Theme Development Ryan Price, Michael Anello www.DrupalEasy.com
Who are you? Designers? Developers? Site Builders? Content Administrators? Themers.
Content vs. Presentation Static HTML vs. Server-Side Includes vs. Database-Driven Sites vs. Themable Data-Driven Sites
Content vs. Presentation Easy Theme Switching in Drupal (example)
Anatomy of a Drupal Themer Graphic Designer Javascript + PHP Coder $$$ Front-end Developer
The best designers and themers see the BIG picture. IMHO User Experience (UX)
macromates.com TextMate “The Missing Editor for Mac OSX ” “Find in Project” saves my life daily See also: Smultron, KOD, T...
notepad-plus-plus.org Notepad++ “Notepad replacement... to offer a greener environment ” Also: Crimson, e-texteditor, Ultr...
<ul><li>Image Editor </li><ul><li>Pixelmator.com (mac)
Aviary.com (online)
GetDrawIt.com (mac)
The GIMP </li></ul><li>Firefox Extensions </li><ul><li>Firebug
ColorZilla
MeasureIt
Web Developer Toolbar </li></ul></ul>A Themer's Toolbox
<ul><li>CSS Editor </li><ul><li>macrabbit.com – CSSEdit (mac)
westciv.com – StyleMaster (windows) </li></ul><li>FTP </li><ul><li>FileZilla – sourceforge.net
Transmit – panic.com (mac) </li></ul><li>SSH </li><ul><li>PuTTY.org (windows) </li></ul><li>Tools </li><ul><li>wafflesoftw...
Pixie Color Picker (windows) </li></ul></ul>A Themer's Toolbox
CSS <ul><li>Layout
Styling
Colors
Behaviors – CSS3
Do Web Pages have to look the same in every browser? No. http://dowebsitesneedtolookexactlythesameineverybrowser.com   </l...
HTML vs. XHTML vs. HTML5 <ul><li>HTML5 </li><ul><li>Backwards-compatible
New layout elements (“semantic”) </li><ul><li>Section, Navigation, Header </li></ul><li>New form elements </li><ul><li>Ema...
DrupalCon Session - HTML5 </li><ul><li>Tuesday,1:45pm, Trellon Room </li></ul></ul></ul>
PHP (for themers) <ul><li><?php print $var; ?>
if ( isset ($var)): … endif;
if (! empty ($var)): … endif;
http://drupal.geek.nz/blog/tplphps-are-not-templates   </li></ul>
Copy/Paste PHP <ul><?php if ($page[ 'highlight' ]): ?> <div id=&quot;highlight&quot;> <?php  print render ($page[ 'highlig...
What do you need to know? HTML CSS <?php  print  $content; ?> jQuery setting up a development environment version control ...
Best Practice Theme Folder sites/all/themes/ drupalcon/ css/ style.css drupalcon.info images/ image.png scripts/ drupalcon...
Breaking down a Drupal site HTML Page Region Node Fields Block Views Menu Panels Forms User
Template Nesting
Drupal 7 Theming <ul><li>Template-driven (.tpl.php) </li><ul><li>HTML  –  open <HTML> and <HEAD>
Page   –  Regions, Layout, Special Variables
site_name, logo, main_menu, tabs
Region  –  Blocks, including Main Content
Block  – almost everything
Node   – on node pages, views
Field  – markup for each field </li></ul><li>Clear the theme registry (cache)! </li></ul>
Template File Naming <ul><li>page.tpl.php </li><ul><li>page--front.tpl.php
Upcoming SlideShare
Loading in...5
×

Drupal Theme Development - DrupalCon Chicago 2011

13,064

Published on

This class is intended for people who know some HTML and CSS, and covers the fundamental principles of Drupal theming geared toward people who wish to take a static mockup of a site design and turn it into a Drupal theme. You will also learn about using base themes, grid-based layout and helper modules to streamline and customize your Drupal theme.

Trainer Ryan Price has built entertainment sites, social networks, and eCommerce sites for clients including Popular Science, Field and Stream and Outdoor Life magazines. With over 10 years of experience building sites with PHP and other technologies, Ryan began immersing himself in Drupal around 2006. Ryan often teaches and writes articles along with Mike Anello, and the duo is also known for producing the DrupalEasy Podcast with their host Andrew Riley.

Published in: Technology
3 Comments
19 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,064
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
557
Comments
3
Likes
19
Embeds 0
No embeds

No notes for slide

Drupal Theme Development - DrupalCon Chicago 2011

  1. 1. Intro to Theme Development Ryan Price, Michael Anello www.DrupalEasy.com
  2. 2. Who are you? Designers? Developers? Site Builders? Content Administrators? Themers.
  3. 3. Content vs. Presentation Static HTML vs. Server-Side Includes vs. Database-Driven Sites vs. Themable Data-Driven Sites
  4. 4. Content vs. Presentation Easy Theme Switching in Drupal (example)
  5. 5. Anatomy of a Drupal Themer Graphic Designer Javascript + PHP Coder $$$ Front-end Developer
  6. 6. The best designers and themers see the BIG picture. IMHO User Experience (UX)
  7. 7. macromates.com TextMate “The Missing Editor for Mac OSX ” “Find in Project” saves my life daily See also: Smultron, KOD, TextWrangler, Coda Espresso
  8. 8. notepad-plus-plus.org Notepad++ “Notepad replacement... to offer a greener environment ” Also: Crimson, e-texteditor, UltraEdit, InType, ConTEXT, Visual Web Developer Express
  9. 9. <ul><li>Image Editor </li><ul><li>Pixelmator.com (mac)
  10. 10. Aviary.com (online)
  11. 11. GetDrawIt.com (mac)
  12. 12. The GIMP </li></ul><li>Firefox Extensions </li><ul><li>Firebug
  13. 13. ColorZilla
  14. 14. MeasureIt
  15. 15. Web Developer Toolbar </li></ul></ul>A Themer's Toolbox
  16. 16. <ul><li>CSS Editor </li><ul><li>macrabbit.com – CSSEdit (mac)
  17. 17. westciv.com – StyleMaster (windows) </li></ul><li>FTP </li><ul><li>FileZilla – sourceforge.net
  18. 18. Transmit – panic.com (mac) </li></ul><li>SSH </li><ul><li>PuTTY.org (windows) </li></ul><li>Tools </li><ul><li>wafflesoftware.com - Hex Color Picker (mac)
  19. 19. Pixie Color Picker (windows) </li></ul></ul>A Themer's Toolbox
  20. 20. CSS <ul><li>Layout
  21. 21. Styling
  22. 22. Colors
  23. 23. Behaviors – CSS3
  24. 24. Do Web Pages have to look the same in every browser? No. http://dowebsitesneedtolookexactlythesameineverybrowser.com </li></ul>
  25. 25. HTML vs. XHTML vs. HTML5 <ul><li>HTML5 </li><ul><li>Backwards-compatible
  26. 26. New layout elements (“semantic”) </li><ul><li>Section, Navigation, Header </li></ul><li>New form elements </li><ul><li>Email, Search, etc. </li></ul><li>Scripts for Legacy Browsers (IE)
  27. 27. DrupalCon Session - HTML5 </li><ul><li>Tuesday,1:45pm, Trellon Room </li></ul></ul></ul>
  28. 28. PHP (for themers) <ul><li><?php print $var; ?>
  29. 29. if ( isset ($var)): … endif;
  30. 30. if (! empty ($var)): … endif;
  31. 31. http://drupal.geek.nz/blog/tplphps-are-not-templates </li></ul>
  32. 32. Copy/Paste PHP <ul><?php if ($page[ 'highlight' ]): ?> <div id=&quot;highlight&quot;> <?php print render ($page[ 'highlight' ]); ?> </div> <?php endif; ?> </ul>
  33. 33. What do you need to know? HTML CSS <?php print $content; ?> jQuery setting up a development environment version control - git a little more PHP?
  34. 34. Best Practice Theme Folder sites/all/themes/ drupalcon/ css/ style.css drupalcon.info images/ image.png scripts/ drupalcon.js template.php templates/ node.tpl.php
  35. 35. Breaking down a Drupal site HTML Page Region Node Fields Block Views Menu Panels Forms User
  36. 36. Template Nesting
  37. 37. Drupal 7 Theming <ul><li>Template-driven (.tpl.php) </li><ul><li>HTML – open <HTML> and <HEAD>
  38. 38. Page – Regions, Layout, Special Variables
  39. 39. site_name, logo, main_menu, tabs
  40. 40. Region – Blocks, including Main Content
  41. 41. Block – almost everything
  42. 42. Node – on node pages, views
  43. 43. Field – markup for each field </li></ul><li>Clear the theme registry (cache)! </li></ul>
  44. 44. Template File Naming <ul><li>page.tpl.php </li><ul><li>page--front.tpl.php
  45. 45. page—views.tpl.php
  46. 46. page--user--%.tpl.php </li></ul><li>region.tpl.php </li><ul><li>region--header.tpl.php </li></ul><li>node.tpl.php </li><ul><li>node--blog.tpl.php
  47. 47. node--17.tpl.php
  48. 48. node--%--edit.tpl.php </li></ul></ul>
  49. 49. Template File Naming <ul><li>block.tpl.php </li><ul><li>block--sidebar_first.tpl.php
  50. 50. block--aggregator.tpl.php
  51. 51. block--block--7.tpl.php </li></ul><li>field.tpl.php </li><ul><li>field--blog.tpl.php
  52. 52. field--field_tags.tpl.php </li></ul><li>More about Template Suggestions: http://drupal.org/node/190815 </li></ul>
  53. 53. Theme Hook Suggestions <ul><li>theme ( 'hook__foo__bar' , $vars) </li><ul><li>'hook__foo__bar'
  54. 54. 'hook_foo'
  55. 55. 'hook' </li></ul><li>hook_theme () </li><ul><li>You can add new suggestions
  56. 56. http://api.drupal.org/hook_theme </li></ul></ul>
  57. 57. Views Theming <ul><li>Views 3 </li><ul><li>Markup is custon </li><ul><li>Entire field
  58. 58. Label
  59. 59. Value </li></ul><li>Classes on everything
  60. 60. “Semantic Views” </li></ul><li>Theme: Information </li></ul>
  61. 61. Views Theme Information <ul><li>Template-driven </li><ul><li>Display – entire view (header, footer, paging, ...)
  62. 62. Style – how rows are laid out (rows, grid, ...)
  63. 63. Row – how each row is laid out
  64. 64. Field – how each field is laid out (or use UI) </li></ul><li>Create named file </li><ul><li>Lots of control w/ naming suggestions </li></ul><li>Copy code into theme folder </li></ul>
  65. 65. api.drupal.org Default Theme Implementations Functions and templates for the user interface to be implemented by themes. http://bit.ly/d7theme
  66. 66. Overriding Theme Functions <ul><li>http://api.drupal.org (or use theme_developer module)
  67. 67. theme _user_signature ($node) {...}
  68. 68. /sites/all/themes/ drupalcon /template.php
  69. 69. drupalcon _user_signature ($node) {...}
  70. 70. Clear theme registry </li></ul>
  71. 71. Overriding Template Output <ul>Order of Operations: http://drupal.org/node/223430 <li>Locate the appropriate file
  72. 72. template _preprocess_node (&$variables) {...}
  73. 73. /sites/all/themes/ drupalcon /template.php
  74. 74. drupalcon _preprocess_node (&$variables) {...}
  75. 75. Clear theme registry </li></ul>
  76. 76. Overriding Template Output <ul>drupalcon _process_node (&$variables, $hook) { <ul>// Specific to 'foo'. <ul>if ($hook == 'foo' ) { </ul>$variables[ 'foo_item' ] = 'foo item' ; } </ul>} <li>base_path () + path_to_theme ()
  77. 77. “ Process” runs after “preprocess”, go figure!
  78. 78. If you get the function name wrong, you get the white screen of death! </li></ul>
  79. 79. render() and hide() <ul><li>New API Functions that Rock in Drupal 7: http://bit.ly/hzXBrp
  80. 80. <?php
  81. 81. hide ($content[ 'field_image' ]);
  82. 82. hide ($content[ 'links' ]);
  83. 83. print render ($content);
  84. 84. // don't forget debug($variables, &quot;field&quot;, TRUE);
  85. 85. print render ($content[ 'field_image' ]);
  86. 86. ?> </li></ul>
  87. 87. Two more ways to hide elements <ul>There are two official CSS classes to hide page elements inside of Drupal, depending on whether you would like screen readers to be able to see the elements: class=”element-hidden” <ul><li>Hidden from everyone </li></ul>class=”element-invisible” <ul><li>Not hidden from screen readers </li></ul>http://drupal.org/update/themes/6/7#element-hidden </ul>
  88. 88. Alter Hooks <ul><li>hook_form_alter()
  89. 89. hook_page_alter()
  90. 90. hook_css_alter()
  91. 91. hook_js_alter()
  92. 92. hook_block_view_alter()
  93. 93. hook_block_view_aggregator_1_alter()
  94. 94. <?php print $classes; ?> </li></ul>
  95. 95. Add CSS and JS Libraries <ul><li>drupal_add_css()
  96. 96. drupal_add_js()
  97. 97. drupal_add_library() </li><ul><li>Add multiple CSS and JS (honors dependency) </li></ul><li>drupal_add_feed()
  98. 98. drupal_add_html_head() </li><ul><li>SEO guys love this one </li></ul><li>drupal_add_region_content() </li></ul>
  99. 99. Conditional Styles – i.e. IE <ul>drupal_add_css ( path_to_theme () . '/css/ie.css' , array ( 'group' => CSS_THEME, 'browsers' => array ( 'IE' => 'lte IE 7' , '!IE' => FALSE, ), 'every_page' => TRUE, ) ); or a module: http://drupal.org/project/conditional_styles </ul>
  100. 100. drupal.org/project/devel_themer Theme Developer Module “ Firebug for Drupal themeing.” Enable it when needed, and disable it afterwards.
  101. 101. Possible Examples <ul><li>Static image mockup to Drupal theme </li><ul><li>i.e. Subtheming http://drupal.org/node/225125 (D6)
  102. 102. Start with Zen, make subtheme
  103. 103. PSD to Drupal Theme http://slidesha.re/8Gl1bu </li></ul><li>Static HTML to Drupal theme http://drupal.org/node/313510 (D6) </li><ul><li>Open Source Web Design example </li></ul></ul>
  104. 104. Helpful Things <ul><li>Devel module: http://www.drupal.org/project/devel
  105. 105. Theme Developer module: http://www.drupal.org/project/devel_themer
  106. 106. Block Class module: http://www.drupal.org/project/block_class
  107. 107. Block Theme module: http://www.drupal.org/project/blocktheme
  108. 108. Menu Attributes module: http://www.drupal.org/project/menu_attributes </li></ul>
  109. 109. Helpful Things (continued) <ul><li>Skinr module: http://www.drupal.org/project/skinr
  110. 110. Zen base theme: http://www.drupal.org/project/zen
  111. 111. Omega base theme: http://www.drupal.org/project/omega
  112. 112. Fusion base theme: http://www.drupal.org/project/fusion
  113. 113. Genesis base theme: http://drupal.org/project/genesis </li></ul>
  114. 114. Helpful Things (even more!) <ul><li>Semantic Views module: http://www.drupal.org/project/semantic_views
  115. 115. “Getting Started with the Blueprint Theme” - http://drupaleasy.com/blueprint
  116. 116. “Getting Started with the 960 Grid System” - http://drupaleasy.com/960
  117. 117. “Front End Drupal” by Emma Jane Hogbin and Konstantin Kafer. Prentice Hall, 2009.
  118. 118. DrupalEasy Podcast Interview with Emma Jane Hogbin - http://drupaleasy.com/frontenddrupal </li></ul>
  119. 119. Helpful Links <ul><li>http://www.drupal.org/
  120. 120. http://groups.drupal.org/theme-development
  121. 121. http://groups.drupal.org/html5
  122. 122. http://groups.drupal.org/tnt-themes
  123. 123. http://design4drupal.org </li><ul><li>Boston
  124. 124. Los Angeles
  125. 125. Prague </li></ul></ul>
  126. 126. Helpful Links <ul><li>Internet Relay Chat - IRC </li><ul><li>http://drupal.org/irc
  127. 127. http://webchat.freenode.net/
  128. 128. Chatzilla (Firefox plugin)
  129. 129. Colloquy (Mac OS X) http://colloquy.info/ </li></ul><li>#drupal-support
  130. 130. #drupal-design
  131. 131. #drupal-html5
  132. 132. #drupal-themes </li></ul>
  133. 133. Helpful Links (get on with it!) <ul><li>Structure of the Theme .info file http://drupal.org/node/171205
  134. 134. Types of Themes http://drupal.org/node/323990 http://drupal.org/node/991278
  135. 135. POSH (Plain Old Semantic HTML) http://drupal.org/node/44072
  136. 136. Set the Maintenance Theme http://api.drupal.org/maintenance-page
  137. 137. Theme Search Results http://api.drupal.org/search-result </li></ul>
  138. 138. More Info about D6 to D7 <ul><li>Convert D6 themes to D7 http://drupal.org/update/themes/6/7
  139. 139. A peek at Drupal 7 theme system changes http://bit.ly/hMwEyp
  140. 140. Grok Drupal 7 Theming Slideshow http://bit.ly/hkv9rL
  141. 141. RDFa and Drupal http://buytaert.net/semantic-web-and-drupal-video </li></ul>
  142. 142. Where to find Themes <ul><li>http://drupal.org/project/Themes
  143. 143. http://themegarden.org (D6)
  144. 144. http://d-theme.com/drupal_7
  145. 145. http://groups.drupal.org/theme-development
  146. 146. http://www.csszengarden.com
  147. 147. http://oswd.org </li></ul>
  148. 148. Follow the Leader <ul>To follow along on your laptop, download: <li>http://acquia.com/downloads
  149. 149. http://drupal.org/download
  150. 150. http://drupal.org/project/zen
  151. 151. http://drupal.org/project/zenophile
  152. 152. http://drupal.org/project/devel
  153. 153. http://drupal.org/project/devel_themer
  154. 154. http://drupal.org/project/block_class </li></ul>
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×