Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Drupal 7 ThemingChanges in Drupal7 and Theme Inheritance
SummaryAssumes some knowledge of Drupal themesAssumes some knowledge of HTML/CSS                  @aimee_maree            ...
What is a Theme  In a CMS a presentation layer displays the content to website visitors based on a set of                 ...
Biggest theme change sinceDrupal 4.7
That’s nice but, what does it allmean anyway?
New functions for content$content does not require preprocess functions in order to splitcontentTwo new functions for prin...
Bye Bye PHPTemplate overridesFunction names must match theme nameIn Drupal6 you could override theme functions with callin...
box.tpl.php is now extinct
Template delimiter changeTemplate suggestions in Drupal7 must be separated by -- not -node--news.tpl.phpYou can still use ...
Default regions in Drupal7Drupal7 has new default regions    header    help (new region to display help)    highlight (rep...
Hidden regions in Drupal7Drupal 7 now has hidden regionsModules can print content out to hidden regionswithout needed to c...
Hiding CSS elementsTwo new CSS classes to assist with hiding CSSelements in Drupal7.element-hidden hides an element from a...
More CSS changesDrupal 7 is adhering to CSS naming conventions.clear-block was removed and replaced with .clearfix  In Dru...
More power to be an individual
Preprocess and ProcessProcess functions will run after preprocess functionsThis enables a two step approach when variables...
Preprocess functionsIn Drupal7 they apply to both templates andfunctionsPreprocess functions are called before processfunc...
Theme Hook AlterHook Alter is no longer just for moduleshook_page_alter – allows all variables displayed on apage to be al...
No longer need node.tpl.phpIn Drupal6 we needed to have node.tpl.php in ourtheme in order to theme content types sites/all...
Did somebody mentionwildcards?
Wildcard SuggestionsDrupal7 can now use wildcard suggestions in templatenamesDrupal6, needed to know the specific IDPage-u...
Over 50 theme changes inDrupal7$content now appears in block admin UIBlocks have more meaningful CSS classes .block-blog-r...
Drupal7 Accessibility Changes
Accessibility ChangesRDFa can now be included, make sure you add;<head profile=”<?php print $grddl_profile; ?>Adding “Skip...
So many Templates?
html.tpl.phpWebpage output is now constructed byhtml.tpl.php and not page.tpl.phpPage.tpl.php has been split aparthtml.tpl...
html.tpl.php
page.tpl.phpNo longer contains the header information thats inhtml.tpl.phpNo longer constructs the template thats html.tpl...
page.tpl.php
node.tpl.phpAs with Drupal6 in Drupal7 node prints out the maincontent areaNo longer need to have node.tpl.php in your the...
node.tpl.php
region.tpl.phpNew to Drupal 7 allows ease of changing regionstylingCan theme all regions or themes a specificregionAllows ...
region.tpl.phpAllows more control of Drupal out-putregion.tpl.php will allow you to style all regions thesameTo style the ...
region.tpl.php
field.tpl.phpNew to Drupal 7Fields can be themed with field.tpl.phpCan theme individual fields or groups of field typesWil...
field.tpl.phpFor example you create an image field and use thatacross three content types, the field theme will applythe f...
field.tpl.php
Putting it all together
But Drupal likes to add its own HTML?
The Inheritance ProcessDrupal inheritance works as a system of overridesHas a specific cascading order (some exceptions no...
Drupal Overrides          Modules           Core        A Default        Theme Engine   B   Override           Theme      ...
Theme Registry can also bemanipulated
Template Inheritance1. Drupal core applies its own .tpl.php files they are  called first2.Drupal modules apply their own ....
Drupal .tpl.php inheritance                theme tpl.php files                    Theme Wins   /sites/all/themes/ourtheme/...
Nothing to inherit?              File does not exist                                             Core Wins                ...
Inheritance within your ownthemeTemplates within your own Theme can also be overwrittenby other templates in your theme th...
In Drupal most specific wins                         Specific Wins                          node—nodeid.tpl.php will  node...
Drupal module themingThere are 42 different .tpl files in Drupal7 core modules folder.     /modules/modulename/*.tpl.phpEa...
So to theme a module?1.Take a copy of the .tpl.php file we need from the module1.Move the copy to our themes templates fol...
But what about functions?
Theme functions are alsoInherited1.Modules provide their own theme functions2.Find the theme function in .module3.Copy the...
Theme Function Inheritance                                                   Theme Wins    Core module file themes the pag...
Setting Template Variables1. Locate the preprocess function you want to change   the variable for2.Copy the preprocess fun...
Preprocess Inheritance                                                      Your theme WinsYour template.php in sites/all/...
What about sub-themes?
Pre-process functions arestackedDo not get overwritten but stack on top of each otherWhat does this mean?If we declare in ...
Template.php is stackedThe sub-theme and base theme template.php file will bestackedbase theme is included first and then ...
Sub-themes inherit from baseTemplate files can be overwritten by adding that .tpl.phpinside our subthemeTheme function ove...
What is not inherited in sub-themes?Theme settings are not inheritedSo if we want our sub theme to have thesewe need to;1....
So many CSS files
Drupal core CSS1. Drupal core applies its own .css file this is called first2.Drupal modules apply their own .css files th...
Drupal CSS inheritanceIf theme .css file has the same class call, it will be          overwritten by the theme css        ...
Inheritance Dont and Do’sDo save your theme folder/files into /sites/all/themes [correct]Dont edit or save files in /theme...
Oh did I mention Clear Cache?
Recommended ThemesBoron re-writes Drupal core templates into HTML5 with WAI-ARIA roles and WCAG 2.0 complianceMothership r...
Its a lot to take in@aimee_mareeAimee Maree Forsstromwww.aimeemaree.comDrupal Solution Architect
Upcoming SlideShare
Loading in …5
×

Drupal7 themeing changes and inheritence

5,276 views

Published on

Talk presented at Drupal Downunder Melbourne 2012 video of talk can be seen on you tube http://www.youtube.com/watch?v=7csQRWRXK18

Published in: Technology
  • Let me briefly catch you up so that you don't miss out on this phenomenal opportunity. I am sharing with you a PREMIUM WOW GOLD DIGGER7.1 Technology
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Drupal7 themeing changes and inheritence

  1. 1. Drupal 7 ThemingChanges in Drupal7 and Theme Inheritance
  2. 2. SummaryAssumes some knowledge of Drupal themesAssumes 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. 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.orgThink of it as the index.html with static content replaced by PHP variables
  4. 4. Biggest theme change sinceDrupal 4.7
  5. 5. That’s nice but, what does it allmean anyway?
  6. 6. New functions for content$content does not require preprocess functions in order to splitcontentTwo 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. 7. Bye Bye PHPTemplate overridesFunction names must match theme nameIn Drupal6 you could override theme functions with callingPHPTemplate.engine function phptemplate_breadcrumb()In Drupal7 this has been depreciated function THEMENAME_breadcrumb()
  8. 8. box.tpl.php is now extinct
  9. 9. Template delimiter changeTemplate suggestions in Drupal7 must be separated by -- not -node--news.tpl.phpYou can still use - to separate namesnode--media-article.tpl.phpnode--content-type-machine-name.tpl.php
  10. 10. Default regions in Drupal7Drupal7 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. 11. Hidden regions in Drupal7Drupal 7 now has hidden regionsModules can print content out to hidden regionswithout needed to create a blockThe below example would print content but notwishlist, however a module can print its output to theregion wishlist regions[content] = Content regions[wishlist] = Wishlist regions_hidden[] = wishlist
  12. 12. Hiding CSS elementsTwo new CSS classes to assist with hiding CSSelements in Drupal7.element-hidden hides an element from all users.element-invisible hides an element visually, which meansit remains available to screen readers
  13. 13. More CSS changesDrupal 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">
  14. 14. More power to be an individual
  15. 15. Preprocess and ProcessProcess functions will run after preprocess functionsThis enables a two step approach when variables needto 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. 16. Preprocess functionsIn Drupal7 they apply to both templates andfunctionsPreprocess functions are called before processfunctionsThe preprocessor enables variables to be placedwithin .tpl.php files
  17. 17. Theme Hook AlterHook Alter is no longer just for moduleshook_page_alter – allows all variables displayed on apage to be altered/hiddenhook_form_alter – allows small tweaks to forms, noneed to create a custom modulehook_js_alterhook_css_alter
  18. 18. No longer need node.tpl.phpIn Drupal6 we needed to have node.tpl.php in ourtheme in order to theme content types sites/all/themes/ourtheme/node.tpl.php sites/all/themes/ourtheme/node-event.tpl.phpIn Drupal7 we no longer need node.tpl.php in ourtheme in order to theme content types modules/node/node.tpl.php sites/all/themes/ourtheme/node--event.tpl.php
  19. 19. Did somebody mentionwildcards?
  20. 20. Wildcard SuggestionsDrupal7 can now use wildcard suggestions in templatenamesDrupal6, needed to know the specific IDPage-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 theinteger for all Page-user-42.tpl.php, Page-user-32.tpl.phpDrupal7, you can specify a wildcardSo you can theme all user pages but not the loginpage--user--%.tpl.php
  21. 21. Over 50 theme changes inDrupal7$content now appears in block admin UIBlocks have more meaningful CSS classes .block-blog-recent$classes variable can be added to your preprocess hooksAdditions to drupal_add_css()Classes and Attributes are now standard and predefinedAll titles now have $prefix and $suffix added
  22. 22. Drupal7 Accessibility Changes
  23. 23. Accessibility ChangesRDFa can now be included, make sure you add;<head profile=”<?php print $grddl_profile; ?>Adding “Skip to Navigation” to core themesRemoval of duplicate and null tagsCreation of the D7AX hash tag for accessibility for moduleand theme maintainersSome modules/themes now include WAI-ARIA
  24. 24. So many Templates?
  25. 25. html.tpl.phpWebpage output is now constructed byhtml.tpl.php and not page.tpl.phpPage.tpl.php has been split aparthtml.tpl.php now contains thecontent between <head> </head> andconstructs the templatehtml.tpl.php calls page.tplAllows for more granular control
  26. 26. html.tpl.php
  27. 27. page.tpl.phpNo longer contains the header information thats inhtml.tpl.phpNo longer constructs the template thats html.tpl.phpjobIs now called from html.tpl.phpNow only contains the contents between the wrapperDIV ie the header, sidebars, page content
  28. 28. page.tpl.php
  29. 29. node.tpl.phpAs with Drupal6 in Drupal7 node prints out the maincontent areaNo longer need to have node.tpl.php in your themewhen creating custom node.tplsCan theme specific nodesnode--nodeid.tpl.phpnode--type.tpl.phpnode.tpl.php
  30. 30. node.tpl.php
  31. 31. region.tpl.phpNew to Drupal 7 allows ease of changing regionstylingCan theme all regions or themes a specificregionAllows you to wrap more HTML and CSS codearound the region area
  32. 32. region.tpl.phpAllows more control of Drupal out-putregion.tpl.php will allow you to style all regions thesameTo style the menu differently you can specify region--menu.tpl.phpCan theme all regions region.tpl.phpCan theme a specific region region—search.tpl.php
  33. 33. region.tpl.php
  34. 34. field.tpl.phpNew to Drupal 7Fields can be themed with field.tpl.phpCan theme individual fields or groups of field typesWill theme all the fields that are of that typeMust flush cache when adding and removing templates
  35. 35. field.tpl.phpFor 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
  36. 36. field.tpl.php
  37. 37. Putting it all together
  38. 38. But Drupal likes to add its own HTML?
  39. 39. The Inheritance ProcessDrupal inheritance works as a system of overridesHas a specific cascading order (some exceptions noted)Powerful, because it enables you to override the things youdont likeAll changes live within your theme, leaving the systemdefaults aloneSo we OVERRIDE and dont HACK
  40. 40. Drupal Overrides Modules Core A Default Theme Engine B Override Theme C Override
  41. 41. Theme Registry can also bemanipulated
  42. 42. Template Inheritance1. 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!
  43. 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. 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. 45. Inheritance within your ownthemeTemplates within your own Theme can also be overwrittenby other templates in your theme this allows you to bespecific with your template targetDrupal.org describes it as “Template suggestions are madebased on these factors  Listed from the most specific template to the least.  Drupal will use the most specific template it finds.”
  46. 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. 47. Drupal module themingThere are 42 different .tpl files in Drupal7 core modules folder. /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 copied intoyour theme folder and it will overwrite the .tpl in the modulesfolder /sites/all/modules/example/*.tpl.php
  48. 48. So to theme a module?1.Take a copy of the .tpl.php file we need from the module1.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
  49. 49. But what about functions?
  50. 50. Theme functions are alsoInherited1.Modules provide their own theme functions2.Find the theme function in .module3.Copy the function into your template.php file4.Change the function name from theme_pager to your-theme_pager5.Flush cache6.Your theme has the final say!
  51. 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 firstYour template.php in sites/all/themes/your_theme If it finds the function theme_pager() there it applies it and stops looking
  52. 52. Setting Template Variables1. Locate the preprocess function you want to change the variable for2.Copy the preprocess function into your template.php file3. Change the function name to match your theme name4.Your template.php has the final say!
  53. 53. Preprocess Inheritance Your theme WinsYour 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 variablefunction garland_preprocess(&$vars, $hook) { if … }
  54. 54. What about sub-themes?
  55. 55. Pre-process functions arestackedDo not get overwritten but stack on top of each otherWhat does this mean?If we declare in our sub theme the same preprocessfunctions as our base theme it will get added to thebase theme and not overwrite it
  56. 56. Template.php is stackedThe sub-theme and base theme template.php file will bestackedbase theme is included first and then our sub-theme isincludedThis means we inherit from our base theme and append toour sub theme for template.php
  57. 57. Sub-themes inherit from baseTemplate files can be overwritten by adding that .tpl.phpinside our subthemeTheme function overwrites work in the same way we canrecreate a base thee function in our template.php and thiswill overwrite the base theme settingsWe can overwrite CSS / JavaScript files by incuding them inour subtheme .info file
  58. 58. What is not inherited in sub-themes?Theme settings are not inheritedSo if we want our sub theme to have thesewe need to;1. copy the theme-settings.php from thebase theme folder2. place into our sub-theme folder3. make any modifications we need to oursub-theme file
  59. 59. So many CSS files
  60. 60. Drupal core CSS1. 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!
  61. 61. Drupal CSS inheritanceIf 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 cssIf 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. 62. Inheritance Dont and Do’sDo save your theme folder/files into /sites/all/themes [correct]Dont edit or save files in /themes [not correct]Dont over write core themes files that live in the base folder of Drupal, this is calledhacking coreDont take a copy of a core theme to create another themeDo use a contributed theme or create sub theme from a base themeYou 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 intoyour theme folder and enter stylesheets[all][] = modulestyle.css into your themes info file Do flush cache
  63. 63. Oh did I mention Clear Cache?
  64. 64. Recommended ThemesBoron re-writes Drupal core templates into HTML5 with WAI-ARIA roles and WCAG 2.0 complianceMothership removes core CSS and HTML markup to provide acleaner baseStark shows the core CSS and HTML mark-up provided byDrupalOmega and Adaptive WCAG 1.0 compliance some WAI-ARIAsupport allow for responsive theming
  65. 65. Its a lot to take in@aimee_mareeAimee Maree Forsstromwww.aimeemaree.comDrupal Solution Architect

×