Customizing Drupal Themes - Beginner to Advanced Options

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

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 Chrome 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 Currently Enabled Theme Basic HTML Final HTML Theme Engine

Theme basics .info files name = NewsFlash description = A Drupal 6 Theme by RoopleTheme version = VERSION core = 6.x engine = phptemplate Other attributes: screenshot base theme features stylesheets scripts 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 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; ?>