Drupal Theme Development - DrupalCon Chicago 2011

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="highlight"> <?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, "field", 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

Drupal Theme Development - DrupalCon Chicago 2011

Recommended

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to Drupal Theme Development - DrupalCon Chicago 2011 (20)

More from Ryan Price (14)

Recently uploaded (20)

Drupal Theme Development - DrupalCon Chicago 2011