Meet Your New BFFs hide( $D6 ) && render( $D7 [ ‘awesome’ ]);

Meet Your New BFFs hide($D6) && render($D7[‘awesome’]); Two functions that make D7 Theming simple

Now included in Core • CCK • Is now ‘Fields API’ • Image Field • ImageCache • Is called ‘Image Styles’

Familiar Territory • Theme functions • Preprocess Functions • Regions • Template Files (*.tpl.php)

What’s New in D7 Theming? UPGRADE … its only gotten better!

“Appearance” Page

Enabled themes @ the top of the page

Disabled themes below

Name Changes in D7 Drupal 6 Drupal 7 Menus • Primary Menu • $primary_links • Secondary Menu • $secondary_links Sidebars • Left • $left • Right • $right Menus • Main Menu • $primary_nav • Secondary menu • $secondary_nav Sidebars • First • $page['sidebar_first'] • Last • $page['sidebar_last']

D7 Templates • Core *.tpl.php’s were cleaned • D6’s page.tpl.php from the system module had markup with wrapper classes and other erroneous div structures that were usually overwritten by the enabled theme • ‘phptemplate_’ prefix removed • ‘phptemplate_’ caused issues for the process stack in D6, so it was removed in D7. • It shouldn’t have been used in the theme layer unless you were including it in a module anyway

Global $varsin D7 are keyed arrays! … cause D6’s $variables were a PITA to modify • Ex: $classes is now $classes_array • ‘template_process’ flattens all mentions of ‘classes_array’ into a single string so that $classes can be used globally • These variables are not rendered into HTML until they are processed by the theme layer. This means that modules can modify them much easier. functionTHEME_preprocess_node(&$vars) { $vars[‘classes_array’][] = ‘node-’ . $vars[‘zebra’];}

Decoder Ring not required anymore! D6 and its ‘stoopid classes’ D7’s more intuitive classes • .block-user-0 • .block-search-0 • .clear-block default.css was merged with system.css • .block-user-login • .block-search-form • .clearfix Drupal UA Classes • .element-hidden • .element-invisible Conditional Style Sheets in Core!!! WHAT?!?

Conditional Style Sheets Conditional Style Sheets can now be specified in template.php functionTHEME_preprocess_html(&$vars) { drupal_add_css(path_to_theme() . ‘/fix-ie.css’, array(‘weight’ => CSS_THEME, ‘browsers’ => array(‘IE’ => ‘lte IE 7’, ‘!IE’ => FALSE), ‘preprocess’ => FALSE) ); }

Theme Functions • ALL core theme functions now have ‘preprocess’ & ‘process’ functions • ALL theme functions now only have one parameter passed to them functionTHEME_preprocess_html(&$variables) {} function THEME_process_html(&$variables) {} function THEME_preprocess_FOO(&$variables) {}

D7 Block Regions • Page elements are now blocks - SWEET! • $help • $search_box • $mission • $submitted • $footer_message • $content • There are also hidden regions, which can be populated by the theme layer or by modules. • $page_top • $page_bottom • Hidden regions do NOT appear in Blocks UI regions[FOO] = FOOBAR; regions_hidden[] = FOO;

Templates (*.tpl.php) D6 Template Suggestions • node-TYPE.tpl.php • Requires the ‘node.tpl.php’ be included in your theme • views-view--ViewName-DisplayID-FOO.tpl.php D7 Template Suggestions Theme Hook Suggestions • theme_links() -> overrides all links • theme_links__node() -> overrides only node links • theme_menu_link_MENU_NAME() • theme_menu_tree_MENU_NAME() • etc

Your Friends Have Arrived! • <div id="content"<?phpprint $content_attributes; ?>> • <div id="tags"><?phpprint render($content['field_tags']); ?></div> • <?php • // We hide the comments, referenced taxonomy terms ($field_tags) and $links • // so that we can render them later. • hide($content['field_tags']); • hide($content['comments']); • hide($content['links']); • print render($content); • ?> • <div id=“node-links-wrapper”><?phpprint render($content['links']); ?></div> • <div id=“comments-wrapper”><?phpprint render($content['comments']); ?></div> • </div>

Meet Your New BFFs hide( $D6 ) && render( $D7 [ ‘awesome’ ]);