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.

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

10. Aviary.com (online)

11. GetDrawIt.com (mac)

13. ColorZilla

14. MeasureIt

15. Web Developer Toolbar A Themer's Toolbox

19. Pixie Color Picker (windows) A Themer's Toolbox

21. Styling

22. Colors

23. Behaviors – CSS3

24. Do Web Pages have to look the same in every browser? No. http://dowebsitesneedtolookexactlythesameineverybrowser.com

29. if ( isset ($var)): … endif;

30. if (! empty ($var)): … endif;

31. http://drupal.geek.nz/blog/tplphps-are-not-templates

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

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

45. page—views.tpl.php

47. node--17.tpl.php

48. node--%--edit.tpl.php

50. block--aggregator.tpl.php

54. 'hook_foo'

56. http://api.drupal.org/hook_theme

58. Label

62. Style – how rows are laid out (rows, grid, ...)

63. Row – how each row is laid out

65. api.drupal.org Default Theme Implementations Functions and templates for the user interface to be implemented by themes. http://bit.ly/d7theme

67. theme _user_signature ($node) {...}

68. /sites/all/themes/ drupalcon /template.php

69. drupalcon _user_signature ($node) {...}

70. Clear theme registry

72. template _preprocess_node (&$variables) {...}

73. /sites/all/themes/ drupalcon /template.php

74. drupalcon _preprocess_node (&$variables) {...}

75. Clear theme registry

77. “ Process” runs after “preprocess”, go figure!

78. If you get the function name wrong, you get the white screen of death!

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

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; ?>

96. drupal_add_js()

100. drupal.org/project/devel_themer Theme Developer Module “ Firebug for Drupal themeing.” Enable it when needed, and disable it afterwards.

102. Start with Zen, make subtheme

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

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

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

120. http://groups.drupal.org/theme-development

121. http://groups.drupal.org/html5

122. http://groups.drupal.org/tnt-themes

124. Los Angeles

125. Prague

127. http://webchat.freenode.net/

128. Chatzilla (Firefox plugin)

130. #drupal-design

131. #drupal-html5

132. #drupal-themes

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

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

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

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