Two functions that make D7 Theming simple

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

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

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']

Drupal 6 Drupal 7

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 $vars in 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.

function THEME_preprocess_node(&$vars) { $vars[‘classes_array’][] = ‘node-’ . $vars[‘zebra’];}

Decoder Ring not required anymore!

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

D6 and its ‘stoopid classes’ D7’s more intuitive classes

Conditional Style Sheets

Conditional Style Sheets can now be specified in template.php

function THEME_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

function THEME_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 UIregions[FOO] = FOOBAR;

regions_hidden[] = FOO;

Templates (*.tpl.php)

• node-TYPE.tpl.php– Requires the ‘node.tpl.php’ be included in your theme

• views-view--ViewName-DisplayID-FOO.tpl.php

• theme_links() -> overrides all links• theme_links__node() -> overrides only node links• theme_menu_link_MENU_NAME()• theme_menu_tree_MENU_NAME()• etc

D6 Template Suggestions

D7 Template Suggestions Theme Hook Suggestions

Your Friends Have Arrived!

<div id="content"<?php print $content_attributes; ?>> <div id="tags"><?php print 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”><?php print render($content['links']); ?></div>

<div id=“comments-wrapper”><?php print render($content['comments']); ?></div>

</div><!-- /#content -->