drupal theming fundamentals workshop v3sm.pdf · search engine optimization ... • dependance on...
TRANSCRIPT
Drupal Theming Fundamentals
Gorgeous without Garland
Friday, April 17, 2009
Color ModuleFriday, April 17, 2009
Web DesignA few examples
Friday, April 17, 2009
ExamplesFriday, April 17, 2009
Design ConsiderationsHow your site should look
Friday, April 17, 2009
Your Site
• Site goals
• Navigational priorities
• Brand consistency
Friday, April 17, 2009
Your Audience
• Demographics
• Cultural factors
• Technical Constraints
Friday, April 17, 2009
Layout
• Liquid vs. fixed-width
• Number of columns
• Fonts and type size
• Colour palette
• Emphasize high priority tasks
Friday, April 17, 2009
Layout
• Navigation
• Group logically
• Horiz vs. Vertical
Friday, April 17, 2009
Usability
• Visual cues for links
• F-shaped eye scan
• Deep vs. flat
• Multiple paths to key content
• Cues to place within site
Friday, April 17, 2009
Search Engine Optimization
• Structural considerations
• Most vital content sent first
• Number of links per page
• Breadcrumbs
Friday, April 17, 2009
Technical
• XHTML Strict vs. Transitional
• Browser compatibility
• Target page width
• Dependance on plugins and scripting
Friday, April 17, 2009
Drupal ThemesWholesale change to the look of your site
Friday, April 17, 2009
Anatomy of a Theme
source: drupal.org handbook
Friday, April 17, 2009
.info file
• specify CSS files
• even override those from core
• don’t need template.php
• define page regions
• attach scripts for theming
Friday, April 17, 2009
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)
Friday, April 17, 2009
Theme examplesFriday, April 17, 2009
The Zen Theme
• Clean XHTML and CSS
• Table free
• Consistent across browsers
• Adds useful properties
• Built for subthemes
Friday, April 17, 2009
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="blockinner"
div class="content"
ul class="menu"
div id="block-block-2"
class="block block-block
div class="blockinner"
div class="content"
div id="footer-wrapper"
div id="footer"
Friday, April 17, 2009
Friday, April 17, 2009
5PP
Friday, April 17, 2009
Making Your SubthemeWhere the rubber meets the road
Friday, April 17, 2009
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
Friday, April 17, 2009
Common Properties
• html-elements.css
• Text styles
• Link colour
• General spacing (p, tables, etc.)
Friday, April 17, 2009
Common Properties
• layout.css
• Page width (can make fixed)
• Column widths, spacing
Friday, April 17, 2009
Common Properties
• mytheme.css
• Specific formatting for named ids and classes
• Background and color info
• Detailed positioning
Friday, April 17, 2009
A Hands-On Example
Friday, April 17, 2009
OverridesChanging how elements are built
Friday, April 17, 2009
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;}
Friday, April 17, 2009
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;}
Friday, April 17, 2009
Function Overridesfunction phptemplate_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>'; } }
$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;}
Friday, April 17, 2009
Theme Files
• As of Drupal 6, copy to your theme folder and change
Friday, April 17, 2009
Templates
• page.tpl.php
• Structure of overall page
• Regions
• block.tpl.php
• Markup around blocks
Friday, April 17, 2009
Templates
• node.tpl.php
• comment.tpl.php
• box.tpl.php
Friday, April 17, 2009
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
Friday, April 17, 2009
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
Friday, April 17, 2009
FYI
• Overridden theme functions are cached
• Zen allows you to force this to be constantly refreshed during development
Friday, April 17, 2009
Preprocessors
• in template.php
• themename_preprocess_scope
• Modify variables, potentially within a specific scope
• Suggest other templates
Friday, April 17, 2009
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; } }
}
Friday, April 17, 2009
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
Friday, April 17, 2009
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
Friday, April 17, 2009
The Process
• Site specs
• Initial design
• Initial theme
• Add modules, functionality
• Fine tune theme
Friday, April 17, 2009
DiscussionQuestions, comments, etc.
Friday, April 17, 2009