Drupal Theming An Introduction

Drupal Theming An Introduction Thursday, June 25, 2009

Before We Get Going: • Who This Is For: The Aspiring (Curious) Drupal Themer • Assumptions: You know HTML/CSS, Box Model, Have Drupal 6.x Installed • Questions at the End, (please) • Let’s Discuss Further Over Drinks! Thursday, June 25, 2009

Does Theming Make You Feel Like This? Thursday, June 25, 2009

Then You Can Probably Do This: Thursday, June 25, 2009

What Custom Theming Can Look Like: Thursday, June 25, 2009

If Not, Thursday, June 25, 2009

Some Familiar Themes: • Thursday, June 25, 2009

Where Do I Get More Themes? Drupal.org Thursday, June 25, 2009

Theme Design Principles • Grid - 960px or 1024px width • 5 Major Regions = Header, Footer, Left, Center & Right • Align Text and Images • Grab color schemes from nature • Design for content not vice versa Thursday, June 25, 2009

Skills You Will Need: • Curiosity: A willingness to inspect existing themes for structure, layout and style. • Knowledge of CSS: Enough to edit properties, change backgrounds, add images, etc. • XHTML & PHP - it helps to understand what content is printed where. • JavaScript (jQuery) for something extra Thursday, June 25, 2009

Drupal Theming Is Not Inherently Harder Than Designing for WordPress, but: • Drupal sites can be much BIGGER: • More Users • More Functionality • More Data • More Regions to Theme Thursday, June 25, 2009

Theming Caveats • Don’t hack core • Don’t hack module • Don’t hack Zen Theme • Intercept, subtheme & override instead Thursday, June 25, 2009

Two Main Approaches Write Scripts Extend Scripts Create *.CSS Files Override CSS Create Your Own Templates Override Existing Templates Write .info File From Scratch Copy .info File, Add “Base Theme” Static HTML/CSS Static HTML/CSS Mockup Mockup Build From Scratch Build From Subtheme Thursday, June 25, 2009

Introduction In 4 Parts • 1. Theme Anatomy • 2. Basic Build from Static HTML/CSS • 3. Create a Zen SubTheme • 4. Tools & Tricks Thursday, June 25, 2009

Part 1: Drupal Theme Anatomy sites/all/themes/foo • .info File • Theming Engines • Template Language • PHPTemplates • CSS, Images • Scripting Thursday, June 25, 2009

Building A Page For Display 1. Browser retrieves dynamic information from the database. 2. Browser checks retrieved data against relevant output filters. 3. Server Inserts information into each core template. 4. Theme Engine Merges template files into template.php 5. Browser displays formatted page in the Web Browser. Thursday, June 25, 2009

Drupal Theme Stack PHP Theme PHPTemplate Theme Don’t Hack These Thursday, June 25, 2009

Drupal 6.x Separating Design & Logic • .info files define your theme • More templates = more control, better separation • Better phptemplate_variables() • Theme inheritance makes subtheming and overriding possible • Pure CSS themes are also possible Thursday, June 25, 2009

Theme Engines (PHPTemplate comes with Core) • PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup • Work With Other Template Languages: Smarty, PHPTAL, LOLTheme • Register an extension -- .smarty • Register a renderer – smarty_template_render() • Discover templates on behalf of the theme • Load a template.php file on behalf of the theme Thursday, June 25, 2009

PHPTemplate • Written for Drupal by Adrian Rossouw • Uses foo.tpl.php files to theme Drupal's theme_foo() functions • See handout for themable functions • You can write an entire theme in PHP, but why? • Most common Thursday, June 25, 2009

Directory Structure of Theme Engines Thursday, June 25, 2009

PHPTemplate Engine Wrapper that interfaces Drupal Template Language • Understands HTML & PHP Statements for Dynamic Data • Comes installed, so you need not touch it. • File Extension - *.tpl.php • Handles - page.tpl.php, front-page.tpl.php, node.tpl.php, comment.tpl.php, forum.tpl.php Thursday, June 25, 2009

PHP: Generates Dynamic Content HTML <?PHP Page ?> Client <?PHP Web HTML Page PHPTemplate ?> Drupal Core Browser HTML <?PHP Page ?> Drupal MySQL Database (Views Is Basically a Query Builder) Thursday, June 25, 2009

