2. Summary
Assumes some knowledge of Drupal themes
Assumes some knowledge of HTML/CSS
@aimee_maree
www.aimeemaree.com
Drupal Solution Architect @demonzmedia
Freelance Open Source Solution Design
Believer in Free Speech and Free Libre Open Source
Software
This presentation was created using Libre Office
3. What is a Theme
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
6. New functions for content
$content does not require preprocess functions in order to split
content
Two new functions for printing out node variables render() and hide()
<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']); ?>.
7. Bye Bye PHPTemplate overrides
Function names must match theme name
In Drupal6 you could override theme functions with calling
PHPTemplate.engine
function phptemplate_breadcrumb()
In Drupal7 this has been depreciated
function THEMENAME_breadcrumb()
9. Template delimiter change
Template suggestions in Drupal7 must be
separated by -- not -
node--news.tpl.php
You can still use - to separate names
node--media-article.tpl.php
node--content-type-machine-name.tpl.php
10. Default regions in Drupal7
Drupal7 has new default regions
header
help (new region to display help)
highlight (replaces mission)
content (must be included in a theme)
sidebar_first
sidebar_second
footer
11. Hidden regions in Drupal7
Drupal 7 now has hidden regions
Modules can print content out to hidden regions
without needed to create a block
The below example would print content but not
wishlist, however a module can print its output to the
region wishlist
regions[content] = Content
regions[wishlist] = Wishlist
regions_hidden[] = wishlist
12. Hiding CSS elements
Two new CSS classes to assist with hiding CSS
elements in Drupal7
.element-hidden hides an element from all users
.element-invisible hides an element visually, which means
it remains available to screen readers
13. More CSS changes
Drupal 7 is adhering to CSS naming conventions
.clear-block was removed and replaced with .clearfix
In Drupal6 we would call
<div class="clear-block">
Now in Drupal7 we call
<div class="clearfix">
15. Preprocess and Process
Process functions will run after preprocess functions
This enables a two step approach when variables need
to be worked on in two phases;
In preprocess you can add classes into an
Array
In process you can flatten the array into a
string for template printing
16. Preprocess functions
In Drupal7 they apply to both templates and
functions
Preprocess functions are called before process
functions
The preprocessor enables variables to be placed
within .tpl.php files
17. Theme Hook Alter
Hook Alter is no longer just for modules
hook_page_alter – allows all variables displayed on a
page to be altered/hidden
hook_form_alter – allows small tweaks to forms, no
need to create a custom module
hook_js_alter
hook_css_alter
18. No longer need node.tpl.php
In Drupal6 we needed to have node.tpl.php in our
theme in order to theme content types
sites/all/themes/ourtheme/node.tpl.php
sites/all/themes/ourtheme/node-event.tpl.php
In Drupal7 we no longer need node.tpl.php in our
theme in order to theme content types
modules/node/node.tpl.php
sites/all/themes/ourtheme/node--event.tpl.php
20. Wildcard Suggestions
Drupal7 can now use wildcard suggestions in template
names
Drupal6, needed to know the specific ID
Page-user.tpl.php would theme all user pages as well as the log-
in, to theme only the user pages you would need to specify the
integer for all Page-user-42.tpl.php, Page-user-32.tpl.php
Drupal7, you can specify a wildcard
So you can theme all user pages but not the login
page--user--%.tpl.php
21. Over 50 theme changes in
Drupal7
$content now appears in block admin UI
Blocks have more meaningful CSS classes .block-blog-recent
$classes variable can be added to your preprocess hooks
Additions to drupal_add_css()
Classes and Attributes are now standard and predefined
All titles now have $prefix and $suffix added
23. Accessibility Changes
RDFa can now be included, make sure you add;
<head profile=”<?php print $grddl_profile; ?>
Adding “Skip to Navigation” to core themes
Removal of duplicate and null tags
Creation of the D7AX hash tag for accessibility for module
and theme maintainers
Some modules/themes now include WAI-ARIA
25. html.tpl.php
Webpage output is now constructed by
html.tpl.php and not page.tpl.php
Page.tpl.php has been split apart
html.tpl.php now contains the
content between <head> </head> and
constructs the template
html.tpl.php calls page.tpl
Allows for more granular control
27. page.tpl.php
No longer contains the header information that's in
html.tpl.php
No longer constructs the template thats html.tpl.php
job
Is now called from html.tpl.php
Now only contains the contents between the wrapper
DIV ie the header, sidebars, page content
29. node.tpl.php
As with Drupal6 in Drupal7 node prints out the main
content area
No longer need to have node.tpl.php in your theme
when creating custom node.tpl's
Can theme specific node's
node--nodeid.tpl.php
node--type.tpl.php
node.tpl.php
31. region.tpl.php
New to Drupal 7 allows ease of changing region
styling
Can theme all regions or themes a specific
region
Allows you to wrap more HTML and CSS code
around the region area
32. region.tpl.php
Allows more control of Drupal out-put
region.tpl.php will allow you to style all regions the
same
To style the menu differently you can specify region--
menu.tpl.php
Can theme all regions
region.tpl.php
Can theme a specific region
region—search.tpl.php
34. field.tpl.php
New to Drupal 7
Fields can be themed with field.tpl.php
Can theme individual fields or groups of field types
Will theme all the fields that are of that type
Must flush cache when adding and removing templates
35. field.tpl.php
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
39. The Inheritance Process
Drupal inheritance works as a system of overrides
Has a specific cascading order (some exceptions noted)
Powerful, because it enables you to override the things you
don't like
All changes live within your theme, leaving the system
defaults alone
So we OVERRIDE and don't HACK
40. Drupal Overrides
Modules
Core A Default
Theme Engine B Override
Theme C Override
42. Template Inheritance
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!
43. Drupal .tpl.php inheritance
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
node.tpl.php gets
core tpl.php files
overridden by the
/modules/node/node.tpl.php modules
node.tpl.php
44. Nothing to inherit?
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
45. Inheritance within your own
theme
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.”
46. In Drupal most specific wins
Specific Wins
node—nodeid.tpl.php will
node--nodeid.tpl.php apply to the specific node
that matches the id number
node--type.tpl.php will
node--type.tpl.php apply to all nodes of a
specific content type
node.tpl.php will be
called to theme all Drupal
node.tpl.php nodes
47. Drupal module theming
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
48. So to theme a module?
1.Take a copy of the .tpl.php file we need from the
module
1.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
50. Theme functions are also
Inherited
1.Modules provide their own theme functions
2.Find the theme function in .module
3.Copy the function into your template.php file
4.Change the function name from theme_pager
to your-theme_pager
5.Flush cache
6.Your theme has the final say!
51. Theme Function Inheritance
Theme Wins
Core module file themes the pager, this is
considered the default If no function is found
in your theme then
theme_pager() the default is applied
Drupal looks in your
theme folder first
Your template.php in sites/all/themes/your_theme
If it finds the function
theme_pager() there it applies it and
stops looking
52. Setting Template Variables
1. Locate the preprocess function you want to change
the variable for
2.Copy the preprocess function into your template.php
file
3. Change the function name to match your theme
name
4.Your template.php has the final say!
53. Preprocess Inheritance
Your theme Wins
Your template.php in sites/all/themes/your_theme
Variable is appended
to your new value
function yourtheme_preprocess(&$vars)
{$vars['new_variable'] = 'happy hippie'; }
Preprocess calls $vars
and also $hook allows
Core module file themes the pager, this is your template.php to
considered the default hook in and change the
variable
function garland_preprocess(&$vars, $hook) { if … }
55. Pre-process functions are
stacked
Do not get overwritten but stack on top of each other
What does this mean?
If we declare in our sub theme the same preprocess
functions as our base theme it will get added to the
base theme and not overwrite it
56. Template.php is stacked
The sub-theme and base theme template.php file will be
stacked
base theme is included first and then our sub-theme is
included
This means we inherit from our base theme and append to
our sub theme for template.php
57. Sub-themes inherit from base
Template files can be overwritten by adding that .tpl.php
inside our subtheme
Theme function overwrites work in the same way we can
recreate a base thee function in our template.php and this
will overwrite the base theme settings
We can overwrite CSS / JavaScript files by incuding them in
our subtheme .info file
58. What is not inherited in sub-
themes?
Theme settings are not inherited
So if we want our sub theme to have these
we need to;
1. copy the theme-settings.php from the
base theme folder
2. place into our sub-theme folder
3. make any modification's we need to our
sub-theme file
60. Drupal core CSS
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!
61. Drupal CSS inheritance
If theme .css file has the same class call, it will be
overwritten by the theme css Theme Wins
h1 { font-size: 3em; } Module css calls
gets overridden
by the theme css
If module .css file has the same class call, it will be calls
overwritten by the module css
h1 { font-size: 2em; }
Core css calls
get overridden by
Core css files style a header tag the modules if there
is a file with the
h1 { font-size: 1.6em; } same name style.css
62. Inheritance Don't and Do’s
Do save your theme folder/files into /sites/all/themes [correct]
Don't edit or save files in /themes [not correct]
Don't over write core themes files that live in the base folder of Drupal, this is called
hacking core
Dont take a copy of a core theme to create another theme
Do use a contributed theme or create sub theme from a base theme
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
64. Recommended Themes
Boron re-writes Drupal core templates into HTML5 with WAI-
ARIA roles and WCAG 2.0 compliance
Mothership removes core CSS and HTML markup to provide a
cleaner base
Stark shows the core CSS and HTML mark-up provided by
Drupal
Omega and Adaptive WCAG 1.0 compliance some WAI-ARIA
support allow for responsive theming
65. Its a lot to take in
@aimee_maree
Aimee Maree Forsstrom
www.aimeemaree.com
Drupal Solution Architect