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 them...
No, you can use modules to change the layout of apage or section of a page.An example of some modules are; Panels http://d...
PHP variablesare turned into  the needed  HTML calls
You can change your sites theme from the“Appearance” menu option in Drupal 7a themes can consist of a couple of .tpl files...
/sites/all/themes [correct]/themes [not correct]Never over write core themes files that live inthe base folder of Drupal, ...
All Drupal themes must have an info.php file,one css file  .info (required) > think of this as the template configuration ...
Think of it as the themes configuration fileMust be named the same as the theme folderRequired in a themeTells Drupal abou...
Think of it as the content between <head></head>Prints out all needed CSS and JavaScript filesDoes not need to be included...
Think of it as the content between <body></body>You print your regions in your page.tpl.php<?php print render ($page[prefa...
Themes all nodes in the sitePrints out the output of $content variable in page.tpl.phpControls what all node pages look li...
Themes all blocks or themes a specific blockAllows you to wrap more HTML and CSS codearound the block or remove some HTMLC...
Themes all regions or themes a specific regionAllows you to wrap more HTML and CSS codearound the region areaAllows you to...
Used to theme individual fieldsWill theme all the fields that are of that typeMust flush cache when adding and removing te...
Themes the way that comments lookCan theme individual comments and thecomment area wrapperCan theme the comment wrapper   ...
Themes how your “Site offline” page looksEnables you to control how your maintenancepage looks enables a more professional...
   You can only use page.tpl.php variables on    page.tpl.php as you can only use node    variables on node.tpl.php   Th...
1.   Drupal core applies its own .tpl.php files     they are called first2.   Drupal modules apply their own .tpl.php     ...
theme tpl.php files                  Theme Wins/sites/all/themes/ourtheme/templates/node.tpl.php                          ...
File does not exist                                         Core Wins                                         There is no ...
Templates within your own Theme can also beoverwritten by other templates in your theme thisallows you to be specific with...
Specific Winsnode--nodeid.tpl.php   node—nodeid.tpl.php                       will apply to the                       spec...
1.   Drupal core applies its own .css file this is     called first2.   Drupal modules apply their own .css files     thes...
If a theme .css file has the same class call, then it will          be overwritten by the theme 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 an...
There are 42 different .tpl files in Drupal7 core modulesfolder.      /modules/modulename/*.tpl.phpEach one of these can b...
1.   Take a copy of the .tpl.php file we need from     the module2.   Move the copy to our themes templates folder,     th...
Theme the layout of a specific content type;If you want to theme the news content type,you would create;   node-news.tpl....
   Take a copy of node.tpl.php   Rename it to node—contenttype.tpl.php   Add the styling you want   If you want to cha...
<div class="content"> <?php    // First we hide the comments and links now so that we can renderthem later.       hide($co...
   You can use the Devel module to tell you all the    fields you have available on a content type   Devel render will d...
<div class="imageElement">  <?php     print render($content[field_gallery_image]);     print render($content[field_gallery...
   It is a good first start   Look for a theme that has the desired layout   Download a theme from the Drupal.org    we...
If your going to change a contributed theme;1.   Take a copy of the theme folder and give it a     new name2.   Rename the...
 A base theme gives you a good starting point for  creating your own theme Its best to use a base theme otherwise you ma...
   Sub themes inherit templates, css, js and    functions from there base theme   This means;     If the base theme is ...
   Sub themes must always have the core theme    enabled in the Drupal appearance area   The subtheme must be enabled an...
The best way to get your personalised siteBut you need to understand and know the  Drupal theme variables and structure   ...
Learning Drupal SydneyAimee Maree Forsstrom – Drupal Solution Architect
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
A look at Drupal 7 Theming
Upcoming SlideShare
Loading in …5
×

A look at Drupal 7 Theming

8,224 views

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,224
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
190
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

A look at Drupal 7 Theming

  1. 1. A look at how Drupal themes are created Learning Drupal Sydney
  2. 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. 3. No, you can use modules to change the layout of apage 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
  4. 4. PHP variablesare turned into the needed HTML calls
  5. 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. 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. 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.csshttp://drupal.org/node/190815 lists all core templates
  8. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. Templates within your own Theme can also beoverwritten by other templates in your theme thisallows you to be specific with your template targetDrupal.org 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. <div class="imageElement"> <?php print render($content[field_gallery_image]); print render($content[field_galleryimagecaption]); ?></div>print render($content[field_namehere]);
  33. 33.  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
  34. 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 x.info 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. 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. 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. 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. 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. 39. Learning Drupal SydneyAimee Maree Forsstrom – Drupal Solution Architect

×