customizing your theme n.
Skip this Video
Download Presentation
Customizing your Theme

Loading in 2 Seconds...

play fullscreen
1 / 22

Customizing your Theme - PowerPoint PPT Presentation

  • Uploaded on

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. Customizing Themes. Intermediate options

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Customizing your Theme' - kalila

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
customizing themes
Customizing Themes
  • Beginner options:
    • Changing title slogan
    • Changing logo
    • Changing color schemes
    • Basically, anything you can do through administration interface
customizing themes1
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 themes2
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
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 i1
How can I…
  • Change the HTML of an element on a page?
    • Customize the appropriate template file (tpl.php)…
what is a theme
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
How do themes get applied?

Node Module

Currently Enabled Theme

Final HTML


Theme Engine

theme basics
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
  • 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
  • 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
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
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
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 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: 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
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
Example: adding a region
  • Edit to add the region you want
  • Edit page.tpl.php to display the region
theming specific content types
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
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
template.php example from Foundation module



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


function prepsoccer_preprocess_node(&$vars) {

$vars['random_number'] = rand(1,100);


----- in a .tpl.php file -----

<?php print $random_number; ?>