template.php • Conditional logic & data processing of output • Preprocessors for generating variables before merging .tpl.php files - each individual template file gets assigned to regions • Use to override theme functions here & do other raw output customization Thursday, June 25, 2009

What Is A Preprocessor Function For? • Setup variables to be placed within the template (.tpl.php) files. Plain theme functions do not interact with preprocessors. • When overriding CSS and editing Template files just is not enough. Thursday, June 25, 2009

Preprocessor Functions • [engineName]_preprocess: Will apply to all hooks. Base Theme • [engineName]_preprocess_ [hookname]: specific to a single hook. • [themeName]_preprocess: Will apply to all hooks. Subtheme • [themeName]_preprocess_ [hookname]: specific to a single hook Thursday, June 25, 2009

Order of Preprocessor Functions $theme_preprocess_$hook Theme $theme_preprocess() Theme phptemplate_preprocess_$hook() Engine phptemplate_preprocess() $modulename_preprocess_$hook() Modules $modulename_preprocess() $template_preprocess_$hook Core $template_preprocess() Thursday, June 25, 2009

So, what should I use to control dynamic content display? Template Files Theme Functions Build a single output variable and Output is printed return it. <?php print $variable; ?> $output = “output”; Easier to use if mixing in a lot of plain Easier to use if using control structures html. and loops. Thursday, June 25, 2009

3 Common block.tpl.php Template Files Navigation Blog Post 1 Who’s Online node.tpl.php Syndicate Blog Post 2 page.tpl.php Thursday, June 25, 2009

Each Template Handles A Region of Your Site • page.tpl.php - Entire Page • front-page.tpl.php - Just Front Page • block.tpl.php - Blocks • comment.tpl.php - Comments • forum.tpl.php - Forums Thursday, June 25, 2009

Template Hierarchy - Specific before General Home Page Nodes page-front.tpl.php node-type.tpl.php page.tpl.php node.tpl.php Comments Pages comment.tpl.php page-node-edit.tpl.php page-node-1.tpl.php page-node.tpl.php Blocks page.tpl.php block-module-delta.tpl.php block-module.tpl.php Boxes block-region.tpl.php block.tpl.php box.tpl.php Thursday, June 25, 2009

zen.info metadata name = internal theme name zen.info description = one sentence engine = phptemplate Text Drupal version, 6.x CSS stylesheets Regions Features Thursday, June 25, 2009

Lastly, the Screenshot • Gives your users/ admins a preview of your theme • See drupal.org screenshot guidelines if you want to contribute your theme. • (*please contribute!) Thursday, June 25, 2009

*WHEW* • Do I really need all these files to create a theme? • No - all you need is .info, the rest overrides Drupal default ($left, $right, $footer) • Should I hack a contributed theme? No - find a suitable theme to inherit from. Thursday, June 25, 2009

Part Two: Build A Simple Theme From Static HTML/CSS • Look At Mockup • Write *.tpl files • Incorporate CSS Thursday, June 25, 2009

Static HTML Page DrupalAustin Header Home | About | Contact | Projects | Events Left Center Right Navigation DrupalAustin’s Been Busy Search Drupal Austin has been busy lately, making awesome sites. Menu 1 Drupal Austin has been busy lately, making awesome sites. Menu 2 Drupal Austin has been busy lately, making awesome sites. Menu 3 Menu 4 Menu 5 DrupalAustin’s Party Menu 6 Drupal Austin has been busy lately, making awesome sites. Menu 7 Drupal Austin has been busy lately, making awesome sites. Menu 8 Drupal Austin has been busy lately, making awesome sites. Menu 9 Menu 10 Drupal 7’s UI Overhaul Update Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Footer Thursday, June 25, 2009

Regions: $header, $center, $left, $right, $footer DrupalAustin Header Home | About | Contact | Projects | Events Left Center Right Navigation DrupalAustin’s Been Busy Search Drupal Austin has been busy lately, making awesome sites. Menu 1 Drupal Austin has been busy lately, making awesome sites. Menu 2 Drupal Austin has been busy lately, making awesome sites. Menu 3 Menu 4 Menu 5 DrupalAustin’s Party Menu 6 Drupal Austin has been busy lately, making awesome sites. Menu 7 Drupal Austin has been busy lately, making awesome sites. Menu 8 Drupal Austin has been busy lately, making awesome sites. Menu 9 Menu 10 Drupal 7’s UI Overhaul Update Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Footer Thursday, June 25, 2009

