Introduction to Drupal (7) Theming
•
9 likes•8,219 views
Introduction to Drupal Theming. Given at DrupalCamp Edinburgh (UK) 21 May 2011
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Introduction to Drupal (7) Theming
Similar to Introduction to Drupal (7) Theming (20)
More from Robert Carr
Recently uploaded
Recently uploaded (20)
Introduction to Drupal (7) Theming
- 1. Theming in Drupal An introduction to theming ! with a little Drupal 7 twist! ! Drupal Camp Edinburgh May 2011! Rob Carr @robertgcarr!
- 2. What’s covered… Prereqs.! Theming concepts.! Theme components.! Hardcore.! Tools.!
- 3. Pre-requisites for Theming Adventures HTML.! CSS.! Basics of Drupal.! Some idea of PHP.!
- 4. ‘Some idea of PHP:’ • Print variables! • Logic (if… then)! • Call functions! For the braver: Arrays and Objects knowledge useful
- 5. Theming Options Core theme! Garland! Off the Shelf:! ! • Contributed (d.o)! Bartik! • Purchase! ! Scratch (hardcore!)! Seven! Sub-theme! ! ! Stark! Never hack a theme
- 6. Sub Theme? Select [base] theme.! Override elements Base theme! you don’t like.! Add custom PHP snippets, HTML, CSS or JS.! Sub theme! (your custom code)" Never hack a theme
- 7. What is a Theme? A folder full of code:! • Manifest (.info)" • Templates (.tpl.php)" • Styles (.css)" • Logic (template.php)" • JavaScript (.js)" " Custom themes live in: /sites/all/themes/ themename
- 8. Manifest: yourtheme.info ; DESCRIPTION Theme description.! name = yourtheme descrip=on = A flexible, simple custom theme based on Bar=k. ; REQUIREMENTS Requirements.! core = 7.x base theme = bar=k ; STYLESHEETS Stylesheets.! stylesheets[all][] = layout.css stylesheets[all][] = style.css stylesheets[print][] = print.css Regions.! ; REGIONS regions[header] = Header regions[help] = Help Scripts.! regions[page_top] = Page top regions[page_boSom] = Page boSom regions[highlighted] = Highlighted regions[naviga=on] = Naviga=on (Features).! regions[content] = Content regions[sidebar_first] = Sidebar first regions[sidebar_second] = Sidebar second regions[footer] = Footer (Settings).! ; SCRIPTS scripts[] = scripts.js
- 9. CSS Cascading Style Sheets – inherit or override!
- 10. Regions ; REGIONS regions[header] = Header regions[help] = Help regions[page_top] = Page top regions[page_boSom] = Page boSom regions[highlighted] = Highlighted regions[naviga=on] = Naviga=on regions[content] = Content regions[sidebar_first] = Sidebar first regions[sidebar_second] = Sidebar second regions[footer] = Footer
- 11. Templating
- 12. Templates html.tpl.php – master region.tpl.php" template; includes <HEAD> content.! field.tpl.php" ! block.tpl.php" page.tpl.php – layout of all <BODY> content.! ! block.tpl.php" node.tpl.php" node.tpl.php – region.tpl.php" individual nodes (pieces region.tpl.php" of content).! page.tpl.php" html.tpl.php"
- 13. html.tpl.php Theme: Sky (HTML5 theme)
- 15. Template variables $page – rendered page content – page.tpl.php
- 16. page.tpl.php
- 17. page.tpl.php variables <?php if ($site_slogan): ?> <h2 class="site-‐slogan"><?php print $site_slogan; ?></h2> <?php endif; ?> http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7"
- 18. page.tpl.php regions <?php print render($page[region_name]); ?> The array $page contains all region content for that particular page"
- 19. node.tpl.php Renders the content of a node and all its components:! • Title! • Main body! • Author! • Links (taxonomy etc)! • Comments!
- 20. Different Content (node) types Node type:! Template:" • Article! • node--article.tpl.php" • Blog! • node--blog.tpl.php" • Event! • node--event.tpl.php" • Project! • node--project.tpl.php" Don’t have to define node.tpl.php to have It’s a -- double nodetype-specific templates
- 21. Sub Theming - Templates You don’t have to Base theme Your theme define every single html.tpl.php" template if it doesn’t need page.tpl.php" page.tpl.php" changing.! node.tpl.php" node.tpl.php"
- 22. Templates… and finally You can also create tpl.php files for Views. ! ! Edit View > Advanced > > Information!
- 23. Templates… and finally You can also create tpl.php files for Views too. ! ! Edit View > Advanced > > Information!
- 24. Logic Q. Where does the HTML contents of We can override the variables come this HTML output from?! by altering any ! themable function A. theme()! and even add our own variables"
- 25. theme() 1. Menu system receives page request.! 2. Node data built and template applied.! 3. Node HTML generated.! 4. Preprocessing to generate HTML for blocks in each region.! 5. Page template applied.!
- 27. How Drupal Outputs Breadcrumb Drupal looks for:! 1. yourtheme_breadcrumb().! 2. sites/all/themes/yourtheme/breadcrumb.tpl.php! 3. theme_breadcrumb().! Generates (example):" " Home » contact us"
- 28. Overide theme_breadcrumb() Example:" Becomes:" " " Home » contact us" Home contact us"
- 29. A home for our theme function: Any custom theme functions live in:! ! ! sites/all/themes/yourtheme/template.php ! And so much more…!
- 30. template.php Contains function overrides and can add/ replace template variables for our theme.! ! <theme name>_preprocess_<template name> ! Examples:! yourtheme_preprocess_page(&$vars)" yourtheme_preprocess_html(&$vars)"
- 31. Add variable example Insert into template.php:! ! ! ! Add to node.tpl.php:! ! ! Clear the cache…!
- 32. Add variable example Insert into template.php:! ! ! ! Add to node.tpl.php:! ! Clear caches" ! Clear the cache…!
- 33. Congrats! You’ve now built a theme!! ! But what next: how can I keep tweaking?!
- 34. Tools Firebug (Plugin for FF, Firebug-Lite for others)! IE Developer!
- 35. Drupal Functions Drupal API: ! http://api.drupal.org/! ! Contrib Modules API: http://drupalcontrib.org/api/drupal! !
- 37. The Killer App! Theme Developer Module http://drupal.org/project/devel_themer! ! See also Drupal for Firebug (a bit hardcore)! http://drupal.org/project/drupalforfirebug! !
- 38. The Killer App! Theme Developer Module http://drupal.org/project/devel_themer! ! See also Drupal for Firebug (a bit hardcore)! http://drupal.org/project/drupalforfirebug! !
- 39. Top Tip: Never eat yellow snow
- 40. Top Tip: Clear the caches! Never eat yellow snow /admin/config/development/performance/ (‘Clear all caches’) Or drush cc all "
- 41. Drupal 6 Well I mastered theming in Drupal 6, but what changed when Drupal 7 was released?! ! Too much to talk about here, but a great list is at:! http://drupal.org/update/themes/6/7!
- 42. Packt – Drupal 7 Themes Only hard copy book available at time of presentation - published June 2011! !
- 43. Again! We covered the basics:! • Theme components ! • Templates! • Overriding theme()! • Tools! • Reference!
- 44. FIN
Editor's Notes
- Variables:$css: An array of CSS files for the current page.$language: (object) The language the site is being displayed in. $language->language contains its textual representation. $language->dir contains the language direction. It will either be 'ltr' or 'rtl'.$rdf_namespaces: All the RDF namespace prefixes used in the HTML document.$grddl_profile: A GRDDL profile allowing agents to extract the RDF data.$head_title: A modified version of the page title, for use in the TITLE tag.$head_title_array: (array) An associative array containing the string parts that were used to generate the $head_title variable, already prepared to be output as TITLE tag. The key/value pairs may contain one or more of the following, depending on conditions:title: The title of the current page, if any.name: The name of the site.slogan: The slogan of the site, if any, and if there is no title.$head: Markup for the HEAD section (including meta tags, keyword tags, and so on).$styles: Style tags necessary to import all CSS files for the page.$scripts: Script tags necessary to load the JavaScript files and settings for the page.$page_top: Initial markup from any modules that have altered the page. This variable should always be output first, before all other dynamic content.$page: The rendered page content.$page_bottom: Final closing markup from any modules that have altered the page. This variable should always be output last, after all other dynamic content.$classes String of classes that can be used to style contextually through CSS.
- General utility variables:$base_path: The base URL path of the Drupal installation. At the very least, this will always default to /.$directory: The directory the template is located in, e.g. modules/system or themes/bartik.$is_front: TRUE if the current page is the front page.$logged_in: TRUE if the user is registered and signed in.$is_admin: TRUE if the user has permission to access administration pages.Site identity:$front_page: The URL of the front page. Use this instead of $base_path, when linking to the front page. This includes the language domain or prefix.$logo: The path to the logo image, as defined in theme configuration.$site_name: The name of the site, empty when display has been disabled in theme settings.$site_slogan: The slogan of the site, empty when display has been disabled in theme settings.Navigation:$main_menu (array): An array containing the Main menu links for the site, if they have been configured.$secondary_menu (array): An array containing the Secondary menu links for the site, if they have been configured.$breadcrumb: The breadcrumb trail for the current page.Page content (in order of occurrence in the default page.tpl.php):$title_prefix (array): An array containing additional output populated by modules, intended to be displayed in front of the main title tag that appears in the template.$title: The page title, for use in the actual HTML content.$title_suffix (array): An array containing additional output populated by modules, intended to be displayed after the main title tag that appears in the template.$messages: HTML for status and error messages. Should be displayed prominently.$tabs (array): Tabs linking to any sub-pages beneath the current page (e.g., the view and edit tabs when displaying a node).$action_links (array): Actions local to the page, such as 'Add menu' on the menu administration interface.$feed_icons: A string of all feed icons for the current page.$node: The node object, if there is an automatically-loaded node associated with the page, and the node ID is the second argument in the page's path (e.g. node/12345 and node/12345/revisions, but not comment/reply/12345).Regions:$page['help']: Dynamic help text, mostly for admin pages.$page['highlighted']: Items for the highlighted content region.$page['content']: The main content of the current page.$page['sidebar_first']: Items for the first sidebar.$page['sidebar_second']: Items for the second sidebar.$page['header']: Items for the header region.$page['footer']: Items for the footer region.