Your SlideShare is downloading. ×
Introduction to Drupal (7) Theming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to Drupal (7) Theming

7,531
views

Published on

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

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,531
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
245
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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->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.
  • Transcript

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