Theming in Drupal<br />An introduction to theming <br />with a little Drupal 7 twist<br />Drupal Camp Edinburgh May 2011<b...
What’s covered…<br />Prereqs.<br />Theming concepts.<br />Theme components.<br />Hardcore.<br />Tools.<br />+ Prize book d...
Pre-requisites for Theming Adventures<br />HTML.<br />CSS.<br />Basics of Drupal.<br />Some idea of PHP.<br />
‘Some idea of PHP:’<br /><ul><li>Print variables
Logic (if… then)
Call functions</li></ul>For the braver: Arrays and Objects knowledge useful<br />
Theming Options<br />Core theme<br />Off the Shelf:<br /><ul><li>Contributed (d.o)
Purchase</li></ul>Scratch (hardcore!)<br />Sub-theme<br />Garland<br />Bartik<br />Seven<br />Stark<br />Never hack  a the...
Sub Theme?<br />Select [base] theme.<br />Override elements you don’t like.<br />Add custom PHP snippets, HTML, CSS or JS....
What is a Theme?<br />A folder full of code:<br /><ul><li>Manifest (.info)
Templates (.tpl.php)
Styles (.css)
Logic (template.php)
JavaScript (.js)</li></ul>Custom themes live in:<br />/sites/all/themes/themename<br />
Manifest: yourtheme.info<br />Theme description.<br />Requirements.<br />Stylesheets.<br />Regions.<br />Scripts.<br />(Fe...
CSS<br />Cascading Style Sheets – inherit or override<br />
Regions<br />; REGIONS<br />regions[header] = Header<br />regions[help] = Help<br />regions[page_top] = Page top<br />regi...
Templating<br />
Templates<br />html.tpl.php – master template; includes <HEAD> content.<br />page.tpl.php – layout of all <BODY> content.<...
html.tpl.php<br />Theme: Sky (HTML5 theme)<br />
html.tpl.php – Generated<br />
Template variables<br />$page – rendered page content – page.tpl.php<br />
page.tpl.php<br />
page.tpl.php variables<br /><?phpif ($site_slogan): ?><br /><h2 class="site-slogan"><?phpprint $site_slogan; ?></h2><br />...
page.tpl.php regions<br /><?phpprintrender($page[region_name]); ?><br />The array $page contains all region content for th...
node.tpl.php<br />Renders the content of a node and all its components:<br /><ul><li>Title
Main body
Author
Links (taxonomy etc)
Comments</li></li></ul><li>Different Content (node) types<br />Node type:<br /><ul><li>Article
Blog
Event
Project</li></ul>Template:<br /><ul><li>node--article.tpl.php
node--blog.tpl.php
node--event.tpl.php
node--project.tpl.php</li></ul>It’s a double<br />--<br />Don’t have to define node.tpl.php to have nodetype-specific temp...
Sub Theming - Templates<br />You don’t have to define every single template if it doesn’t need changing.<br />Base theme  ...
Templates… and finally<br />You can also create tpl.php files for Views. <br />Edit View > Advanced > > Information<br />
Templates… and finally<br />You can also create tpl.php files for Views too. <br />Edit View > Advanced > > Information<br />
Logic<br />Q. Where does the HTML contents of the variables come from?<br />A. theme()<br />We can override this HTML outp...
theme()<br />Menu system receives page request.<br />Node data built and template applied.<br />Node HTML generated.<br />...
Example - Breadcrumb<br />
How Drupal Outputs Breadcrumb<br />Drupal looks for:<br />yourtheme_breadcrumb().<br />sites/all/themes/yourtheme/breadcru...
Overidetheme_breadcrumb()<br />Becomes:<br />Home -> contact us<br />Example:<br />Home » contact us<br />
Upcoming SlideShare
Loading in...5
×

Introduction to Drupal (7) Theming

7,991

Published on

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

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,991
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
266
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide
  • Variables:$css: An array of CSS files for the current page.$language: (object) The language the site is being displayed in. $language-&gt;language contains its textual representation. $language-&gt;dir contains the language direction. It will either be &apos;ltr&apos; or &apos;rtl&apos;.$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 &apos;Add menu&apos; 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&apos;s path (e.g. node/12345 and node/12345/revisions, but not comment/reply/12345).Regions:$page[&apos;help&apos;]: Dynamic help text, mostly for admin pages.$page[&apos;highlighted&apos;]: Items for the highlighted content region.$page[&apos;content&apos;]: The main content of the current page.$page[&apos;sidebar_first&apos;]: Items for the first sidebar.$page[&apos;sidebar_second&apos;]: Items for the second sidebar.$page[&apos;header&apos;]: Items for the header region.$page[&apos;footer&apos;]: Items for the footer region.
  • 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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×