drupal theming an introduction
DESCRIPTION
Presentation on 24 June: Theme anatomy, Theme From Static HTML/CSS, Theme from Zen Subtheme, Tools and TricksTRANSCRIPT
Drupal Theming
An Introduction
Thursday June 25 2009
Before We Get Going
bull Who This Is For The Aspiring (Curious) Drupal Themer
bull Assumptions You know HTMLCSS Box Model Have Drupal 6x Installed
bull Questions at the End (please)
bull Letrsquos 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
bull
Thursday June 25 2009
Where Do I Get More Themes Drupalorg
Thursday June 25 2009
Theme Design Principles
bull Grid - 960px or 1024px width
bull 5 Major Regions = Header Footer Left Center amp Right
bull Align Text and Images
bull Grab color schemes from nature
bull Design for content not vice versa
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Before We Get Going
bull Who This Is For The Aspiring (Curious) Drupal Themer
bull Assumptions You know HTMLCSS Box Model Have Drupal 6x Installed
bull Questions at the End (please)
bull Letrsquos 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
bull
Thursday June 25 2009
Where Do I Get More Themes Drupalorg
Thursday June 25 2009
Theme Design Principles
bull Grid - 960px or 1024px width
bull 5 Major Regions = Header Footer Left Center amp Right
bull Align Text and Images
bull Grab color schemes from nature
bull Design for content not vice versa
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
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
bull
Thursday June 25 2009
Where Do I Get More Themes Drupalorg
Thursday June 25 2009
Theme Design Principles
bull Grid - 960px or 1024px width
bull 5 Major Regions = Header Footer Left Center amp Right
bull Align Text and Images
bull Grab color schemes from nature
bull Design for content not vice versa
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
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
bull
Thursday June 25 2009
Where Do I Get More Themes Drupalorg
Thursday June 25 2009
Theme Design Principles
bull Grid - 960px or 1024px width
bull 5 Major Regions = Header Footer Left Center amp Right
bull Align Text and Images
bull Grab color schemes from nature
bull Design for content not vice versa
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
What Custom Theming Can Look Like
Thursday June 25 2009
If Not
Thursday June 25 2009
Some Familiar Themes
bull
Thursday June 25 2009
Where Do I Get More Themes Drupalorg
Thursday June 25 2009
Theme Design Principles
bull Grid - 960px or 1024px width
bull 5 Major Regions = Header Footer Left Center amp Right
bull Align Text and Images
bull Grab color schemes from nature
bull Design for content not vice versa
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
If Not
Thursday June 25 2009
Some Familiar Themes
bull
Thursday June 25 2009
Where Do I Get More Themes Drupalorg
Thursday June 25 2009
Theme Design Principles
bull Grid - 960px or 1024px width
bull 5 Major Regions = Header Footer Left Center amp Right
bull Align Text and Images
bull Grab color schemes from nature
bull Design for content not vice versa
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Some Familiar Themes
bull
Thursday June 25 2009
Where Do I Get More Themes Drupalorg
Thursday June 25 2009
Theme Design Principles
bull Grid - 960px or 1024px width
bull 5 Major Regions = Header Footer Left Center amp Right
bull Align Text and Images
bull Grab color schemes from nature
bull Design for content not vice versa
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Where Do I Get More Themes Drupalorg
Thursday June 25 2009
Theme Design Principles
bull Grid - 960px or 1024px width
bull 5 Major Regions = Header Footer Left Center amp Right
bull Align Text and Images
bull Grab color schemes from nature
bull Design for content not vice versa
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Theme Design Principles
bull Grid - 960px or 1024px width
bull 5 Major Regions = Header Footer Left Center amp Right
bull Align Text and Images
bull Grab color schemes from nature
bull Design for content not vice versa
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Skills You Will Needbull Curiosity A willingness to inspect existing
themes for structure layout and style
bull Knowledge of CSS Enough to edit properties change backgrounds add images etc
bull XHTML amp PHP - it helps to understand what content is printed where
bull JavaScript (jQuery) for something extra
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
bull Drupal sites can be much BIGGER
bull More Users
bull More Functionality
bull More Data
bull More Regions to Theme
Drupal Theming Is Not Inherently Harder Than Designing for
WordPress but
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Theming Caveats
bull Donrsquot hack core
bull Donrsquot hack module
bull Donrsquot hack Zen Theme
bull Intercept subtheme amp override instead
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Two Main Approaches
Build From Scratch Build From Subtheme
Static HTMLCSS Static HTMLCSS
Mockup Mockup
Create CSS Files
Create Your Own Templates
Extend Scripts
Override CSS
Override Existing Templates
Write Scripts
Write info File From Scratch Copy info File Add ldquoBase Themerdquo
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Introduction In 4 Parts
bull 1 Theme Anatomy
bull 2 Basic Build from Static HTMLCSS
bull 3 Create a Zen SubTheme
bull 4 Tools amp Tricks
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
bull info File
bull Theming Engines
bull Template Language
bull PHPTemplates
bull CSS Images
bull Scripting
Part 1 Drupal Theme Anatomy
sitesallthemesfoo
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
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 templatephp
5 Browser displays formatted page in the Web Browser
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Drupal Theme StackPHPTemplate ThemePHP Theme
Donrsquot Hack These
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Drupal 6xSeparating Design amp Logic
bull info files define your theme
bull More templates = more control better separation
bull Better phptemplate_variables()
bull Theme inheritance makes subtheming and overriding possible
bull Pure CSS themes are also possible
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Theme Engines(PHPTemplate comes with Core)
bull PHPTemplate Uses the language PHP when outputting variables mixed in with the xHTML markup
bull Work With Other Template Languages Smarty PHPTAL LOLTheme
bull Register an extension -- smarty
bull Register a renderer ndash smarty_template_render()
bull Discover templates on behalf of the theme
bull Load a templatephp file on behalf of the theme
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
PHPTemplate
bull Written for Drupal by Adrian Rossouw
bull Uses footplphp files to theme Drupals theme_foo() functions
bull See handout for themable functions
bull You can write an entire theme in PHP but why
bull Most common
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Directory Structure of Theme Engines
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
PHPTemplate Engine
bull Understands HTML amp PHP Statements for Dynamic Data
bull Comes installed so you need not touch it
bull File Extension - tplphp
bull Handles - pagetplphp front-pagetplphp nodetplphp commenttplphp forumtplphp
Wrapper that interfaces
Drupal Template Language
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
PHP Generates Dynamic Content
PHPTemplate
ltPHPgt
ltPHPgt
ltPHPgt
Drupal Core
Drupal MySQLDatabase
HTML Page
HTML Page
HTML Page
Client Web
Browser
(Views Is Basically a Query Builder)
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
templatephp
bull Conditional logic amp data processing of output
bull Preprocessors for generating variables before merging tplphp files - each individual template file gets assigned to regions
bull Use to override theme functions here amp do other raw output customization
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
What Is A Preprocessor Function For
bull Setup variables to be placed within the template (tplphp) files Plain theme functions do not interact with preprocessors
bull When overriding CSS and editing Template files just is not enough
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Preprocessor Functions
bull [engineName]_preprocess Will apply to all hooks
bull [engineName]_preprocess_ [hookname] specific to a single hook
bull [themeName]_preprocess Will apply to all hooks
bull [themeName]_preprocess_ [hookname] specific to a single hook
Base Theme
Subtheme
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Order of Preprocessor Functions
$theme_preprocess_$hook
$theme_preprocess()
phptemplate_preprocess_$hook()
phptemplate_preprocess()
$modulename_preprocess_$hook()
$modulename_preprocess()
$template_preprocess_$hook
$template_preprocess()
Theme
Theme Engine
Modules
Core
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Template Files Theme Functions
Output is printedltphp print $variable gt
Build a single output variable and return it
$output = ldquooutputrdquo
Easier to use if mixing in a lot of plain html
Easier to use if using control structures and loops
So what should I use to control dynamic content display
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
3 CommonTemplate Files
Navigation
Syndicate Blog Post 2
Whorsquos Online
Blog Post 1
pagetplphp
nodetplphp
pagetplphp
blocktplphp
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Each Template HandlesA Region of Your Site
bull pagetplphp - Entire Page
bull front-pagetplphp - Just Front Page
bull blocktplphp - Blocks
bull commenttplphp - Comments
bull forumtplphp - Forums
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Template Hierarchy - Specific before General
Home Pagepage-fronttplphppagetplphp
Pagespage-node-edittplphppage-node-1tplphppage-nodetplphppagetplphp
Boxesboxtplphp
Nodesnode-typetplphpnodetplphp
Commentscommenttplphp
Blocksblock-module-deltatplphpblock-moduletplphpblock-regiontplphpblocktplphp
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
zeninfo
Text
metadata
name = internal theme name
description = one sentence
engine = phptemplate
Drupal version 6x
CSS stylesheets
Regions
Features
zeninfo
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Lastly the Screenshot
bull Gives your usersadmins a preview of your theme
bull See drupalorg screenshot guidelines if you want to contribute your theme
bull (please contribute)
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
WHEW
bull Do I really need all these files to create a theme
bull No - all you need is info the rest overrides Drupal default ($left $right $footer)
bull 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
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Part Two Build A Simple Theme From Static
HTMLCSSbull Look At Mockup
bull Write tpl files
bull Incorporate CSS
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Static HTML PageDrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Head of pagetplphp
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogt ltheadgt ltstyle type= ldquotextcssrdquo title= ldquocurrentStylerdquogt import ldquostylecssrdquo ltstylegt ltmeta http-equiv= ldquoContent-Typerdquo content= ldquotexthtml charset=iso-8859-1rdquo gtlttitlegtyourdomaincomlttitlegtltmeta name= ldquodescriptionrdquo content= ldquodescriptionrdquo gtltmeta name= ldquoKeywordsrdquo content= ldquokeywordsrdquo gtltmeta name= ldquorobotsrdquo content- ldquoindexfollowrdquo gtltheadgt
lthtml xmlns-httpwwww3org1999xhtml dir= ldquoltrrdquogtltheadgtlttitlegt ltphp print $head_title gtlttitlegt ltphp print $head gt ltphp $styles gt ltphp $scripts gtltheadgtlttitlegtltphp print $head_title gtlttitlegt ltphp print $head gt ltphp print $styles gt ltphp print $scripts gt
HTML pagetplphp
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Head $variables
bull $head_title A modified version of the page title for use in the TITLE tag
bull $head Markup for the HEAD section (including meta tags keyword tags and so on)
bull $scripts Script tags necessary to load the JavaScript files and settings for the page
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Region $header
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
More Region $headerltdiv class= ldquoheaderrdquo id= ldquohrdquogt lth1gtYour Sitelth1gt lta href= ldquordquogtltimg src= ldquoimageslogogifrdquo alt= ldquositerdquo gtltagt ltulgt ltligtlta href= ldquordquogtHomeltagtltligt ltligtlta href= ldquordquogtAbout Usltagtltligt ltligtlta href= ldquordquogtContactltagtltligt ltligtlta href= ldquordquogtProjectsltagtltligt ltligtlta href= ldquordquogtEventsltagtltligt ltulgtltdivgt
ltdiv class= ldquoheaderrdquo id= ldquohrdquogt ltphp if ($logo || $site_name) if ($logo) print lsquolta href= ldquo check_url($front_page) ldquo title= ldquo $site_title ldquo gtrsquo print lsquoltimg src= ldquo check_url($logo) ldquo alt= ldquo $site_title ldquo id= ldquologordquo gtltagtrsquo print lsquolth1gtrsquo $site_name rsquolth1gtrsquo ltdivgt
ltphp if (isset($primary_links)) gtltphp print theme(lsquolinksrsquo $primary_links array(lsquoclassrsquo =gt lsquolinks primary-linksrsquo)) gtltphp endif gt
$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
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Region $left
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Region $left
ltdiv id=rdquoleftrdquogt ltdiv class= ldquomenurdquogt lth3gtMenulth3gt ltul class= ldquoul1rdquogt ltligtlta href= ldquordquogtMenu 1ltagtltligt ltligtlta href= ldquordquogtMenu 2ltagtltligt ltligtlta href= ldquordquogtMenu 3ltagtltligt ltligtlta href= ldquordquogtMenu 4ltagtltligt ltligtlta href= ldquordquogtMenu 5ltagtltligt ltligtlta href= ldquordquogtMenu 6ltagtltligt ltligtlta href= ldquordquogtMenu 7ltagtltligt ltligtlta href= ldquordquogtMenu 8ltagtltligt ltligtlta href= ldquordquogtMenu 9ltagtltligt ltligtlta href= ldquordquogtMenu 10ltagtltligt ltulgt ltdivgtltdivgt
ltdiv id= ldquoleftrdquogt ltphp if ($left) gt ltphp print $left gt ltphp endif gtltdivgt
$left The HTML for the left sidebar
HTML pagetplphp
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Region $right
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Right Side Bar
ltdiv id= ldquorrdquogt ltdiv class= ldquomenurdquogt lth3gtSearchlth3gt ltform action= ldquordquogt ltinput name=rdquosearchrdquo type=rdquotextrdquo class=rdquotextrdquo maxlength=rdquo50rdquogt ltinput type=rdquosubmitrdquo value=rdquoOKrdquo class ldquosubmitrdquo gt ltformgt ltdivgtltdivgt
ltdiv id= ldquorrdquogtltphp if ($search_box) gtltdiv class=rdquoblock_menurdquogtlth3gtSearchlth3gtltphp print $search_box gtltdivgtltphp endif gtltphp if ($right) gtltphp print $right gtltphp endif gtltdivgt
$search_box HTML to display the search box empty if search has been disabled$right HTML for the right sidebar
HTML pagetplphp
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Region $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Footer
ltdiv class= ldquofooterrdquo id = ldquofrdquogtltdivgtltbodygt
ltdiv class= ldquofooterrdquo id=rdquofrdquogtltphp print $footer gtltdivgtltphp print $closure gtltbodygt
$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
HTML pagetplphp
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Regions $header $center $left $right $footer
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Add CSS Styling
bull Put Header Div at the Top at 960px width
bull Create a Container Div to Hold Left Center amp Right - Use Floats and Left-Margins to clear the Center amp Right from the Left
bull Put Footer Div at the Bottom at 960px width
bull For this simply layout there are many CSS templates available
bull (The details are a bit out of this presentationrsquos scope)
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
From-Scratch Recap
bull We created the pagetplphp file
bull We converted 5 HTML Divs to Template Regions Header Center Left Right amp Footer
bull Next Create stylecss to style the pagetplphprsquos HTML output
bull To add more dynamic content we can either
bull Add its ltphp gt directly to pagetplphp
bull Write more tplphp files nodetplphp blocktplphp boxtplphp
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Is There An Easier Way
bull There sure is Subtheming
bull Subthemes allow you to build on existing template files CSS and Scripts
bull Remove what you do not need
bull Work from a mockup just the same and ldquoshoprdquo for components
bull You can even convert a WordPress theme
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Part Three Create A Subtheme
Base Theme
Subtheme
Parent
Child
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
6x - CSS Only Themes
bull Core pagetplphp theme based on zen
bull Uses well-named classes to identify areas
bull 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
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Subtheme in 7 Steps
bull 1 WireframeMockup in Photoshop Illustrator Fireworks
bull 2 Create Static HTMLCSS Files in Text Editor
bull 3 Clone Base Theme from Download
bull 4 Create Subtheme in Localhost
bull 5 Override Templates in tplphp files
bull 6 Add JavaScript and jQuery if necessary
bull 7 Override themable functions in templatephp
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
a
Theme Override Layers
pagetplphp
Theme
Theme Engine
c
Modules
Core
b
a Default Theming Implementation
Override
Override
d Override Base ThemeSubTheme
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Theme Inheritance
bull Unless you already have expert knowledge of Drupal Theming start with an existing theme and customize it
bull Sub theme sets ldquobase themerdquo in info file
bull Gains all style sheets templates all functions in templatephp
bull Sub theme should never use phptemplate_ functions
bull Safest way to lsquotweakrsquo a theme and still be able to upgrade the theme
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Theme vs Sub-Theme
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Subtheme Basics
bull Inherits resources from the parent theme
bull Name the base theme in info file
bull Does not have to be in subdirectory of parent theme (unlike Drupal 5)
bull Put in sitesallthemes with your custom theme named folder
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
How to Install A Base Theme
bull Go to Drupalorgprojectsthemes
bull Log in and filter by Drupal version
bull Save to desktop unzip
bull Create folder location sitesallthemes in your Drupal directory
bull Go to adminbuildthemes and enableconfigure new theme
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Working From Base Theme
Base Theme
Subtheme1 Subtheme3Subtheme2
BlogNewspaperMusic Site
Music Site BMusic Site A Newspaper A Newspaper B Blog ABlog A
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Starting With Zen
bull Flexible standards-compliant and semantically correct XHTML theme
bull Easily modified through CSSenhanced version of Drupalrsquos template system
bull 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
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Zen Features
bull Well documented php and css files
bull Lots of easy-to-access classes and ids for CSS developers
bull 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
bull Separate layoutcss file to allow for changing the type of column layout (holy grail jello mold etc)
bull A printcss file optimizes print display automatically when sent to a printer mdash removes sidebars and nav elements optimizes font size adds text to links showing href etc
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Subtheme of Zen
bull The base Zen theme is designed to be easily extended by its sub-themes
bull You shouldnt 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
bull The examples below assume zen and your sub-theme will be installed in sitesallthemes but any valid theme directory is acceptable (see ldquoGetting startedrdquo for more info)
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Our DrupalAustin Mockup Again
DrupalAustinHome | About | Contact | Projects | Events
Left RightCenterNavigationMenu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8Menu 9
Menu 10
Footer
DrupalAustinrsquos Been Busy
Drupal 7rsquos 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
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
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
DrupalAustinrsquos Party
Header
Search
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
3 ColumnFixed RightLeft
Fluid Center
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Zen Layout
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Zen Options
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Step One Copy Zen Starter Kit
bull Copy the STARTERKIT folder out of the zen folder and rename it to be your new sub-theme
bull IMPORTANT Only lowercase letters and underscores should be used for the name of your sub-theme
bull For example copy the sitesallthemeszenSTARTERKIT folder and rename it as sitesallthemesfoo
bull 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 sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Save in sitesallthemes
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Define Base Theme fooinfo file
bull base theme = Zen
bull style sheets are defined in parent theme
bull JavaScript defined in parent theme
bull All template tplphp files
bull Anything defined from the ldquotemplatephprdquo file including theme function overrides preprocessors or anything else
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Choose Fixed 3 Column Layout
bull Copy the layout-fixedcss from the zenzen folder and place it in your sub-themes folder Rename the layout stylesheet to layoutcss
bull For example copy zenzenlayout-fixedcss and rename it as foolayoutcss Note that the info file already has an entry for your layoutcss file
bull 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 modules directory to your sub-themes 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
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Copy Zen Stylesheet
bull Copy the zen stylesheet amp save in sub-themes folder Rename it
bull zenzenzencss foofoocss
bull Your info file overrides the base themes zencss file
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Copy HTML-elements Stylesheet
bull Place it in your sub-themes folder
bull For example copy zenzenhtml-elementscss to foohtml-elementscss Note that the info file already has an entry for your html-elementscss file
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Edit templatephp amp themesettingsphp
bull Replace ALL occurrences of STARTERKIT with the name of your sub-theme
bull For example edit footemplatephp and footheme-settingsphp and replace STARTERKIT with foo
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Enable Your Subtheme
bull Log in as an administrator on your Drupal site and go to Administer gt Site building gt Themes (adminbuildthemes) and enable your new sub-theme
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Customizationbull CSS Most changes can be made just with CSS You can create
formscss for example just to theme forms Remember add this to your themersquos info file amp clear your cache
bull 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
bull jQuery Example Use to add a class to a tag when hovering on it
$(this) hover ( function() $ (this) addClass(lsquohoverrsquo) function () $(this) removeClass(lsquohoverrsquo)
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Part 4 Ninja Tips amp Tricks bull Tools
bull Preprocessor Functions
bull templatephp
bull Customizing data output
bull More template files for more control
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Great Tools For Analyzing Design
bull Firebug Plugin for Firefox
bull Gridfox Plugin for Firefox
bull Devel Module - Drupal Suite
bull Web Developer Plugin also for Firefox
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Novell Communities
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Firebug
bull ldquoInspectrdquo page elements
bull Edit CSS properties view edits immediately
bull Display Box Model ndash width padding margins
bull JavaScript debugger ndash pause your scripts
bull 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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
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
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Inspecting IDs in Firebug
Thursday June 25 2009
Gridfox - 960px Grid
Thursday June 25 2009
Grids
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Gridfox - 960px Grid
Thursday June 25 2009
Grids
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Grids
bull 960 Grid system http960gs
bull Blueprint CSS httpwwwblueprintcssorg
bull YUI Grids CSS httpdeveloperyahoocomyuigrids
bull 960px Gridded Themes Four Seasons Framework Hiroshige Newswire Sky
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Firebug Litebull JavaScript
file to simulate some Firebug features in other browsers
bull httpgetfirebugcomlitehtml
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Stealther Firefox Plugin
bull Temporarily disables saved information - caches cookies histories form information
bull Quickly view how site looks for users not logged in
bull httpsaddonsmozillaorgen-USfirefoxaddon1306
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Devel Module - Suite for Theme amp Module Dev
bull httpdrupalorgprojectsdevel
bull Tip Give all users Devel Module permissions to clear the cache without being logged in ONLY for development sites
bull 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 ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Theming for ViewsGreat 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
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Browsershotsorg
bull Identify problems in other browsers
bull Multiple screenshots for troubleshooting
bull Takes up to 30 Minutes to generate the screenshots
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Zoterobull 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 amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Design amp Web Standards
bull httpwwwalistapartcomtopics
bull httpwwwcsszengardencom
bull httpwwwthinkvitamincom
bull httpwwwuxmagcom
bull httpgetfirebugcom
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Modulesbull Read the theme section in the module developers guide
bull Modules in Drupal have the capability to allow presentation to be overridden for use on individual sites ndash (this process is theming)
bull Logic must be separated as much as possible from presentation
bull Modules do as much of the work on the data as possible and hand that data off to the presentation layer
bull Modules then provide default implementations that provide the basic presentation and serve as the basis for themes that wish to provide an alternate presentation
bull Handled through the theme() function called a ldquotheme hookrdquo
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Drupal API Node Typesbull 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
bull nid the nodersquos ID
bull vid the version ID for the node
bull type basically the content type such as a page or blog
bull uid the authorrsquos user ID
bull status whether publishedvisible (= 1) or unpublishedhidden (= 0)
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
For Reference
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Ways To Contribute
bull Clean up XHTML and CSS
bull Help create a set of well-named classes to use across Drupal
bull Help create templates that do not yet exist
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009
Thanks
bull Feel free to ask questions
Thursday June 25 2009