Information Systems 337
Prof. Harry Plantinga
Customizing your Theme
Customizing Themes
 Beginner options:




Changing title slogan
Changing logo
Changing color schemes
Basically, anything you can do through
administration interface
Customizing Themes
 Intermediate options
 Make a copy of a theme and modify it (or create a
subtheme)
 Replace images
 Edit Styles.css and other CSS files
Customizing Themes
 Advanced options
 Make a copy of a theme and modify it (or create a
subtheme)
 Edit template files (foo.tpl.php)
 Create new template files (node-game.tpl.php)
 Override PHP functions
How can I…
 Change the style of an element on a page?
 Make a custom copy of your base theme
 Find the relevant stylesheet entry with firebug
 Turn off CSS file optimization so you can see changes
(Site Configuration -> Performance)
 Edit the appropriate stylesheet
How can I…
 Change the HTML of an element on a page?
 Customize the appropriate template file (tpl.php)…
What is a theme?
 Provides the opportunity to modify a page before it
is displayed
 Every element on a page is run through the theme
system
 Theme engine, e.g. PHPTemplate [default], Smarty,
PHPTAL
 Theme, e.g. Garland
How do themes get applied?
http://site.org/node/1
Node Module
Basic
HTML
Currently
Enabled Theme
Theme Engine
Final HTML
Theme basics
 .info files
 Other attributes:





screenshot
base theme
features
stylesheets
scripts
name = NewsFlash
description = A Drupal 6 Theme by RoopleTheme
version = VERSION
core = 6.x
engine = phptemplate
regions[sidebar_left] = Left Sidebar
regions[sidebar_right] = Right Sidebar
regions[header] = Header
regions[suckerfish] = Suckerfish Menu
regions[user1] = User 1
regions[user2] = User 2
regions[user3] = User 3
regions[content_top] = Content Top
regions[content_bottom] = Content Bottom
regions[user4] = User 4
regions[user5] = User 5
regions[user6] = User 6
regions[footer_region] = Footer
Regions
 By default there are five:





Header (header)
Footer (footer)
Left sidebar (left)
Right Sidebar (right)
Content (content)
 You can define as a custom set in the .info file
 regions[header] = Header
 regions[content] = Content
 regions[ads] = Ads
Features
 Default features
 Or define custom features:
 Logo (logo)
 features[] = name
 Site name (name)
 features[] = slogan
 Site slogan (slogan)
 features[] = mission
 Mission stmt (mission)
 features[] = blurb
 node_user_pictures
 features[] = contact
 comment_user_pictures
 Search box
 Shortcut icon
 Primary links
 Secondary links
CSS, JavaScript
 By default, Drupal will include the CSS file
"styles.css"
 If you want other files, customize:




stylesheets[all][] = styles/reset.css
stylesheets[all][] = styles/typography.css
stylesheets[all][] = styles/forms.css
stylesheets[all][] = styles.css
 Similarly for JavaScript; default is script.js
Hint: stylesheet optimization
 How many stylesheets are included in a page on
your website?
 Configuration -> Performance




Optimize CSS
Optimize JavaScript
Enable page cache
Enable block cache
 [these options make development harder]
More customization?
 Options so far allow images and CSS
 What if you want to move the picture from the top
of a post to the bottom?
 Template files (*.tpl.php)
 comment.tpl.php –controls comment output
 page.tpl.php – controls page output
 node.tpl.php – guess
 Theme Developer module is extremely helpful
Templates and defaults
 Templates control behavior
 comment: modules/comment/comment.tpl.php
 override: sites/all/marinelli/comment.tpl.php
 Theme engine handles overriding
Example: Add a div
 Example: you want to add a <div> around the
comment's title.
 Copy modules/comment/comment.tpl.php to
sites/all/modules/yourmod
 Edit it to your heart's content
Example: move breadcrumbs up
 How to move breadcrumbs into the header region?
 If necessary, copy page.tpl.php into the theme
 Edit to move breadcrumb variable
 Add .breadcrumb, .breadcrumb a styles to stylesheet
as needed
Example: adding a region
 Edit theme.info to add the region you want
 Edit page.tpl.php to display the region
Theming specific content
types
 Suppose you've created a new content type, 'game'.
How to theme it?
 Copy node.tpl.php into your theme directory
 Copy node.tpl.php to node-game.tpl.php
 Edit node-game.tpl.php to your heart's content!
 But how to you get at the fields?
 Can get at individual fields in the template file
content-field.tpl.php—but only one at a time
 Can we hack the $content of the node?
template.php file
 .tpl.php files are cool…
 can modify HTML output…
 …but you can't change what you are given in the
variables
 template.php: override just about anything
 Want a new variable called $authored that can be
used in node.tpl.php?
 This requires PHP. (Only PHP can get at the deepest
layers of Drupal.)
 (Documentation: see Drupal 6 theming guide)
template.php example from
Foundation module
<?php
/**
* override or insert PHPTemplate
* variables into the node templates
*/
function foundation_preprocess_node(&$vars) {
// Set author info line separately from the full
$submitted variable
$vars['authored'] = t('Submitted by') . ' ' .
$vars['name'];
}
Adding theme variables
 All variables that go out to a theme are sent through
a preprocess function
 You can create your own variables, or change
existing ones, in the template.php file:
<?php
function prepsoccer_preprocess_node(&$vars) {
$vars['random_number'] = rand(1,100);
}
----- in a .tpl.php file ----<?php print $random_number; ?>