Drupal Theming Fundamentals Workshop v3sm.pdf · Search Engine Optimization ... • Dependance on plugins and scripting Friday, April 17, 2009. Drupal Themes Wholesale change to the

Drupal Theming Fundamentals

Gorgeous without Garland

Friday, April 17, 2009

Color ModuleFriday, April 17, 2009

http://local.theming.com/admin/build/themes/settings/garland

http://local.theming.com/admin/build/themes/settings/garland

Web DesignA few examples


ExamplesFriday, April 17, 2009

Design ConsiderationsHow your site should look


Your Site

• Site goals

• Navigational priorities

• Brand consistency


Your Audience

• Demographics

• Cultural factors

• Technical Constraints


Layout

• Liquid vs. fixed-width

• Number of columns

• Fonts and type size

• Colour palette

• Emphasize high priority tasks


Layout

• Navigation

• Group logically

• Horiz vs. Vertical


Usability

• Visual cues for links

• F-shaped eye scan

• Deep vs. flat

• Multiple paths to key content

• Cues to place within site


Search Engine Optimization

• Structural considerations

• Most vital content sent first

• Number of links per page

• Breadcrumbs


Technical

• XHTML Strict vs. Transitional

• Browser compatibility

• Target page width

• Dependance on plugins and scripting


Drupal ThemesWholesale change to the look of your site


Anatomy of a Theme

source: drupal.org handbook


.info file

• specify CSS files

• even override those from core

• don’t need template.php

• define page regions

• attach scripts for theming


Ready-made

• Download and install

• Many to choose from

• Some can be customized via config options

• http://drupal.org/project/themes

• alldrupalthemes.com

• topnotchthemes.com (paid)


http://drupal.org/project/themes

http://drupal.org/project/themes

Theme examplesFriday, April 17, 2009

The Zen Theme

• Clean XHTML and CSS

• Table free

• Consistent across browsers

• Adds useful properties

• Built for subthemes


body class="front logged-in ntype-story both-sidebars"

div id="page"

div id="header"

div id="logo-title"

div id="name-and-slogan"

div id="navigation" class="menu withprimary"

div id="primary" class="clear-block"

ul class="links-menu"

div id="container" class="clear-block"

div id="sidebar-left"

class="column sidebar

div id="block-user-1"

class="block block-user

div class="blockinner"

div class="content"

ul class="menu"

div id="main" class="column"

div id="squeeze"

div class="node ntype-

story" id="node-20"

div class="content"

div class="links"

ul class="links

inline"

div id="comments"

div id="sidebar-right"

class="column sidebar"

div id="block-menu-83"

class="block block-menu"


div class="content"

ul class="menu"

div id="block-block-2"

class="block block-block


div class="content"

div id="footer-wrapper"

div id="footer"



5PP


Making Your SubthemeWhere the rubber meets the road


Setting Up

• Download the Zen theme

• Put the folder into a themes folder i.e sites/all/themes

• Duplicate the STARTERKIT folder

• Create CSS and image files

• Change template.php, .info

• When done, add new screenshots


Common Properties

• html-elements.css

• Text styles

• Link colour

• General spacing (p, tables, etc.)


Common Properties

• layout.css

• Page width (can make fixed)

• Column widths, spacing


Common Properties

• mytheme.css

• Specific formatting for named ids and classes

• Background and color info

• Detailed positioning


A Hands-On Example


OverridesChanging how elements are built


Function Overrides

function theme_aggregator_block_item($item, $feed = 0) { global $user;

$output = ''; if ($user->uid && module_exists('blog') && user_access('create blog entries')) { if ($image = theme('image', 'misc/blog.png', t('blog it'), t('blog it'))) { $output .= '<div class="icon">'. l($image, 'node/add/blog', array('attributes' => array('title' => t('Comment on this news item in your personal blog.'), 'class' => 'blog-it'), 'query' => "iid=$item->iid", 'html' => TRUE)) .'</div>'; } }

// Display the external link to the item. $output .= '<a href="'. check_url($item->link) .'">'. check_plain($item->title) ."</a>\n";

return $output;}


Function Overrides

function theme_aggregator_block_item($item, $feed = 0) { global $user;


// Display the external link to the item. $output .= '<a href="'. check_url($item->link) .'">'. check_plain($item->title) ."</a>\n";

return $output;}


Function Overridesfunction phptemplate_aggregator_block_item($item, $feed = 0) { global $user;


$title = check_plain($item->title); // try to find an image $match = preg_match('|<img .+?>|',$item->description,$img); if ($match) { $title = $img[0] . $title; } // Display the external link to the item. $output .= '<a href="'. check_url($item->link) .'" target="_blank">'. $title ."</a>\n";

return $output;}


Theme Files

• As of Drupal 6, copy to your theme folder and change


Templates

• page.tpl.php

• Structure of overall page

• Regions

• block.tpl.php

• Markup around blocks


Templates

• node.tpl.php

• comment.tpl.php

• box.tpl.php


Suggestions

• node-mycontenttype.tpl.php

• page-contact.tpl.php

• view-widgets.tpl.php

• block-block1.tpl.php

• In Drupal 5, also need to register in template.php


Under the Hood

• template.php

• Construction of specific elements i.e. breadcrumbs

• Add or override variables

• Override theme functions

• theme-settings.php

• Set defaults for theme settings


FYI

• Overridden theme functions are cached

• Zen allows you to force this to be constantly refreshed during development


Preprocessors

• in template.php

• themename_preprocess_scope

• Modify variables, potentially within a specific scope

• Suggest other templates


Preprocessors

function drop_preprocess_page(&$variables) { global $user; // Add a single suggestion. if (module_invoke('throttle', 'status') && isset($user->roles[1])) { $variables['template_file'] = 'page-busy'; }

// Add multiple suggestions. if (!empty($user->roles)) { foreach ($user->roles as $role) { $filter = '![^abcdefghijklmnopqrstuvwxyz0-9-_]+!s'; $string_clean = preg_replace($filter, '-', drupal_strtolower($role)); $variables['template_files'][] = 'page-'. $string_clean; } }

}


Helpful Tools• Textwrangler/TextMate/jEdit/etc.

• Firefox tools: Colorzilla, Firebug, Web Developer Toolbar, YSlow, Live HTTP Headers

• Devel module (Firebug for Drupal theming)

• Dreamweaver extension

• drupal.org Theme Guide


Giving Back

• If your subtheme could be re-used, consider sharing!

• Simply attach an archive of your subtheme folder to a new issue in the Zen issue queue


The Process

• Site specs

• Initial design

• Initial theme

• Add modules, functionality

• Fine tune theme


DiscussionQuestions, comments, etc.


Documents

Drupal Theming Fundamentals Workshop v3sm.pdf · Search Engine Optimization ... • Dependance on plugins and scripting Friday, April 17, 2009. Drupal Themes Wholesale change to the