Theming Drupal 6 - An Introduction to the Basics

Theming Drupal

An Introduction to the Basics

6+ some advanced stuff too, but that’s at the end

04/10/2023Presented By: Erik Baldwin 2

Before we begin …

What you need to know:- HTML/XHTML

- It helps to know what content is printed where- CSS

- Enough to edit rules, changes backgrounds, add images, etc.- Box Model

- Margin, border & padding and how they work together- Basic PHP

- An understanding of syntax and how PHP functions operate in general

What you might want to know:- jQuery

- For that little extra; Flash® is overkill for an image slideshow- How to setup a Local Development Environment (LAMP)- Version Control

- Subversion or GIT are commonly used with Drupal - More PHP?


Drupal theme design principles

- Grid System- 960px or 1024px wide

- 5 core regions- Header- Left- Right- Content- Footer

- Text & Image Alignment- A content layout built for the

web- Design your theme for the site’s content, not vice-versa!


Theming Caveats… ‘cause it can’t always be easy.

Don’t hack core!

Don’t hack modules!

Don’t hack contrib themes!

The output from all of these is

THEMABLE!

Intercept , Override [template.php] & Sub-Theme [foo.tpl.php]


Where to start…?“To be Jedi is to face the truth, and choose.”

Mockups

Static HTML/CSS

Write *.info file

Create Custom Templates (foo.tpl.php)

Create Styles (*.css)

Write Custom Scripts (*.js)

Copy *.info file, Add “Base Theme”

Override Existing Templates

Override Styles

Extend Scripts

Cust

om T

hem

e Sub-Theme


Intro to Theming Drupal 6

Part I: The anatomy of a theme

Part II: Basic build from Static HTML & CSS

Part III: Create a Fusion Sub-Theme (demo)

Part IV: Tools & Tricks (demo)


Part I: Drupal Theme Anatomy

AT-AT Anatomy

sites/all/themes/foo

.info File

Theming Engine

Template Language

PHP Templates

Styles & Images

Scripts


How does Drupal Do It?“No! Try not. Do, or do not. There is no try.”

Browser gets info from database

Browser checks data against

Drupal’s Output filters

Server inserts info into core

templates

Theme Engine merges

template files with

template.php

Browser displays

formated HTML


Drupal 6 Theme Stack

PHP Theme PHP Template Theme

Don’t Hack These!


Separating Design & Logic

• .info file defines your theme• More templates = more control over theme components• phptemplate_variables() are your friends• Theme inheritance makes sub theming and overriding possible• Pure CSS themes are absolutely possible.


Drupal’s Theme EnginePHPTemplate ships with core … no need to install it

PHPTemplate allows themers to insert PHP into their xHTML markup so that predefined variables can be rendered in the browser.

Some info about PHPTemplate• Written for Drupal by Adrian Rossouw• Uses foo.tpl.php files to theme Drupal’s theme_foo() functions• Themable functions can be found on api.drupal.org• You could write an entire theme in PHP, but why?• PHPTemplate is the most commonly used theming engine for CMS’s

<?php print $primary_links; ?>


How PHP Generates Dynamic Content

Dru

pal C

ore

PHPTemplate

Drupal MySQL Database(views is essentially a query builder)

Web

Bro

wse

r

HTMLPage

HTMLPage

HTMLPage

<?php ?>

<?php ?>

<?php ?>

<?php ?>


Template.phpWhat am I supposed to do with this?!

• Template.php holds the conditional logic and data processing required for output

• It is where you create your preprocessors for generating variables before they merge with *.tpl.php file – each individual template file (.tpl.php) gets assigned to regions

• This is also where you override existing theme functions and create other raw output customization (example below)

