Customizing your Theme

Information Systems 337

Prof. Harry Plantinga

Customizing Themes

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

administration interface

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

Theme Engine

Currently Enabled Theme

Final HTMLBasicHTML

Theme basics

.info filesOther

attributes: screenshot base theme features stylesheets scripts

name = NewsFlashdescription = A Drupal 6 Theme by RoopleThemeversion = VERSIONcore = 6.xengine = phptemplate

regions[sidebar_left] = Left Sidebarregions[sidebar_right] = Right Sidebarregions[header] = Headerregions[suckerfish] = Suckerfish Menuregions[user1] = User 1regions[user2] = User 2regions[user3] = User 3regions[content_top] = Content Topregions[content_bottom] = Content Bottomregions[user4] = User 4regions[user5] = User 5regions[user6] = User 6regions[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_pictur

es 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 CSSWhat 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 wantEdit 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; ?>