Building a Drupal Theme
Transcript of Building a Drupal Theme
-
8/8/2019 Building a Drupal Theme
1/16
Building a Drupal Theme
Gaurav Khambhala
DeepRoot Linux - www.deeproot.in
March 22, 2009
Gaurav Khambhala Building a Drupal Theme
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
2/16
Introduction
What is Drupal theme ?
Drupal theme componentsTry it on your own
Gaurav Khambhala Building a Drupal Theme
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
3/16
What is Drupal theme ?
Drupal theme is a presentation layer to Drupal database.
Drupal theme is a set of few files, which will worktogether to present the Drupal backend data.
Gaurav Khambhala Building a Drupal Theme
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
4/16
Theme Files
Following are the few essential files for the drupal theme:
themename.infostyle.css
page.tpl.php
block.tpl.php
node.tpl.php
comment.tpl.php
template.php
logo.pngWe will follow the instruction and create a theme as a byproduct of this presentation. Create a theme directory asnamed example. In the next couple of slides, we will look intoindividual theme files and their contents.
Gaurav Khambhala Building a Drupal Theme
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
5/16
example.info
example.info description
A required file in drupal theme.
Drupal will pick theme name from this file only
It should be named as your themename.infoIt contains the stylesheets, javascript declarations
It contains block regions for the theme
If you want to define some theme level features, you can
list down in this file
Gaurav Khambhala Building a Drupal Theme
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
6/16
example.info content
Content of the example.info file:
name*description
version
core*
engine
base theme
stylesheets
scriptsregions
php
features
Gaurav Khambhala Building a Drupal Theme
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
7/16
example.info content
name Required. A human readable name of the theme.
In our case,name = Example
description A short description of the theme. Thisdescription is displayed on the theme select page.
description = Example drupal themeversion Version of the theme.
version = 0.1
core Required. Version of the drupal core, your theme
compatible with.core = 6.x
engine The theme engine.engine = phptemplate
Gaurav Khambhala Building a Drupal Theme
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
8/16
cont. example.info content
base theme If you are building a sub theme. It will inheritbase theme settings.This field is not requiredright now as we are building a new theme.
sub theme = garland
regions Set of regions you want to enable for thistheme.Machine readable values in square bracketsis the key followed by regions and human readablename as a value.
regions[region-name] = value
Gaurav Khambhala Building a Drupal Theme
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
9/16
cont. example.info content
regions Following are the default regions if no regionsspecified.regions[left] = Left sidebarregions[right] = Right sidebarregions[content] = Contentregions[header] = Header
regions[footer] = Footerstylesheets Stylesheet to use for the theme.
stylesheets[all][] = style.css
scripts Javascript files to use for the theme.
scripts[] = script.jsphp Minimum pHP Version this can support.Not
required for most of the themes. Can omit thissettings.
php = 4.3.3
Gaurav Khambhala Building a Drupal Theme
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
10/16
cont. example.info content
features You can enable/disable features for the themes.features[] = feature-name
Basically if you dont specify anything followingare the default values:
features[] = logo
features[] = namefeatures[] = slogan
features[] = mission
features[] = node_user_picture
features[] = searchfeatures[] = favicon
features[] = primary_links
features[] = secondary_links
Gaurav Khambhala Building a Drupal Theme
l i f
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
11/16
cont. example.info content
Now you have your example.info file ready with the followingcontent:
name = Example
description = Example drupal theme.
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
No need to specify regions and features. Let it be defaultvalues.
Gaurav Khambhala Building a Drupal Theme
Th i d
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
12/16
Theme is ready to use
Now if you copy the example theme directory to your drupaltheme directory. Drupal 6 will detect it from .info file andready to be enabled. Go to Administer-Site
Building-Themes.You can see the example theme listed there.
Now we will require to create style.css and php template filesto display the content as we want for this theme.
Gaurav Khambhala Building a Drupal Theme
T l fil
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
13/16
Template files
page.tpl.php A main template file that contains the displaystructure of almost all of the pages.
node.tpl.php Defines the node content.block.tpl.php Defines block content.
comment.tpl.php Defines comment content.
template.php Defines comment content.
Gaurav Khambhala Building a Drupal Theme
C t t l t fil t l h
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
14/16
Create template files - page.tpl.php
page.tpl.php file is a combination of html tags as well asdrupal php template variables to show the requireddata.Following are some phptemplate variables to use. Moreyou can find out at http://drupal.org/node/11812
$footer message
The footer message as defined in the adminsettings, also the HTML for the footer region.
$headerHTML for the header region.
$logoThe path to the logo image, as defined in themeconfiguration.
Gaurav Khambhala Building a Drupal Theme
C t t l t fil t l h
http://drupal.org/node/11812http://drupal.org/node/11812http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
15/16
Create template files - page.tpl.php
$primary links (array)An array containing the links as they have beendefined in the phptemplate specific configuration
block.$sidebar left
The HTML for the left sidebar.
$sidebar right
The HTML for the right sidebar.
Gaurav Khambhala Building a Drupal Theme
C eate Theme files
http://find/http://goback/ -
8/8/2019 Building a Drupal Theme
16/16
Create Theme files
Download Advanced theme construction kit from
drupal.org.http://ftp.drupal.org/files/projects/atck-6.
x-6.0.tar.gz
Untar the downloaded file.atck was developed in a
production environment for purposes of quickly buildingcss and xhtml valid Drupal themes from scratch withouthaving to un-theme an existing Drupal theme to do it.
So you have all the required files for building drupal
theme. Copy all these files and make required changes to.info file.
Now go to Administer-Site Building-Themes. Enable theexample theme.
Gaurav Khambhala Building a Drupal Theme
http://ftp.drupal.org/files/projects/atck-6.x-6.0.tar.gzhttp://ftp.drupal.org/files/projects/atck-6.x-6.0.tar.gzhttp://ftp.drupal.org/files/projects/atck-6.x-6.0.tar.gzhttp://ftp.drupal.org/files/projects/atck-6.x-6.0.tar.gzhttp://find/http://goback/