Region: $header DrupalAustin Header Home | About | Contact | Projects | Events Left Center Right Navigation DrupalAustin’s Been Busy Search Drupal Austin has been busy lately, making awesome sites. Menu 1 Drupal Austin has been busy lately, making awesome sites. Menu 2 Drupal Austin has been busy lately, making awesome sites. Menu 3 Menu 4 Menu 5 DrupalAustin’s Party Menu 6 Drupal Austin has been busy lately, making awesome sites. Menu 7 Drupal Austin has been busy lately, making awesome sites. Menu 8 Drupal Austin has been busy lately, making awesome sites. Menu 9 Menu 10 Drupal 7’s UI Overhaul Update Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Footer Thursday, June 25, 2009

Head of page.tpl.php HTML page.tpl.php <html xmlns-http://www.w3.org/1999/xhtml dir= “ltr”> <head> <html xmlns-http://www.w3.org/1999/xhtml dir= <style type= “text/css” title= “currentStyle”> “ltr”> @import “style.css”; <head> </style> <title> <meta http-equiv= “Content-Type” content= <?php print $head_title ?></title> “text/html ; charset=iso-8859-1” /> <?php print $head ?> <title>yourdomain.com</title> <?php $styles ?> <meta name= “description” content= <?php $scripts ?> “description” /> </head> <meta name= “Keywords” content= “keywords” / <title><?php print $head_title ?></title> > <?php print $head ?> <meta name= “robots” content- “index,follow” /> <?php print $styles ?> </head> <?php print $scripts ?> Thursday, June 25, 2009

Head $variables • $head_title: A modified version of the page title, for use in the TITLE tag • $head: Markup for the HEAD section (including meta tags, keyword tags, and so on) • $scripts: Script tags necessary to load the JavaScript files and settings for the page. Thursday, June 25, 2009

Region: $header DrupalAustin Header Home | About | Contact | Projects | Events Left Center Right Navigation DrupalAustin’s Been Busy Search Drupal Austin has been busy lately, making awesome sites. Menu 1 Drupal Austin has been busy lately, making awesome sites. Menu 2 Drupal Austin has been busy lately, making awesome sites. Menu 3 Menu 4 Menu 5 DrupalAustin’s Party Menu 6 Drupal Austin has been busy lately, making awesome sites. Menu 7 Drupal Austin has been busy lately, making awesome sites. Menu 8 Drupal Austin has been busy lately, making awesome sites. Menu 9 Menu 10 Drupal 7’s UI Overhaul Update Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Footer Thursday, June 25, 2009

