Customizing your Theme

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

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

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

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 firebug • Turn off CSS file optimization so you can see changes (Site Configuration -> Performance) • Edit the appropriate stylesheet

6. How can I… • Change the HTML of an element on a page? • Customize the appropriate template file (tpl.php)…

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? http://site.org/node/1 Node Module Currently Enabled Theme Final HTML BasicHTML Theme Engine

9. Theme basics 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 • .info files • Other attributes: • screenshot • base theme • features • stylesheets • scripts

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 • 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]

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

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']; }

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; ?>