Customizing your Theme Information Systems 337 Prof. Harry Plantinga

Customizing Themes Beginner options: Beginner options: Changing title slogan Changing title slogan Changing logo Changing logo Changing color schemes Changing color schemes Basically, anything you can do through administration interface Basically, anything you can do through administration interface

Customizing Themes Intermediate options Intermediate options Make a copy of a theme and modify it (or create a subtheme) Make a copy of a theme and modify it (or create a subtheme) Replace images Replace images Edit Styles.css and other CSS files Edit Styles.css and other CSS files

Customizing Themes Advanced options Advanced options Make a copy of a theme and modify it (or create a subtheme) Make a copy of a theme and modify it (or create a subtheme) Edit template files (foo.tpl.php) Edit template files (foo.tpl.php) Create new template files (node-game.tpl.php) Create new template files (node-game.tpl.php) Override PHP functions Override PHP functions

How can I… Change the style of an element on a page? Change the style of an element on a page? Make a custom copy of your base theme Make a custom copy of your base theme Find the relevant stylesheet entry with firebug Find the relevant stylesheet entry with firebug Turn off CSS file optimization so you can see changes (Site Configuration -> Performance) Turn off CSS file optimization so you can see changes (Site Configuration -> Performance) Edit the appropriate stylesheet Edit the appropriate stylesheet

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

What is a theme? Provides the opportunity to modify a page before it is displayed Provides the opportunity to modify a page before it is displayed Every element on a page is run through the theme system Every element on a page is run through the theme system Theme engine, e.g. PHPTemplate [default], Smarty, PHPTAL Theme engine, e.g. PHPTemplate [default], Smarty, PHPTAL Theme, e.g. Garland Theme, e.g. Garland

How do themes get applied? Node Module Theme Engine Currently Enabled Theme Final HTML Basic HTML

Theme basics.info files.info files Other attributes: Other attributes: screenshot screenshot base theme base theme features features stylesheets stylesheets scripts 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: By default there are five: Header (header) Header (header) Footer (footer) Footer (footer) Left sidebar (left) Left sidebar (left) Right Sidebar (right) Right Sidebar (right) Content (content) Content (content) You can define as a custom set in the.info file You can define as a custom set in the.info file regions[header] = Header regions[header] = Header regions[content] = Content regions[content] = Content regions[ads] = Ad s regions[ads] = Ad s

Features Default features Default features Logo (logo) Logo (logo) Site name (name) Site name (name) Site slogan (slogan) Site slogan (slogan) Mission stmt (mission) Mission stmt (mission) node_user_pictures node_user_pictures comment_user_pictures comment_user_pictures Search box Search box Shortcut icon Shortcut icon Primary links Primary links Secondary 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" By default, Drupal will include the CSS file "styles.css" If you want other files, customize: If you want other files, customize: stylesheets[all][] = styles/reset.css stylesheets[all][] = styles/reset.css stylesheets[all][] = styles/typography.css stylesheets[all][] = styles/typography.css stylesheets[all][] = styles/forms.css stylesheets[all][] = styles/forms.css stylesheets[all][] = styles.css stylesheets[all][] = styles.css Similarly for JavaScript; default is script.js Similarly for JavaScript; default is script.js

Hint: stylesheet optimization How many stylesheets are included in a page on your website? How many stylesheets are included in a page on your website? Configuration -> Performance Configuration -> Performance Optimize CSS Optimize CSS Optimize JavaScript Optimize JavaScript Enable page cache Enable page cache Enable block cache Enable block cache [these options make development harder] [these options make development harder]

More customization? Options so far allow images and CSS Options so far allow images and CSS What if you want to move the picture from the top of a post to the bottom? What if you want to move the picture from the top of a post to the bottom? Template files (*.tpl.php) Template files (*.tpl.php) comment.tpl.php –controls comment output comment.tpl.php –controls comment output page.tpl.php – controls page output page.tpl.php – controls page output node.tpl.php – guess node.tpl.php – guess Theme Developer module is extremely helpful Theme Developer module is extremely helpful

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

Example: Add a div Example: you want to add a around the comment's title. Example: you want to add a around the comment's title. Copy modules/comment/comment.tpl.php to sites/all/modules/ yourmod Copy modules/comment/comment.tpl.php to sites/all/modules/ yourmod Edit it to your heart's content Edit it to your heart's content

Example: move breadcrumbs up How to move breadcrumbs into the header region? How to move breadcrumbs into the header region? If necessary, copy page.tpl.php into the theme If necessary, copy page.tpl.php into the theme Edit to move breadcrumb variable Edit to move breadcrumb variable Add.breadcrumb,.breadcrumb a styles to stylesheet as needed Add.breadcrumb,.breadcrumb a styles to stylesheet as needed

Example: adding a region Edit theme.info to add the region you want Edit theme.info to add the region you want Edit page.tpl.php to display the region 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? 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 into your theme directory Copy node.tpl.php to node-game.tpl.php Copy node.tpl.php to node-game.tpl.php Edit node-game.tpl.php to your heart's content! Edit node-game.tpl.php to your heart's content! But how to you get at the fields? 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 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? Can we hack the $content of the node?

template.php file.tpl.php files are cool….tpl.php files are cool… can modify HTML output… can modify HTML output… …but you can't change what you are given in the variables …but you can't change what you are given in the variables template.php: override just about anything template.php: override just about anything Want a new variable called $authored that can be used in node.tpl.php? 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.) This requires PHP. (Only PHP can get at the deepest layers of Drupal.) (Documentation: see Drupal 6 theming guide) (Documentation: see Drupal 6 theming guide)Drupal 6 theming guideDrupal 6 theming guide

template.php example from Foundation module <?php/** * override or insert PHPTemplate * override or insert PHPTemplate * variables into the node templates * variables into the node templates */ */ function foundation_preprocess_node(&$vars) { // Set author info line separately from the full $submitted variable // Set author info line separately from the full $submitted variable $vars['authored'] = t('Submitted by'). ' '. $vars['name']; $vars['authored'] = t('Submitted by'). ' '. $vars['name'];}

Adding theme variables All variables that go out to a theme are sent through a preprocess function 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: 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); $vars['random_number'] = rand(1,100);} in a.tpl.php file -----