Drupal7 themeing changes and inheritence
Upcoming SlideShare
Loading in...5

Drupal7 themeing changes and inheritence



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

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



Total Views
Views on SlideShare
Embed Views



3 Embeds 12

http://aimeemaree.info 6
https://twitter.com 4
https://si0.twimg.com 2



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Drupal7 themeing changes and inheritence Drupal7 themeing changes and inheritence Presentation Transcript

  • Drupal 7 ThemingChanges in Drupal7 and Theme Inheritance
  • 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
  • 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
  • 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 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]); ?>.
  • 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()
  • box.tpl.php is now extinct
  • 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
  • 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
  • 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
  • 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
  • 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">
  • More power to be an individual
  • 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
  • Preprocess functionsIn Drupal7 they apply to both templates andfunctionsPreprocess functions are called before processfunctionsThe preprocessor enables variables to be placedwithin .tpl.php files
  • 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
  • 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
  • Did somebody mentionwildcards?
  • 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
  • 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
  • Drupal7 Accessibility Changes
  • 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
  • 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.php now contains thecontent between <head> </head> andconstructs the templatehtml.tpl.php calls page.tplAllows for more granular control
  • html.tpl.php
  • 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
  • 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 themewhen creating custom node.tplsCan theme specific nodesnode--nodeid.tpl.phpnode--type.tpl.phpnode.tpl.php
  • node.tpl.php
  • 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
  • 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
  • region.tpl.php
  • 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
  • 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
  • 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 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
  • Drupal Overrides Modules Core A Default Theme Engine B Override Theme C Override
  • Theme Registry can also bemanipulated
  • 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!
  • 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
  • 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
  • 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.”
  • 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
  • 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
  • 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
  • But what about functions?
  • 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!
  • 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
  • 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!
  • 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 … }
  • 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 our sub theme the same preprocessfunctions as our base theme it will get added to thebase theme and not overwrite it
  • 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
  • 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
  • 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
  • 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 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!
  • 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
  • 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
  • Oh did I mention Clear Cache?
  • 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
  • Its a lot to take in@aimee_mareeAimee Maree Forsstromwww.aimeemaree.comDrupal Solution Architect