A look at Drupal 7 Theming

A look at how Drupal themes are created

Learning Drupal Sydney

In a CMS a presentation layer displays the
content to website visitors based on
a set of templates

“A theme is a collection of files that define the
presentation layer.” – Drupal.org

Think of it as the index.html with static content
replaced by PHP variables

No, you can use modules to change the layout of a
page or section of a page.

An example of some modules are;
Panels http://drupal.org/project/panels
Display Suite http://drupal.org/project/ds
Skinr http://drupal.org/project/skinr
Block Class http://drupal.org/project/block_class

But they only change the layout of pages not the frame
of the site

PHP variables
are turned into
the needed
HTML calls

You can change your sites theme from the
“Appearance” menu option in Drupal 7

a themes can consist of a couple of .tpl files
(page.tpl.php, node.tpl.php) and on .css file

a themes can consist of many .tpl files and
multipule .css and .js files

/sites/all/themes [correct]
/themes [not correct]

Never over write core themes files that live in
the base folder of Drupal, this is called hacking
core

Don’t take a copy of a core theme to create
another theme use a contributed theme

All Drupal themes must have an info.php file,
one css file
.info (required) > think of this as the template configuration file

All other files depend on how much you want to
customise the look of Drupal
A typical theme consists of page.tpl.php, node.tpl.php,
block.tpl.php, comment.tpl.php, style.css

http://drupal.org/node/190815 lists all core templates

Think of it as the themes configuration file
Must be named the same as the theme folder
Required in a theme
Tells Drupal about the theme
Declares themes name name = Ourtheme
Declares what version of Drupal core = 6.x
Declares css files stylesheets[all][] = style.css
Declares javascript files scripts[] = scripts/superfish.js
Declares regions regions[content] = Main content
Declares features features[] = logo

Think of it as the content between <head>
</head>
Prints out all needed CSS and JavaScript files
Does not need to be included in a file as it will
inherit the Drupal core html.tpl.php file
Allows for more granular control

Think of it as the content between <body>
</body>
You print your regions in your page.tpl.php
<?php print render ($page['preface']); ?>
Its the frame of your website
Create’s the page layout, were content is
printed, menu, search, sidebars…

Themes all nodes in the site
Prints out the output of $content variable in page.tpl.php
Controls what all node pages look like, can be overwritten by
specific templates targeting the node id or content type.
Think of nodes as the content on the page
<div id=“content”>
<h1>…</h1>
<p>…</p>
</div>

Can theme all nodes
node.tpl.php
Can theme a specific node
node--nodeid.tpl.php

Themes all blocks or themes a specific block
Allows you to wrap more HTML and CSS code
around the block or remove some HTML

Can theme all blocks
block.tpl.php
Can theme all blocks in a specific region
block--region.tpl.php
Can themes blocks produced by modules
block--module.tpl.php

Themes all regions or themes a specific region
Allows you to wrap more HTML and CSS code
around the region area
Allows you to style the menu region and then the
sidebar region to have more control of Drupal
out-put
Can theme all regions
region.tpl.php
Can theme a specific region
region—search.tpl.php

Used to theme individual fields
Will theme all the fields that are of that type
Must flush cache when adding and removing templates
For example you create an image field and use that
across three content types, the field theme will apply
the field.tpl.php to all three content types

field.tpl.php
field--field-type.tpl.php
field--field-name.tpl.php
field--content-type.tpl.php
field--field-name--content-type.tpl.php

Themes the way that comments look
Can theme individual comments and the
comment area wrapper

Can theme the comment wrapper
comment-wrapper.tpl.php
Can theme individual comments
comment.tpl.php

Themes how your “Site offline” page looks

Enables you to control how your maintenance
page looks enables a more professional look

When you turn your site offline into
maintenance mode if you don’t have a specific
maintenance theme the default Drupal
maintenance template will display

 You can only use page.tpl.php variables on
page.tpl.php as you can only use node
variables on node.tpl.php
 This means not all variables can be printed on
all templates, variables are template specific
 Theme inheritance applies, more about
that…

1. Drupal core applies its own .tpl.php files
they are called first
2. Drupal modules apply their own .tpl.php
files these are applied second and over write
any css calls that exist in core tpl.php files
3. Your theme has its own .tpl.php files these
are applied last and over write calls in core
tpl.php files and module tpl.php files
4. Your theme has the final say!

theme tpl.php files Theme Wins
/sites/all/themes/ourtheme/templates/node.tpl.php
module
node.tpl.php gets
overridden by the
module tpl.php files them
node.tpl.php
/sites/all/modules/examplemodule/node.tpl.php

Core
core tpl.php files node.tpl.php gets
overridden by the
/modules/node/node.tpl.php modules
node.tpl.php

File does not exist
Core Wins
There is no file to
overwrite the
/sites/all/themes/ourtheme/templates/?
core so it is used
to create the
output
File does not exist
There is no file to
/sites/all/modules/examplemodule/? overwrite the
core tpl file

core tpl.php files
Core html.tpl.php
is applied to the
/modules/node/html.tpl.php
layout

