Building Drupal Theme

8/3/2019 Building Drupal Theme

1/28

dolfo

REB.COM

pport and Technology Inc.


2/28

Introd

What is Drupal th What are the requ

Drupal theme co Template Variabl Creating your ow

Tools and Resour CSS tips

uction

me?red knowledge

ponentsstheme

es


3/28

What is Dr

collection of files thpresentation layer.

set of files that workDrupal site data.

Controls the look of y standard website la

of PHP code added in Consist of a mix of PH

standards (XHTML aGraphics.

pal theme?

t define the

together to present

ur Drupal site.out, with a few bitsertain places.

P and web

d CSS) and


4/28

Required

Designing and cretheme requires goHTML, CSS and so

scripting. Knowledge with i

programs for creat

graphics or skin. Knowledge of how

nowledge

ting Drupald knowledge ofme PHP

age editingng theme

Drupal works.


5/28

Essential Files o

themename.info

page.tpl.php

style.css logo.png

screenshot.png

And of course all your graphics orinside your images folder

a Drupal Theme

node.tpl.php comment.tpl.php block.tpl.php

box.tpl.php template.php script.js

image files


6/28

Example G rland Theme


7/28

themen

A required file in Drupal

Theme declaration file, twe dont have a theme.

The first file we should c Defines our theme name

engine, screenshot, regioand features.

Documented here http:

Note folder and file name for thespelled the same.

me.info

theme.

chnically without this file,

eate.description, version, core,

ns, scripts, style sheets

/drupal.org/node/171205

.info file are


8/28

Content of thname = Name of your theme

description = Your cool theme description.screenshot = screenshot.png

version = 1.0core = 6.xengine = phptemplate

regions[left] = Left sidebarregions[right] = Right sidebar

regions[content] = Contentregions[header] = Headerregions[footer] = Footer

features[] = logofeatures[] = searchfeatures[] = faviconfeatures[] = primary_links

features[] = secondary_links

stylesheets[all][] = styles.cssstylesheets[print][] = print.css

Note: We can omit some of the entri

case Drupal will use default values.

mename.info

es like regions or features, in this


9/28

Example arland.info


10/28

key = valu

Syntax the

name = Garl

Machine name

ename.info

nd

Humaneadable name


11/28

key = value

Syntax the

regions[left] = Left Sidebar

Machine name Human

readable name

Some keys use a special syntax with squassociated values

Note The machine readable name must bcharacters and spaces but the human readspaces and can start with uppercase letter.

ename.info

re brackets for building a list of

e in lower case, no specialble name can have

Use semicolon at the start ofany key value pair to commentout a line

base theme = garland


12/28

Template files

v main template file thstructure of almost all the p

v The page shell templatesuch as , an regions listed in the t

v The core template file c

modules/system folder.

Note: We can copy the page.tpl.php intoand modify the mark up as we wish butCOREpage.tpl.php inside the modules

page.tpl.php

t contains the displayges.

contains XHTML tags plus all

hemename.info file.

n be found in the

our theme folder , editONT MODIFY THEsystem folder.


13/28

Template files page.tpl.php

Directory


14/28

Variables age.tpl.php


15/28

XHTML age.tpl.php


16/28

Other templa

v node.tpl.php Defines rwhich in Drupal are pages, blon. Can be found in module

vcomment.tpl.php Tecan be found in modules/c

vblock.tpl.php Templatappear in sidebar regions. Ca

modules/system folder.

For a complete reference for corvisit http://drupal.org/node/1

e or TPL Files

ndering of node contentg posts, news articles, and so

/node folder.

plates for comment content,mmentfolder.

for blocks, which mostlybe found in

e templates and suggestions90815


17/28

Optional files

v This file is not required but it is

v Contains conditional logic and dused to hold preprocessors for gene

with the markup inside template fil

vHolds custom functions and ovecustomization can be done in this fi

v This file start with a PHP openintag is recommended to be omitted.

For a reference for Drupal default th visit http://api.drupal.org/api/g

template.php

ery useful for PHP programmers.

ta processing for the output andrating variables before merginges.

riding theme functions, any otherle.

tag


18/28

Creating your o

Question:Why not use a base starter t

flexible and feature rich base starter theBasic, Blueprint, AdaptiveTheme,

Answer:Overkill, those themes hav

many people. The themes can handle allto allow you to dynamically add varioussupport custom theming for features annot even need.

If you are new to Drupal crefrustration and from getting confuse. Lo

base starter theme and other various prfrustrate and confuse you especially if y

Your theme dont need to wneed all those cool features.

n Drupal theme

eme? There are so manypowerful,

me like Genesis, Zen, Framework,usion and etc. Why create our own?

e been created to address the needs of

kinds of scenarios, it have been designedolumns and layout elements, and tomodules which you might

ating your own theme can save you fromking at the code of those

made themes willu are not a PHP programmer.

rk for everyone and dont actually


19/28

Identifying te$logo

$site_name

$site_slogan $

$breadcrumb

$search_box

$footer_messa

plate variablesrimary_links

$tabs

$secondary_links

$feed_icons

e


20/28

Identifying t

$left

$co

$head

eme regions

$right

tent

$footer

r


21/28

Create p

If you have an existing static layout/dpage.tpl.php , if you dont already have jpage.tpl.php and insert the page templato use in your theme, you can simply co

page.tpl.ph inside the modules/syste

Step 1 Starting your page : insert thecorepage.tpl.php

ge.tpl.php

esign, rename your html files toust create a new file and name itte variables and regions you wanty and paste bits of code from default

folder of Drupal core.

ollowing bits of code, you can copy this from


22/28

Create pStep 2 Insert the opening and closing

before the closing tag.

$closure used by some modules that inse

ge.tpl.phpbody> tag, make sure to include $closure

Insert this

rt Javascript before the closing tag


23/28

Create pStep 3 Insert all your regions define i

ge.tpl.phpyour themename.info file.

Insert your regions

C t

t l h


24/28

Create pStep 4 Insert all template variables yospots or places where you want it to appea

andsecondary links, search boxandf

Step 5 Style your page whatever lookstest your page, debug and enjoy.

ge.tpl.phpu wish to use in your theme in the proper

such as the breadcrumb,primary links

ed icons, etc.

you want it in your CSS file ( style.css ) .

T l d

R


25/28

Tools and

Convert any website layout or template in

http://acquia.com/commuand tricks drupal theming

Tips and Tricks for Drupal Theming: 90 M

http://drupal.org/node/313

Tutorials

Tools

Firebug The most popular and pow

http://getfirebug.com/

http://developer.yahoo.co

YSlow I loveAll Smush.itfor ima

Resources

to a Drupal theme easily !.

ity/resources/acquia tv/tips 90 minute tutorial

inute Tutorial .

510

rful web development tool!

/yslow/

e optimization


26/28

Tools and

Configuring Drupal for Dreamwe to all available Dreamweaver extension fCommercial extension)

http://drupal.org/node/18

http://drupal.danreb.com/

Drupal 6 Themer Snippets 1.0 FoDreamweaver users, this will allow you tovariables and regions via snippet panel in

Resources

ver Configuration tips and linksr Drupal Themer ( Free and

51

rupal6_themer_snippets.html

Adobe / Macromediainsert Drupal template

Dreamweaver.


27/28

CSS

How Drupal collapse a particulainside it?

v The magic was achieve by combining

Classes inside the body tag ">ions

definition.

mn sidebar">


28/28

EB.COM5951276530347

8505195

ort and Technology Inc.

Documents

Building Drupal Theme