More Region: $header <div class= “header” id= “h”> <div class= “header” id= “h”> <?php if ($logo || $site_name) {if (!$logo) { <h1>Your Site</h1> print ‘<a href= “. check_url($front_page) . “ <a href= “#”><img src= “images/logo.gif” alt= title= “. $site_title . “ >’; “site” /></a> print ‘<img src= “. check_url($logo) . “ alt= “. <ul> $site_title . “ id= “logo” /></a>’; <li><a href= “#”>Home</a></li> } <li><a href= “#”>About Us</a></li> print ‘<h1>’. $site_name .’</h1>’; <li><a href= “#”>Contact</a></li> } <li><a href= “#”>Projects</a></li> </div> <li><a href= “#”>Events</a></li> </ul> <?php if (isset($primary_links)) : ?> </div> <?php print theme(‘links’ , $primary_links, array(‘class’ => ‘links primary-links’)) ?> <?php endif; ?> $logo: The path to the logo image, as defined in theme configuration. $site_name: The name of the site, empty when display has been disabled in theme settings. $front_page: The URL of the front page. Use this instead of $base_path, when linking to the front page. This includes the language domain or prefix $primary_links (array): An array containing primary navigation links for the site, if they have been configured. $secondary_links (array): An array containing secondary navigation links for the site, if they have been configured. Thursday, June 25, 2009

Region: $left DrupalAustin Header Home | About | Contact | Projects | Events Left Center Right Navigation DrupalAustin’s Been Busy Search Drupal Austin has been busy lately, making awesome sites. Menu 1 Drupal Austin has been busy lately, making awesome sites. Menu 2 Drupal Austin has been busy lately, making awesome sites. Menu 3 Menu 4 Menu 5 DrupalAustin’s Party Menu 6 Drupal Austin has been busy lately, making awesome sites. Menu 7 Drupal Austin has been busy lately, making awesome sites. Menu 8 Drupal Austin has been busy lately, making awesome sites. Menu 9 Menu 10 Drupal 7’s UI Overhaul Update Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Footer Thursday, June 25, 2009

Region: $left HTML page.tpl.php <div id=”left”> <div class= “menu”> <h3>Menu</h3> <ul class= “ul1”> <li><a href= “#”>Menu 1</a></li> <li><a href= “#”>Menu 2</a></li> <div id= “left”> <li><a href= “#”>Menu 3</a></li> <?php if ($left) : ?> <li><a href= “#”>Menu 4</a></li> <?php print $left ?> <li><a href= “#”>Menu 5</a></li> <li><a href= “#”>Menu 6</a></li> <?php endif; ?> <li><a href= “#”>Menu 7</a></li> </div> <li><a href= “#”>Menu 8</a></li> <li><a href= “#”>Menu 9</a></li> <li><a href= “#”>Menu 10</a></li> </ul> </div> </div> $left: The HTML for the left sidebar Thursday, June 25, 2009

Region: $right DrupalAustin Header Home | About | Contact | Projects | Events Left Center Right Navigation DrupalAustin’s Been Busy Search Drupal Austin has been busy lately, making awesome sites. Menu 1 Drupal Austin has been busy lately, making awesome sites. Menu 2 Drupal Austin has been busy lately, making awesome sites. Menu 3 Menu 4 Menu 5 DrupalAustin’s Party Menu 6 Drupal Austin has been busy lately, making awesome sites. Menu 7 Drupal Austin has been busy lately, making awesome sites. Menu 8 Drupal Austin has been busy lately, making awesome sites. Menu 9 Menu 10 Drupal 7’s UI Overhaul Update Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Footer Thursday, June 25, 2009

Right Side Bar HTML page.tpl.php <div id= “r”> <div id= “r”> <div class= “menu”> <?php if ($search_box): ?> <h3>Search</h3> <div class=”block_menu”> <form action= “”> <h3>Search</h3><?php print $search_box ?> <input name=”search” type=”text” class=”text” </div> maxlength=”50”/> <?php endif; ?> <input type=”submit” value=”OK” class <?php if ($right): ?> “submit” /> <?php print $right ?> </form> <?php endif; ?> </div> </div> </div> $search_box: HTML to display the search box, empty if search has been disabled. $right: HTML for the right sidebar Thursday, June 25, 2009

Region: $footer DrupalAustin Header Home | About | Contact | Projects | Events Left Center Right Navigation DrupalAustin’s Been Busy Search Drupal Austin has been busy lately, making awesome sites. Menu 1 Drupal Austin has been busy lately, making awesome sites. Menu 2 Drupal Austin has been busy lately, making awesome sites. Menu 3 Menu 4 Menu 5 DrupalAustin’s Party Menu 6 Drupal Austin has been busy lately, making awesome sites. Menu 7 Drupal Austin has been busy lately, making awesome sites. Menu 8 Drupal Austin has been busy lately, making awesome sites. Menu 9 Menu 10 Drupal 7’s UI Overhaul Update Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Footer Thursday, June 25, 2009

Footer HTML page.tpl.php <div class= “footer” id=”f”> <div class= “footer” id = “f”> <?php print $footer ?> </div> </div> </body> <?php print $closure ?> </body> $footer : The footer region. $closure: Final closing markup from any modules that have altered the page. This variable should always be output last, after all other dynamic content. Thursday, June 25, 2009

Regions: $header, $center, $left, $right, $footer DrupalAustin Header Home | About | Contact | Projects | Events Left Center Right Navigation DrupalAustin’s Been Busy Search Drupal Austin has been busy lately, making awesome sites. Menu 1 Drupal Austin has been busy lately, making awesome sites. Menu 2 Drupal Austin has been busy lately, making awesome sites. Menu 3 Menu 4 Menu 5 DrupalAustin’s Party Menu 6 Drupal Austin has been busy lately, making awesome sites. Menu 7 Drupal Austin has been busy lately, making awesome sites. Menu 8 Drupal Austin has been busy lately, making awesome sites. Menu 9 Menu 10 Drupal 7’s UI Overhaul Update Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Footer Thursday, June 25, 2009

Add CSS Styling • Put Header Div at the Top at 960px width • Create a Container Div to Hold Left, Center & Right - Use Floats and Left-Margins to clear the Center & Right from the Left • Put Footer Div at the Bottom at 960px width • For this simply layout, there are many CSS templates available • (The details are a bit out of this presentation’s scope) Thursday, June 25, 2009

From-Scratch, Recap • We created the page.tpl.php file • We converted 5 HTML Divs to Template Regions: Header, Center, Left, Right & Footer • Next: Create style.css to style the page.tpl.php’s HTML output • To add more dynamic content we can either • Add its <?php ?> directly to page.tpl.php • Write more *.tpl.php files: node.tpl.php, block.tpl.php, box.tpl.php Thursday, June 25, 2009

Is There An Easier Way? • There sure is: Subtheming • Subthemes allow you to build on existing template files, CSS and Scripts • Remove what you do not need • Work from a mockup, just the same and “shop” for components • You can even convert a WordPress theme! Thursday, June 25, 2009

Part Three: Create A Subtheme Base Theme Parent Subtheme Child Thursday, June 25, 2009

6.x - CSS Only Themes • Core page.tpl.php theme based on zen • Uses well-named classes to identify areas • A theme with just an .info file will create an ugly site but with clean XHTML that can be manipulated Thursday, June 25, 2009

Subtheme in 7 Steps • 1. Wireframe/Mockup in Photoshop, Illustrator, Fireworks • 2. Create Static HTML/CSS Files in Text Editor • 3. Clone Base Theme from Download • 4. Create Subtheme in Localhost • 5. Override Templates in *.tpl.php files • 6. Add JavaScript and jQuery, if necessary • 7. Override themable functions in template.php Thursday, June 25, 2009

Theme Override Layers d SubTheme Override Base Theme c Theme Override Theme Engine Override b Modules a Core a: Default Theming Implementation Thursday, June 25, 2009

Theme Inheritance • Unless you already have expert knowledge of Drupal Theming, start with an existing theme and customize it. • Sub theme sets “base theme” in .info file • Gains all style sheets, templates, all functions in template.php • Sub theme should never use phptemplate_* functions • Safest way to ‘tweak’ a theme and still be able to upgrade the theme Thursday, June 25, 2009

Theme vs. Sub-Theme Thursday, June 25, 2009

Subtheme Basics • Inherits resources from the parent theme • Name the base theme in .info file • Does not have to be in subdirectory of parent theme (unlike Drupal 5) • Put in sites/all/themes with your custom theme named folder Thursday, June 25, 2009

How to Install A Base Theme • Go to Drupal.org/projects/themes • Log in and filter by Drupal version • Save to desktop, unzip • Create folder location sites/all/themes in your Drupal directory • Go to admin/build/themes and enable/configure new theme Thursday, June 25, 2009

Working From Base Theme Base Theme Subtheme1 Subtheme2 Subtheme3 Music Site Newspaper Blog Music Site A Music Site B Newspaper A Newspaper B Blog A Blog A Thursday, June 25, 2009

Starting With Zen • Flexible standards-compliant and semantically correct XHTML theme • Easily modified through CSS/enhanced version of Drupal’s template system. • Out of the box, Zen is clean and simple with either a one, two, or three column layout of fixed or liquid width. In addition, the HTML source order has content placed before sidebars or the navbar for increased accessibility and SEO. Thursday, June 25, 2009

Zen Features • Well documented php and css files. • Lots of easy-to-access classes and ids for CSS developers. • Classes on body include items like "logged-in", "not-logged-in", "front", "not-front", as well as the node type ("node-type-story", "node-type-blog", etc) for single node pages. * Automatic (table-less) column resizing for 1, 2, and 3-column layouts. • Separate layout.css file to allow for changing the type of column layout (holy grail, jello mold, etc). • A print.css file optimizes print display automatically when sent to a printer — removes, sidebars and nav elements, optimizes font size, adds text to links showing href, etc. Thursday, June 25, 2009

Subtheme of Zen • The base Zen theme is designed to be easily extended by its subthemes. • You shouldn't modify any of the CSS or PHP files in the zen/ folder; but instead you should create a sub-theme of zen which is located in a folder outside of the root zen/ folder. • The examples below assume zen and your sub-theme will be installed in sites/all/themes/, but any valid theme directory is acceptable (see “Getting started” for more info.) Thursday, June 25, 2009

Our DrupalAustin Mockup Again DrupalAustin Header Home | About | Contact | Projects | Events Left Center Right Navigation DrupalAustin’s Been Busy Search Drupal Austin has been busy lately, making awesome sites. Menu 1 Drupal Austin has been busy lately, making awesome sites. Menu 2 Drupal Austin has been busy lately, making awesome sites. Menu 3 Menu 4 Menu 5 DrupalAustin’s Party Menu 6 Drupal Austin has been busy lately, making awesome sites. Menu 7 Drupal Austin has been busy lately, making awesome sites. Menu 8 Drupal Austin has been busy lately, making awesome sites. Menu 9 Menu 10 Drupal 7’s UI Overhaul Update Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Drupal Austin has been busy lately, making awesome sites. Footer Thursday, June 25, 2009

3 Column Fixed Right/Left Fluid Center Thursday, June 25, 2009

Zen Layout Thursday, June 25, 2009

Zen Options Thursday, June 25, 2009

Step One: Copy Zen Starter Kit • Copy the STARTERKIT folder out of the zen/ folder and rename it to be your new sub-theme. • IMPORTANT: Only lowercase letters and underscores should be used for the name of your sub-theme. • For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it as sites/all/themes/foo. • Why? Each theme should reside in its own folder. Unlike in Drupal 5, sub-themes can (and should) reside in a folder separate from their base theme. Thursday, June 25, 2009

Save in sites/all/themes Thursday, June 25, 2009

Define Base Theme foo.info file • base theme = Zen • style sheets are defined in parent theme • JavaScript defined in parent theme • All template *tpl.php files • Anything defined from the “template.php” file including theme function overrides, preprocessors or anything else Thursday, June 25, 2009

Choose Fixed 3 Column Layout • Copy the layout-fixed.css from the zen/zen folder and place it in your sub-theme's folder. Rename the layout stylesheet to "layout.css". • For example, copy zen/zen/layout-fixed.css and rename it as foo/ layout.css. Note that the .info file already has an entry for your layout.css file. • Why? In Drupal 6 theming, if you want to modify a stylesheet included by the base theme or by a module, you should copy the stylesheet from the base theme or module's directory to your subtheme's directory and then add the stylesheet to your .info file. See the Drupal 6 Theme Guide for more info. Thursday, June 25, 2009

Copy Zen Stylesheet • Copy the zen stylesheet & save in subtheme's folder. Rename it. • zen/zen/zen.css foo/foo.css. • Your .info file overrides the base theme's zen.css file. Thursday, June 25, 2009

Copy HTML-elements Stylesheet • Place it in your sub-theme's folder. • For example, copy zen/zen/html- elements.css to foo/html-elements.css. Note that the .info file already has an entry for your html-elements.css file. Thursday, June 25, 2009

Edit template.php & themesettings.php • Replace ALL occurrences of "STARTERKIT" with the name of your sub-theme. • For example, edit foo/template.php and foo/theme-settings.php and replace "STARTERKIT" with "foo". Thursday, June 25, 2009

Enable Your Subtheme! • # Log in as an administrator on your Drupal site and go to Administer > Site building > Themes (admin/build/ themes) and enable your new subtheme. Thursday, June 25, 2009

Customization • CSS: Most changes can be made just with CSS. You can create forms.css, for example, just to theme forms. Remember: add this to your theme’s .info file & clear your cache! • PHP: Remove the regions you do not need. Zen is pretty good about not giving you a lot of styling to remove before getting going. • jQuery Example: Use to add a class to a tag when hovering on it: $(this) .hover ( function() { $ (this) .addClass(‘hover’); }, function () { $(this) .removeClass(‘hover’); Thursday, June 25, 2009

Part 4: Ninja Tips & Tricks • Tools! • Preprocessor Functions • template.php • Customizing data output • More template files for more control Thursday, June 25, 2009

Great Tools For Analyzing Design • Firebug Plugin for Firefox • Gridfox Plugin for Firefox • Devel Module - Drupal Suite • Web Developer Plugin, also for Firefox Thursday, June 25, 2009

Novell Communities Thursday, June 25, 2009

Firebug: • “Inspect” page elements • Edit CSS properties, view edits immediately • Display Box Model – width, padding, margins • JavaScript debugger – pause your scripts • DOM inspector Thursday, June 25, 2009

Firebug Plugin Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page Thursday, June 25, 2009

Inspecting IDs in Firebug Thursday, June 25, 2009

Gridfox - 960px Grid Thursday, June 25, 2009

Grids • 960 Grid system http://960.gs/ • Blueprint CSS http://www.blueprintcss.org • YUI Grids CSS http://developer.yahoo.com/ yui/grids • 960px Gridded Themes: Four Seasons, Framework, Hiroshige, Newswire, Sky Thursday, June 25, 2009

Firebug Lite • JavaScript file to simulate some Firebug features in other browsers • http:// getfirebug.c om/lite.html Thursday, June 25, 2009

Stealther Firefox Plugin • Temporarily disables saved information - caches, cookies, histories, form information • Quickly view how site looks for users not logged in • https:// addons.mozilla.org/en-US/ firefox/addon/1306 Thursday, June 25, 2009

Devel Module - Suite for Theme & Module Dev • http:/drupal.org/projects/ devel • Tip: Give all users Devel Module permissions to clear the cache without being logged in. ONLY for development sites! • Great for exposing function calls and elements, including whether or not the node is a teaser. This happens to be boolean. Thursday, June 25, 2009

Theming for Views Great way to keep track of function calls. Views is one of the harder (and more necessary) modules to theme. Views can produce all kinds of lists of content. Views is basically a SQL query builder. Thursday, June 25, 2009

Browsershots.org • Identify problems in other browsers • Multiple screenshots for troubleshooting • Takes up to 30 Minutes to generate the screenshots Thursday, June 25, 2009

Zotero • Firefox extension which allows you to take a snapshot of a webpage along with your notes on it, take notes on a per page basis, add tags to a page, rename page title Thursday, June 25, 2009

Design & Web Standards • http://www.alistapart.com/topics/ • http://www.csszengarden.com/ • http://www.thinkvitamin.com/ • http://www.uxmag.com/ • http://getfirebug.com/ Thursday, June 25, 2009

Modules • Read the theme section in the module developers guide. • Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites – (this process is theming) • Logic must be separated as much as possible from presentation • Modules do as much of the work on the data as possible, and hand that data off to the presentation layer. • Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation. • Handled through the theme() function, called a “theme hook” Thursday, June 25, 2009

Drupal API: Node Types • Most content in Drupal are referred to as nodes; content type and node type are roughly equivalent. Node attributes that you may need to know about are: • nid: the node’s ID. • vid: the version ID for the node. • type: basically, the content type, such as a page or blog. • uid: the author’s user ID. • status: whether published/visible (= 1) or unpublished/hidden (= 0). Thursday, June 25, 2009

For Reference: Thursday, June 25, 2009

Ways To Contribute • Clean up XHTML and CSS • Help create a set of well-named classes to use across Drupal • Help create templates that do not yet exist Thursday, June 25, 2009

Thanks! • Feel free to ask questions. Thursday, June 25, 2009

http://zqun.net	17
http://www.slideshare.net	15
http://localhost	4
http://www.laurennroth.com	3
http://jielaodi.com	2
https://www.mturk.com	1
http://jyetais-v6.be:8080	1
http://www.voltimum.com.co	1
http://www.techgig.com	1

Drupal Theming An Introduction

by Lauren Roth on Jun 25, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 45

Statistics

Drupal Theming An Introduction — Presentation Transcript