1. Customizing your Theme
Information Systems 337
Prof. Harry Plantinga
Customizing your Theme

2. Customizing Themes Beginner options: Changing title slogan
Changing logo
Changing color schemes
Basically, anything you can do through administration interface or Sweaver
In marinelli, enable it. Then edit the primary menu. You may want to clear the theme cache (site configuration -> performance)

3. 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
In marinelli, enable it. Then edit the primary menu. You may want to clear the theme cache (site configuration -> performance)

4. 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
In marinelli, enable it. Then edit the primary menu. You may want to clear the theme cache (site configuration -> performance)

5. 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 Chrome
Turn off CSS file optimization so you can see changes (Site Configuration -> Performance)
Edit the appropriate stylesheet
Example: I want to move the title "Prepsoccer.org" down a nudge. How?
Fire up chrome. Look at the stylesheets used.
Edit typography stylesheet. Cool!

6. How can I… Change the HTML of an element on a page?
Customize the appropriate template file (tpl.php)…
Suppose I want to make the banner image less tall or move the menus lower on the page. How?
This will take a bit more understanding of the theme system.

7. 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

8. How do themes get applied?
Node Module
Currently Enabled Theme
Basic HTML
Final HTML
E.g. node/1 would be handled by the node module, admin/build/themes would be handled by the System module, and a path like "Albums" might be handled by the Views module.
Theme Engine

9. 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

10. 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

11. Features Default features comment_user_pictures
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

12. 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

13. 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]
use chrome; check it out!

14. 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
See e.g. prepsoccer home page. frame = page.tpl.php, main content=node.tpl.php, blocks = block.tpl.php
Look at page source and compare those files to see how blocks are generated

15. Templates and defaults
Templates control behavior
comment: modules/comment/comment.tpl.php
override: sites/all/marinelli/comment.tpl.php
Theme engine handles overriding

16. 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

17. 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

18. Example: adding a region
Edit theme.info to add the region you want
Edit page.tpl.php to display the region

19. 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?

20. 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)

21. 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']; }
note starting <?php with no corresponding closing tag. Considered good form.
* when you override something in a theme, you have to clear caches to see any changes.

22. 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; ?>
note no closing ?> in template.php file – considered good style