Your SlideShare is downloading. ×
  • Like
A look at Drupal 7 Theming
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

A look at Drupal 7 Theming


A look into some of the main template files n Drupal7 and a look into them inheritance

A look into some of the main template files n Drupal7 and a look into them inheritance

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. A look at how Drupal themes are created Learning Drupal Sydney
  • 2. 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.orgThink of it as the index.html with static content replaced by PHP variables
  • 3. No, you can use modules to change the layout of apage or section of a page.An example of some modules are; Panels Display Suite Skinr Block Class But they only change the layout of pages not the frame of the site
  • 4. PHP variablesare turned into the needed HTML calls
  • 5. You can change your sites theme from the“Appearance” menu option in Drupal 7a themes can consist of a couple of .tpl files(page.tpl.php, node.tpl.php) and on .css filea themes can consist of many .tpl files andmultipule .css and .js files
  • 6. /sites/all/themes [correct]/themes [not correct]Never over write core themes files that live inthe base folder of Drupal, this is called hackingcoreDon’t take a copy of a core theme to createanother theme use a contributed theme
  • 7. All Drupal themes must have an info.php file,one css file .info (required) > think of this as the template configuration fileAll other files depend on how much you want tocustomise the look of DrupalA typical theme consists of page.tpl.php, node.tpl.php,block.tpl.php, comment.tpl.php, style.css lists all core templates
  • 8. Think of it as the themes configuration fileMust be named the same as the theme folderRequired in a themeTells Drupal about the themeDeclares 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
  • 9. 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 willinherit the Drupal core html.tpl.php fileAllows for more granular control
  • 10. 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 isprinted, menu, search, sidebars…
  • 11. 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 byspecific 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
  • 12. Themes all blocks or themes a specific blockAllows you to wrap more HTML and CSS codearound the block or remove some HTMLCan theme all blocks block.tpl.phpCan theme all blocks in a specific region block--region.tpl.phpCan themes blocks produced by modules block--module.tpl.php
  • 13. Themes all regions or themes a specific regionAllows you to wrap more HTML and CSS codearound the region areaAllows you to style the menu region and then thesidebar region to have more control of Drupalout-putCan theme all regions region.tpl.phpCan theme a specific region region—search.tpl.php
  • 14. 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 thatacross three content types, the field theme will applythe field.tpl.php to all three content typesfield.tpl.phpfield--field-type.tpl.phpfield--field-name.tpl.phpfield--content-type.tpl.phpfield--field-name--content-type.tpl.php
  • 15. Themes the way that comments lookCan theme individual comments and thecomment area wrapperCan theme the comment wrapper comment-wrapper.tpl.phpCan theme individual comments comment.tpl.php
  • 16. Themes how your “Site offline” page looksEnables you to control how your maintenancepage looks enables a more professional lookWhen you turn your site offline intomaintenance mode if you don’t have a specificmaintenance theme the default Drupalmaintenance template will display
  • 17.  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…
  • 18. 1. Drupal core applies its own .tpl.php files they are called first2. Drupal modules apply their own .tpl.php files these are applied second and over write any css calls that exist in core tpl.php files3. 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 files4. Your theme has the final say!
  • 19. 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
  • 20. 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
  • 21. Templates within your own Theme can also beoverwritten by other templates in your theme thisallows you to be specific with your template describes it as “Template suggestionsare made based on these factors  Listed from the most specific template to the least.  Drupal will use the most specific template it finds.”
  • 22. Specific Winsnode--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
  • 23. 1. Drupal core applies its own .css file this is called first2. Drupal modules apply their own .css files these are applied second and over write any css calls that exist in core css files3. Your theme has its own .css files these are applied last and over write calls in core css files and module css files4. Your theme has the final say!
  • 24. 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
  • 25. 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 fileYou 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
  • 26. There are 42 different .tpl files in Drupal7 core modulesfolder. /modules/modulename/*.tpl.phpEach one of these can be copied and placed in your owntheme to overwrite the output /sites/all/theme/yourtheme/templates/*.tpl.phpIf a contributed module has a .tpl file this can be copiedinto your theme folder and it will overwrite the .tpl in themodules folder /sites/all/modules/example/*.tpl.php
  • 27. 1. Take a copy of the .tpl.php file we need from the module2. 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.php1. Flush cache or flush the theme registry to see if we can notice the changes on the website
  • 28. 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
  • 29.  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]);
  • 30. <div class="content"> <?php // First we hide the comments and links now so that we can renderthem 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]); ?>.
  • 31.  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 fileField variables will print out the array so if there is1 it will print 1 or if there is 3 it will print out 3, oneafter the other, an example three images filesuploaded to a node will print out three times bycalling the field
  • 32. <div class="imageElement"> <?php print render($content[field_gallery_image]); print render($content[field_galleryimagecaption]); ?></div>print render($content[field_namehere]);
  • 33.  It is a good first start Look for a theme that has the desired layout Download a theme from the website, and apply it to your website You need to enable the theme and set it as the default
  • 34. If your going to change a contributed theme;1. Take a copy of the theme folder and give it a new name2. Rename the file to match the name of the folder3. Open up the theme and change some of the CSS styles4. Change any calls to image files in the theme and replace them with your own
  • 35.  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
  • 36.  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
  • 37.  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
  • 38. The best way to get your personalised siteBut you need to understand and know the Drupal theme variables and structure So often best to use a Base Theme
  • 39. Learning Drupal SydneyAimee Maree Forsstrom – Drupal Solution Architect