Drupal Theme Development - DrupalCon Chicago 2011
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Drupal Theme Development - DrupalCon Chicago 2011

on

  • 12,936 views

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

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.

Statistics

Views

Total Views
12,936
Views on SlideShare
8,980
Embed Views
3,956

Actions

Likes
18
Downloads
530
Comments
3

9 Embeds 3,956

http://drupaleasy.com 3816
http://alifdalya.blogspot.com 113
http://www.drupaleasy.com 7
http://translate.googleusercontent.com 7
http://www.linkedin.com 4
http://localhost 4
url_unknown 3
http://feeds.feedburner.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Drupal Theme Development - DrupalCon Chicago 2011 Presentation Transcript

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