function theme_name_preprocess_page(&$vars) {//override for mission statement to appear on every page, not just <front>$vars['mission'] = filter_xss_admin (theme_get_setting('mission'));//creates raw output for $foo that can be printed in any *.tpl.php$vars[‘foo’] = t(‘FooBar’);}


What is a Preprocessor Function for?

• Setup variables to be placed within the template (.tpl.php) files. Plain theme functions do not interact with preprocessors

• Use them whenever overriding CSS and editing xHTML markup in Template files just isn’t enough!


Processing Order of Preprocessor Functions

Theme

ThemeEngine

Modules

Core$template_preprocess()

$template_preprocess_$hook

$modulename_preprocess()

$modulename_preprocess_$hook()

phptemplate_preprocess()

phptemplate_preprocess_$hook()

$theme_preprocess()

$theme_preprocess_$hook


So, what do I do to control dynamic content display?

Template Files

Output is printed with<?php print $primary_links; ?>

Easiest to use if you plan on using a lot of xHTML markup.

Theme Functions

Build a single output $var and return it$output = ‘output’;

Easiest to use if you need to build control structures and loops.


Common Template Files


Each Template Handles a Region

… quicker, easier, more seductive

• page.tpl.php – Entire Page

• front-page.tpl.php – Front Page Only

• block.tpl.php – Blocks

• comment.tpl.php – Comments

• forum.tpl.php – Forums


Template HierarchySpecific before general

Home Pagepage-front.tpl.phppage.tpl.php

Pagespage-node-edit.tpl.phppage-node-1.tpl.phppage-node.tpl.phppage.tpl.php

Nodesnode-type.tpl.phpnode.tpl.php

Commentscomment.tpl.php

Blocksblock-module-delta.tpl.phpblock-module.tpl.phpblock-region.tpl.phpblock.tpl.php


Typical .info file

Metadata

name = internal theme name

Description = try to make this short; no more than 400 characters

Engine = phptemplate

Drupal version = 6.x

Screenshot = theme screenshot

CSS stylesheets

Scripts

Regions

Features


The Screenshot!

Every theme should have a screenshot! Even if it isn’t actually a screenshot of the theme.

• Gives your users/admins a preview of your theme

• See drupal.org screenshot guidelines if you want to contribute your theme.


But what about …

Do I really need all of these files to create a theme?• No – all you need is .info, the rest overrides

Drupal’s default ($left, $right, $header, $content, $footer)

Should I hack a contributed theme?• No – find a suitable theme to inherit from (sub-

theming)


Part II: Building a Theme from Static xHTML/CSS

Looking at the Mockup to the right, lets define our regions.

Core Regions Available

Mockup Regions Present

$header$left$content$right$footer

$header$content$right$footer

Most contributed Drupal themes will utilize the core regions, if not more. Custom regions are created in the themes .info file and printed in the page template.


Head of page.tpl.phpHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><meta name="Description" content="Information architecture, Web Design, Web Standards." /><meta name="Keywords" content="your, keywords" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="Distribution" content="Global" /><meta name="Author" content="Erwin Aligam - [email protected]" /><meta name="Robots" content="index,follow" />

<link rel="stylesheet" href="images/NewHorizon.css" type="text/css" />

<title>New Horizon</title></head>

page.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title><?php print $head_title; ?></title> <?php print $head; ?> <?php print $styles; ?> <?php print $scripts; ?></head>


Head $variables

• $head_title – a modified version of the head title for use in the TITLE tag.

• $head – Markup for the head section.– Meta tags– Keyword tags– etc …

• $styles – loads all required CSS stylesheets specified by module and theme .info files.

• $scripts – Script tags are necessary to load JavaScript files and settings for the page.


Header RegionHTML

<div id="nav“> <ul> <li id="current"><a href="index.html">Home</a></li> <li><a href="index.html">News</a></li> <li><a href="index.html">Downloads</a></li> <li><a href="index.html">Support</a></li> <li><a href="index.html">About</a></li> </ul></div>


Header $Variables$logo: The path to the linked logo image that is defined in the theme’s configuration.$site_name: The name of the site. This value will be empty when display has been disabled in theme settings(features[] = name).$front_page: The URL of the front page. Use this instead of $base_path to link to the front page. This variable includes the language domain or prefix.$primary_links (array): An Array containing the primary navigation links for the site, if they have been configured.$secondary_links (array): An array containing secondary navigation links for the site, if they have been configured.


Sidebar RegionHTML

<div id="sidebar" > <h3>Search Box</h3> <form action="#" class="searchform“> <p><input name="search_query" class="textbox" type="text" /><input name="search" class="button" value="Search" type="submit" /></p></form> <h3>Sidebar Menu</h3> <ul class="sidemenu“> <li><a href="index.html">Home</a></li> <li><a href="#TemplateInfo">TemplateInfo</a></li> <li><a href="#SampleTags">Sample Tags</a></li> <li><a href=“<?php print $base_path ?>">More Templates...</a> </li> <li><a href=“?aff=ealigam">Premium Templates</a></li> </ul> <h3>Sponsors</h3> <ul class="sidemenu“> <li><a href=“r.cgi?287326">Dreamhost</a></li> <li><a href=“?aff=ealigam">4templates</a></li> <li><a href=“?aff=ealigam">TemplateMonster</a></li> <li><a href=“partner/114283">Fotolia.com</a></li> <li><a href=“res338619">Dreamstime.com</a></li> <li><a href=“3cgv2m">Text-Link-Ads</a></li> </ul></div>

Page.tpl.php <div id=“right" class=“right sidebar"> <?php if ($search_box): ?> <div class=“block_menu”> <h3> Search</h3> <?php print $search_box ?> </div> <?php if ($right): ?> <?php print $right ?> <?php endif; ?></div> 

$search_box: HTML that displays the search box, empty if search has been disabled.$right: contains the HTML for the left sidebar.

You can also use $left to print the HTML for the left sidebar.

$Variables


Footer RegionHTML

<div id=“footer" ></div></body>

Page.tpl.php <div id=“footer" class=“footer"> <?php print $footer ?></div> <?php print $closure ?></body>

$footer: The footer region$closure: This variable should ALWAYS be output last, after all other dynamic content. This ensures that all modules that have altered the page have their closing markup. !important

$Variables


Time to make it look good!Put your best @font-face forward

• Choose a width; fixed = 960px or 1024px or fluid = 100%• Create container div’s to hold all of your regions. Use floats and margins to clear them.• Look at existing CSS templates, there are many that are freely available online.

The details for this are a bit out of this presentations scope.


Building a custom theme - Recap• We created the page.tpl.php file• We converted our Mockup’s HTML div structure to Drupal regions: Header, Sidebar’s & Footer• Next: Create style.css to style the HTML output of the page template that was created• To add more dynamic content we can:• Add its <?php ?> directly to page.tpl.php• Create more *.tpl.php files: node.tpl.php,

block.tpl.php, comments.tpl.php, etc…

Now go “roll-your-own” theme!


Isn’t there an Easier method?

Yes, there is; Create a Sub-theme!• Sub-themes allow you to build on existing template files, CSS and Scripts• You can remove what you don’t need without hacking the base theme• Create a design from a mockup, just like custom theming• You can even convert a ::cough:: WordPress theme


Part III: Creating a Sub-themeparent

child

Basetheme

Sub-theme

child


CSS Only Themes

• Core page.tpl.php theme based on your choice of contrib/base theme

• The use of well named classes and id’s is required to identify areas/regions

• A theme that is built with just an .info file will create an ugly site, but with clean xHTML that can be manipulated to suit any needs


Sub-Theming in 7 Steps“Who's your Jedi master? WHO'S your Jedi Master?”

• Wireframes/Mockups in Photoshop, Illustrator or Fireworks• Create static CSS files• Download base theme to sites/all/themes/*base theme name*• Create sub theme in sites/all/themes/*sub-theme name*• Override templates in *foo*.tpl.php• Add JavaScript and jQuery, if necessary• Override themable functions in template.php (sub_theme_name_preprocess_foo{} in template.php)


Theme Override Layout & Process

A

B

C

D

Core

Modules

Theme Engine

Theme

Sub-theme


Theme InheritanceBecause everything is passed down thru generations

• Unless you already have a great understanding of Drupal Theming, you should start with an existing theme and modify it

• Sub-themes set their “base theme” in the .info file; the theme which it will directly inherit it’s templates, styles and scripts from

• All styles, scrips and template.php overrides that are specified in the base theme’s template.php will be inherited by the sub-theme

• A Sub-theme should NEVER use phptemplate_ functions; instead use sub_theme_name_

• Building a sub-theme is the safest way to modify an existing theme and still be able to easily update the base theme that is being modified.


Theme vs. Sub-theme


Sub-theme basicsNeed-to-know stuff that you NEED to know!

• Inherits resources from the parent theme

• Name the “base theme” in the .info file

• Sub-themes are not required to be in a sub directory of the parent them (This was a requirement for Drupal 5)

• Place your sub-theme in sites/all/themes

Sub-themes are granular, just like a family tree. It just depends on how far you want/need the legacy to go. As of Drupal 6.17, you can have grandchild themes and so forth

Investor Relations

Theming Drupal 6 - An Introduction to the Basics