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

Introduction to Drupal (7) Theming

on

  • 7,183 views

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

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

Statistics

Views

Total Views
7,183
Views on SlideShare
7,151
Embed Views
32

Actions

Likes
6
Downloads
203
Comments
1

3 Embeds 32

http://noobsauce.creatiz.fr 28
http://paper.li 2
http://semel 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

Introduction to Drupal (7) Theming Introduction to Drupal (7) Theming Presentation Transcript

  • Theming in Drupal
    An introduction to theming
    with a little Drupal 7 twist
    Drupal Camp Edinburgh May 2011
    Rob Carr @robertgcarr
  • What’s covered…
    Prereqs.
    Theming concepts.
    Theme components.
    Hardcore.
    Tools.
    + Prize book draw!
  • Pre-requisites for Theming Adventures
    HTML.
    CSS.
    Basics of Drupal.
    Some idea of PHP.
  • ‘Some idea of PHP:’
    • Print variables
    • Logic (if… then)
    • Call functions
    For the braver: Arrays and Objects knowledge useful
  • Theming Options
    Core theme
    Off the Shelf:
    • Contributed (d.o)
    • Purchase
    Scratch (hardcore!)
    Sub-theme
    Garland
    Bartik
    Seven
    Stark
    Never hack a theme
  • 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
  • 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
  • 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
  • CSS
    Cascading Style Sheets – inherit or override
  • 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
  • Templating
  • 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
  • html.tpl.php
    Theme: Sky (HTML5 theme)
  • html.tpl.php – Generated
  • Template variables
    $page – rendered page content – page.tpl.php
  • page.tpl.php
  • 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
  • page.tpl.php regions
    <?phpprintrender($page[region_name]); ?>
    The array $page contains all region content for that particular page
  • node.tpl.php
    Renders the content of a node and all its components:
    • Title
    • Main body
    • Author
    • Links (taxonomy etc)
    • Comments
  • Different Content (node) types
    Node type:
    • Article
    • Blog
    • Event
    • Project
    Template:
    • node--article.tpl.php
    • node--blog.tpl.php
    • node--event.tpl.php
    • node--project.tpl.php
    It’s a double
    --
    Don’t have to define node.tpl.php to have nodetype-specific templates
  • 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
  • Templates… and finally
    You can also create tpl.php files for Views.
    Edit View > Advanced > > Information
  • Templates… and finally
    You can also create tpl.php files for Views too.
    Edit View > Advanced > > Information
  • 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
  • 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.
  • Example - Breadcrumb
  • How Drupal Outputs Breadcrumb
    Drupal looks for:
    yourtheme_breadcrumb().
    sites/all/themes/yourtheme/breadcrumb.tpl.php
    theme_breadcrumb().
    Generates (example):
    Home » contact us
  • Overidetheme_breadcrumb()
    Becomes:
    Home -> contact us
    Example:
    Home » contact us
  • A home for our theme function:
    Any custom theme functions live in:
    And so much more…
    sites/all/themes/yourtheme/template.php
  • 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>
  • Add variable example
    Insert into template.php:
    Add to node.tpl.php:
    Clear the cache…
  • Add variable example
    Insert into template.php:
    Add to node.tpl.php:
    Clear the cache…
    Clear caches
  • Congrats!
    You’ve now built a theme!
    But what next: how can I keep tweaking?
  • Tools
    Firebug (Plugin for FF, Firebug-Lite for others)
    IE Developer
  • Drupal Functions
    Drupal API:
    http://api.drupal.org/
    Contrib Modules API: http://drupalcontrib.org/api/drupal
  • 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
  • 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
  • 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
  • Top Tip:
    Never eat
    yellow snow
  • Top Tip:
    Clear the caches
    Never eat
    yellow snow
    /admin/config/development/performance/
    (‘Clear all caches’)
    Or
    drushcc all
  • Drupal 6
    http://drupal.org/update/themes/6/7
  • Packt – Drupal 7 Themes
    Finished (not RAW) edition due mid-June.
    3 copies up for grabs – names + contact details in a hat
  • FIN