Templates within your own Theme can also be
overwritten by other templates in your theme this
allows you to be specific with your template target
Drupal.org describes it as “Template suggestions
are made based on these factors

 Listed from the most specific template to the least.

 Drupal will use the most specific template it
finds.”

Specific Wins
node--nodeid.tpl.php node—nodeid.tpl.php
will apply to the
specific node that
matches the id number

node--type.tpl.php
node--type.tpl.php will apply to all
nodes of a specific
content type

node.tpl.php will
node.tpl.php be called to
theme all Drupal
nodes

1. Drupal core applies its own .css file this is
called first
2. Drupal modules apply their own .css files
these are applied second and over write any
css calls that exist in core css files
3. Your theme has its own .css files these are
applied last and over write calls in core css
files and module css files
4. Your theme has the final say!

If a theme .css file has the same class call, then it will
be overwritten by the theme css
Theme Wins
h1 { font-size: 3em; } module css calls
gets overridden
by the theme css
If a module .css file has the same class call, then it calls
will be overwritten by the module css

h1 { font-size: 2em; }
Core css calls
Core css files style a header tag get overridden by
the modules if
h1 { font-size: 1.6em; } there is a file with
the same name
style.css

You see a CSS class coming from module/node/node.css?
Don’t change the module/node/node.css file
Do copy the css call and paste it into your
theme.css file

You want to use your own css to style a module?
Don’t change sites/all/modules/name/module.css
file
Do take a copy of the css file, place a copy of the
module.css file into your theme folder and enter
stylesheets[all][] = modulestyle.css into your themes
info file Do flush cache

There are 42 different .tpl files in Drupal7 core modules
folder.
/modules/modulename/*.tpl.php

Each one of these can be copied and placed in your own
theme to overwrite the output
/sites/all/theme/yourtheme/templates/*.tpl.php

If a contributed module has a .tpl file this can be copied
into your theme folder and it will overwrite the .tpl in the
modules folder
/sites/all/modules/example/*.tpl.php

1. Take a copy of the .tpl.php file we need from
the module
2. Move the copy to our themes templates folder,
this can be under the folder
theme/templates/*.tpl.php
or under the root of the theme folder
theme/*.tpl.php
1. Flush cache or flush the theme registry to see
if we can notice the changes on the website

Theme the layout of a specific content type;

If you want to theme the news content type,
you would create;

 node-news.tpl.php
 node-content-type-machine-name.tpl.php

 Take a copy of node.tpl.php
 Rename it to node—contenttype.tpl.php
 Add the styling you want

 If you want to change the layout then you can
use devel to locate the field names and print
them out separately
 To do this you need to delete the $content variable
print render replace it with calls to the specific fields
print render($content['field_gallery_image']);

<div class="content">
<?php
// First we hide the comments and links now so that we can render
them later.
hide($content['comments']);
hide($content['links']);
// Then we print the content. Comments and links not included here.
print render($content);
?>
</div>
// Then we print the links and comments separately

<?php print render($content['links']); ?>
<?php print render($content['comments']); ?>.

 You can use the Devel module to tell you all the
fields you have available on a content type
 Devel render will display the name you need to
call to print that field in the tpl file
Field variables will print out the array so if there is
1 it will print 1 or if there is 3 it will print out 3, one
after the other, an example three images files
uploaded to a node will print out three times by
calling the field

<div class="imageElement">
<?php
print render($content['field_gallery_image']);
print render($content['field_galleryimagecaption']);
?>
</div>

print render($content['field_namehere']);

 It is a good first start
 Look for a theme that has the desired layout
 Download a theme from the Drupal.org
website, and apply it to your website
 You need to enable the theme and set it as
the default

If your going to change a contributed theme;

1. Take a copy of the theme folder and give it a
new name
2. Rename the x.info file to match the name of
the folder
3. Open up the theme and change some of the
CSS styles
4. Change any calls to image files in the theme
and replace them with your own

 A base theme gives you a good starting point for
creating your own theme
 Its best to use a base theme otherwise you may
miss needed Drupal PHP variables
 It helps reduce development time
 Takes care of a lot of the starting work in
creating your own theme from scratch
 You can use a responsive design aka Adaptive
base theme is a responsive design which means
you don’t need to write the media query calls

 Sub themes inherit templates, css, js and
functions from there base theme
 This means;
 If the base theme is based on the 960 grid system
the sub theme will as well
 If the base theme is an adaptive theme, the sub
theme will be as well
 It saves us time of building these features into
our themes

 Sub themes must always have the core theme
enabled in the Drupal appearance area
 The subtheme must be enabled and set as
default
 Each base theme has its own documentation,
but, generally we take a copy of one of the start
sub-themes and we rename it to our new theme
name

The best way to get your personalised site

But you need to understand and know the
Drupal theme variables and structure

So often best to use a Base Theme

Learning Drupal Sydney
Aimee Maree Forsstrom – Drupal Solution Architect

A look at Drupal 7 Theming

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to A look at Drupal 7 Theming

Similar to A look at Drupal 7 Theming (20)

More from Aimee Maree Forsstrom

More from Aimee Maree Forsstrom (20)

Recently uploaded

Recently uploaded (20)

A look at Drupal 7 Theming