View
225
Download
0
Category
Preview:
Citation preview
8/3/2019 Building Drupal Theme
1/28
dolfo
REB.COM
pport and Technology Inc.
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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.
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
6/28
Example G rland Theme
8/3/2019 Building Drupal 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/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
9/28
Example arland.info
8/3/2019 Building Drupal Theme
10/28
key = valu
Syntax the
name = Garl
Machine name
ename.info
nd
Humaneadable name
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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.
8/3/2019 Building Drupal Theme
13/28
Template files page.tpl.php
Directory
8/3/2019 Building Drupal Theme
14/28
Variables age.tpl.php
8/3/2019 Building Drupal Theme
15/28
XHTML age.tpl.php
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
19/28
Identifying te$logo
$site_name
$site_slogan $
$breadcrumb
$search_box
$footer_messa
plate variablesrimary_links
$tabs
$secondary_links
$feed_icons
e
8/3/2019 Building Drupal Theme
20/28
Identifying t
$left
$co
$head
eme regions
$right
tent
$footer
r
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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
8/3/2019 Building Drupal Theme
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.
8/3/2019 Building Drupal Theme
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">
8/3/2019 Building Drupal Theme
28/28
EB.COM5951276530347
8505195
ort and Technology Inc.
Recommended