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

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)

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)

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!

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.

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

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

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

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

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

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