Customizing your Theme
Information Systems 337
Prof. Harry Plantinga
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
Theme Engine
Currently Enabled Theme
Final HTMLBasicHTML
Theme basics
.info files
Other attributes: screenshot base theme features stylesheets scripts
name = NewsFlashdescription = A Drupal 6 Theme by RoopleThemeversion = VERSIONcore = 6.xengine = phptemplate
regions[sidebar_left] = Left Sidebarregions[sidebar_right] = Right Sidebarregions[header] = Headerregions[suckerfish] = Suckerfish Menuregions[user1] = User 1regions[user2] = User 2regions[user3] = User 3regions[content_top] = Content Topregions[content_bottom] = Content Bottomregions[user4] = User 4regions[user5] = User 5regions[user6] = User 6regions[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 Logo (logo) Site name (name) Site slogan (slogan) Mission stmt (mission) node_user_pictures
comment_user_pictures
Search box Shortcut icon Primary links Secondary links
Or define custom features: features[] = name features[] = slogan features[] = mission features[] = blurb features[] = contact
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; ?>