A look at Drupal 7 Theming
60
Drupal 7 Theming A look at how Drupal themes are created Learning Drupal Sydney
-
Upload
aimee-maree-forsstrom -
Category
Technology
-
view
113 -
download
4
description
A look into some of the main template files n Drupal7 and a look into them inheritance
Transcript of A look at Drupal 7 Theming
Drupal 7 Theming
A look at how Drupal themes are created
Learning Drupal Sydney
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
Do I have to create a theme to change the layout?
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
Index.html vs page.tpl.php
traditional-webpage.html
1. Take index.html
2. Replace static content with PHP variable calls
In summary that is what templates files are, HTML files with some added PHP magic source
Now add some PHP variables
Theme output
PHP variables are turned into the needed HTML calls
That’s nice but what does it all mean?
To change the way Drupal looks you need a theme
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
Where Drupal themes live
/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
The basic files in a 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
theme.info
Think of it as the themes configuration fileMust be named the same as the theme folderRequired in a themeTells Drupal about the theme
Declares themes name name = OurthemeDeclares what version of Drupal core = 6.xDeclares css files stylesheets[all][] = style.cssDeclares javascript files scripts[] = scripts/superfish.jsDeclares regions regions[content] = Main contentDeclares features features[] = logo
theme.info
html.tpl.php
Think of it as the content between <head> </head>Prints out all needed CSS and JavaScript filesDoes not need to be included in a file as it will inherit the Drupal core html.tpl.php fileAllows for more granular control
html.tpl.php
page.tpl.php
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 websiteCreate’s the page layout, were content is printed, menu, search, sidebars…
page.tpl.php
node.tpl.php
Themes all nodes in the sitePrints out the output of $content variable in page.tpl.phpControls 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 nodesnode.tpl.phpCan theme a specific nodenode--nodeid.tpl.php
node.tpl.php
block.tpl.php
Themes all blocks or themes a specific blockAllows 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 regionblock--region.tpl.php
Can themes blocks produced by modulesblock--module.tpl.php
block.tpl.php
Putting it all together
But we can add more templates?
region.tpl.php
Themes all regions or themes a specific regionAllows you to wrap more HTML and CSS code around the region areaAllows 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 regionregion—search.tpl.php
region.tpl.php
field.tpl.php
Used to theme individual fieldsWill theme all the fields that are of that typeMust flush cache when adding and removing templatesFor 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.phpfield--field-type.tpl.phpfield--field-name.tpl.phpfield--content-type.tpl.phpfield--field-name--content-type.tpl.php
field.tpl.php
comment.tpl.php
Themes the way that comments lookCan theme individual comments and the comment area wrapper
Can theme the comment wrappercomment-wrapper.tpl.php
Can theme individual comments comment.tpl.php
comment.tpl.php
comment-wrapper.tpl.php
Putting it all together
maintenance-page.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
Some rules apply here
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…
But Drupal seems to add its own HTML ?
Drupal Theme 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!
Drupal .tpl.php inheritance
core tpl.php files
/modules/node/node.tpl.php
module tpl.php files
/sites/all/modules/examplemodule/node.tpl.php
theme tpl.php files
/sites/all/themes/ourtheme/templates/node.tpl.php
Core node.tpl.php gets overridden by the modules node.tpl.php
module node.tpl.php gets overridden by the them node.tpl.php
Theme Wins
What happens when there's nothing to inherit?
core tpl.php files
/modules/node/html.tpl.php
File does not exist
/sites/all/modules/examplemodule/?
File does not exist
/sites/all/themes/ourtheme/templates/?
Core html.tpl.php is applied to the layout
There is no file to overwrite the core so it is used to create the output
Core Wins
There is no file to overwrite the core tpl file
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.”
In Drupal templates specific wins
node.tpl.php
node--type.tpl.php
node--nodeid.tpl.php
node.tpl.php will be called to theme all Drupal nodes
node—nodeid.tpl.php will apply to the specific node that matches the id number
Specific Wins
node--type.tpl.php will apply to all nodes of a specific content type
Drupal core has its own 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!
Drupal CSS inheritance
Core css files style a header tag
h1 { font-size: 1.6em; }
If a module .css file has the same class call, then it will be overwritten by the
module css
h1 { font-size: 2em; }
If a theme .css file has the same class call, then it will be overwritten by the theme
css
h1 { font-size: 3em; }
Core css calls get overridden by the modules if there is a file with the same name style.css
module css calls gets overridden by the theme css calls
Theme Wins
Inheritance Don't and Do’sYou 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
Output of Drupal 7 css calls
Its a lot to take in
So how do I theme modules?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
So to theme a module
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
3. Flush cache or flush the theme registry to see if we can notice the changes on the website
Also content types can be themed
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
To theme a content type
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']);
Granular theming of $content<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']); ?>.
Devel and calling field variables 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
Styling content type fields <div class="imageElement">
<?php print render($content['field_gallery_image']); print render($content['field_galleryimagecaption']); ?>
</div>
print render($content['field_namehere']);
Where to start?
Using a contributed theme
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
Don’t like the header tags or background?
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
Using a Base Theme
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
So we need to create a sub-theme
So what is a Sub theme
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
How do we create one
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
Creating a theme from scratch
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
Thank youLearning Drupal SydneyAimee Maree Forsstrom – Drupal Solution Architect
