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.

Introduction to Drupal (7) Theming

9,954 views

Published on

Introduction to Drupal Theming. Given at DrupalCamp Edinburgh (UK) 21 May 2011

Published in: Technology
  • Login to see the comments

Introduction to Drupal (7) Theming

  1. 1. Theming in Drupal<br />An introduction to theming <br />with a little Drupal 7 twist<br />Drupal Camp Edinburgh May 2011<br />Rob Carr @robertgcarr<br />
  2. 2. What’s covered…<br />Prereqs.<br />Theming concepts.<br />Theme components.<br />Hardcore.<br />Tools.<br />+ Prize book draw!<br />
  3. 3. Pre-requisites for Theming Adventures<br />HTML.<br />CSS.<br />Basics of Drupal.<br />Some idea of PHP.<br />
  4. 4. ‘Some idea of PHP:’<br /><ul><li>Print variables
  5. 5. Logic (if… then)
  6. 6. Call functions</li></ul>For the braver: Arrays and Objects knowledge useful<br />
  7. 7. Theming Options<br />Core theme<br />Off the Shelf:<br /><ul><li>Contributed (d.o)
  8. 8. Purchase</li></ul>Scratch (hardcore!)<br />Sub-theme<br />Garland<br />Bartik<br />Seven<br />Stark<br />Never hack a theme<br />
  9. 9. Sub Theme?<br />Select [base] theme.<br />Override elements you don’t like.<br />Add custom PHP snippets, HTML, CSS or JS.<br />Base theme<br />Sub theme<br />(your custom code)<br />Never hack a theme<br />
  10. 10. What is a Theme?<br />A folder full of code:<br /><ul><li>Manifest (.info)
  11. 11. Templates (.tpl.php)
  12. 12. Styles (.css)
  13. 13. Logic (template.php)
  14. 14. JavaScript (.js)</li></ul>Custom themes live in:<br />/sites/all/themes/themename<br />
  15. 15. Manifest: yourtheme.info<br />Theme description.<br />Requirements.<br />Stylesheets.<br />Regions.<br />Scripts.<br />(Features).<br />(Settings).<br />; DESCRIPTION<br />name = yourtheme<br />description = A flexible, simple custom theme based on Bartik.<br />; REQUIREMENTS<br />core = 7.x<br />base theme = bartik<br />; STYLESHEETS<br />stylesheets[all][] = layout.css<br />stylesheets[all][] = style.css<br />stylesheets[print][] = print.css<br />; REGIONS<br />regions[header] = Header<br />regions[help] = Help<br />regions[page_top] = Page top<br />regions[page_bottom] = Page bottom<br />regions[highlighted] = Highlighted<br />regions[navigation] = Navigation<br />regions[content] = Content<br />regions[sidebar_first] = Sidebar first<br />regions[sidebar_second] = Sidebar second<br />regions[footer] = Footer<br />; SCRIPTS<br />scripts[] = scripts.js<br />
  16. 16. CSS<br />Cascading Style Sheets – inherit or override<br />
  17. 17. Regions<br />; REGIONS<br />regions[header] = Header<br />regions[help] = Help<br />regions[page_top] = Page top<br />regions[page_bottom] = Page bottom<br />regions[highlighted] = Highlighted<br />regions[navigation] = Navigation<br />regions[content] = Content<br />regions[sidebar_first] = Sidebar first<br />regions[sidebar_second] = Sidebar second<br />regions[footer] = Footer<br />
  18. 18. Templating<br />
  19. 19. Templates<br />html.tpl.php – master template; includes <HEAD> content.<br />page.tpl.php – layout of all <BODY> content.<br />node.tpl.php – individual nodes (pieces of content).<br />html.tpl.php<br />page.tpl.php<br />region.tpl.php<br />node.tpl.php<br />region.tpl.php<br />block.tpl.php<br />field.tpl.php<br />block.tpl.php<br />region.tpl.php<br />
  20. 20. html.tpl.php<br />Theme: Sky (HTML5 theme)<br />
  21. 21. html.tpl.php – Generated<br />
  22. 22. Template variables<br />$page – rendered page content – page.tpl.php<br />
  23. 23. page.tpl.php<br />
  24. 24. page.tpl.php variables<br /><?phpif ($site_slogan): ?><br /><h2 class="site-slogan"><?phpprint $site_slogan; ?></h2><br /><?phpendif; ?><br />http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7<br />
  25. 25. page.tpl.php regions<br /><?phpprintrender($page[region_name]); ?><br />The array $page contains all region content for that particular page<br />
  26. 26. node.tpl.php<br />Renders the content of a node and all its components:<br /><ul><li>Title
  27. 27. Main body
  28. 28. Author
  29. 29. Links (taxonomy etc)
  30. 30. Comments</li></li></ul><li>Different Content (node) types<br />Node type:<br /><ul><li>Article
  31. 31. Blog
  32. 32. Event
  33. 33. Project</li></ul>Template:<br /><ul><li>node--article.tpl.php
  34. 34. node--blog.tpl.php
  35. 35. node--event.tpl.php
  36. 36. node--project.tpl.php</li></ul>It’s a double<br />--<br />Don’t have to define node.tpl.php to have nodetype-specific templates<br />
  37. 37. Sub Theming - Templates<br />You don’t have to define every single template if it doesn’t need changing.<br />Base theme Your theme<br />html.tpl.php<br />page.tpl.php<br />page.tpl.php<br />node.tpl.php<br />node.tpl.php<br />
  38. 38. Templates… and finally<br />You can also create tpl.php files for Views. <br />Edit View > Advanced > > Information<br />
  39. 39. Templates… and finally<br />You can also create tpl.php files for Views too. <br />Edit View > Advanced > > Information<br />
  40. 40. Logic<br />Q. Where does the HTML contents of the variables come from?<br />A. theme()<br />We can override this HTML output by altering any themable function and even add our own variables<br />
  41. 41. theme()<br />Menu system receives page request.<br />Node data built and template applied.<br />Node HTML generated.<br />Preprocessing to generate HTML for blocks in each region.<br />Page template applied.<br />
  42. 42. Example - Breadcrumb<br />
  43. 43. How Drupal Outputs Breadcrumb<br />Drupal looks for:<br />yourtheme_breadcrumb().<br />sites/all/themes/yourtheme/breadcrumb.tpl.php<br />theme_breadcrumb().<br />Generates (example):<br />Home » contact us<br />
  44. 44. Overidetheme_breadcrumb()<br />Becomes:<br />Home -> contact us<br />Example:<br />Home » contact us<br />
  45. 45. A home for our theme function:<br />Any custom theme functions live in:<br />And so much more…<br />sites/all/themes/yourtheme/template.php<br />
  46. 46. template.php<br />Contains function overrides and can add/replace template variables for our theme.<br />Examples:<br />yourtheme_preprocess_page(&$vars)<br />yourtheme_preprocess_html(&$vars)<br /><theme name>_preprocess_<template name><br />
  47. 47. Add variable example<br />Insert into template.php:<br />Add to node.tpl.php:<br />Clear the cache…<br />
  48. 48. Add variable example<br />Insert into template.php:<br />Add to node.tpl.php:<br />Clear the cache…<br />Clear caches<br />
  49. 49. Congrats!<br />You’ve now built a theme!<br />But what next: how can I keep tweaking?<br />
  50. 50. Tools<br />Firebug (Plugin for FF, Firebug-Lite for others)<br />IE Developer<br />
  51. 51. Drupal Functions<br />Drupal API: <br />http://api.drupal.org/<br />Contrib Modules API: http://drupalcontrib.org/api/drupal<br />
  52. 52. Template Variables<br />HTML: http://api.drupal.org/api/drupal/modules--system--html.tpl.php/7<br />Page: http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7<br />Node: http://api.drupal.org/api/drupal/modules--node--node.tpl.php/7<br />
  53. 53. The Killer App!<br />Theme Developer Module http://drupal.org/project/devel_themer<br />See also Drupal for Firebug (a bit hardcore)<br />http://drupal.org/project/drupalforfirebug<br />
  54. 54. The Killer App!<br />Theme Developer Module http://drupal.org/project/devel_themer<br />See also Drupal for Firebug (a bit hardcore)<br />http://drupal.org/project/drupalforfirebug<br />
  55. 55. Top Tip:<br />Never eat <br />yellow snow<br />
  56. 56. Top Tip:<br />Clear the caches<br />Never eat <br />yellow snow<br />/admin/config/development/performance/<br />(‘Clear all caches’)<br />Or<br />drushcc all<br />
  57. 57. Drupal 6<br />http://drupal.org/update/themes/6/7<br />
  58. 58. Packt – Drupal 7 Themes<br />Finished (not RAW) edition due mid-June. <br />3 copies up for grabs – names + contact details in a hat<br />
  59. 59. FIN<br />

×