Download as PDF, PPTX
![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](https://image.slidesharecdn.com/dcedi-2011-theming-110520163806-phpapp02/85/Introduction-to-Drupal-7-Theming-6-320.jpg)
![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](https://image.slidesharecdn.com/dcedi-2011-theming-110520163806-phpapp02/85/Introduction-to-Drupal-7-Theming-8-320.jpg)
![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](https://image.slidesharecdn.com/dcedi-2011-theming-110520163806-phpapp02/85/Introduction-to-Drupal-7-Theming-10-320.jpg)
![page.tpl.php regions
<?php
print
render($page[region_name]);
?>
The array $page contains all region content for that particular page"](https://image.slidesharecdn.com/dcedi-2011-theming-110520163806-phpapp02/85/Introduction-to-Drupal-7-Theming-18-320.jpg)
![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](https://image.slidesharecdn.com/dcedi-2011-theming-110520163806-phpapp02/75/Introduction-to-Drupal-7-Theming-6-2048.jpg)
![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](https://image.slidesharecdn.com/dcedi-2011-theming-110520163806-phpapp02/75/Introduction-to-Drupal-7-Theming-8-2048.jpg)
![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](https://image.slidesharecdn.com/dcedi-2011-theming-110520163806-phpapp02/75/Introduction-to-Drupal-7-Theming-10-2048.jpg)
![page.tpl.php regions
<?php
print
render($page[region_name]);
?>
The array $page contains all region content for that particular page"](https://image.slidesharecdn.com/dcedi-2011-theming-110520163806-phpapp02/75/Introduction-to-Drupal-7-Theming-18-2048.jpg)
Uploaded byRobert Carr
Introduction to Drupal (7) Theming
The document provides an introduction to theming in Drupal 7. It covers prerequisites for theming including HTML, CSS, and basics of Drupal and PHP. It then discusses theming concepts such as theme components, templates, overriding functions, and tools for theming. The document provides examples of how to create templates, add variables, and override functions to customize a Drupal theme.
More Related Content
Similar to Introduction to Drupal (7) Theming
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.! Themecomponents.! Hardcore.! Tools.!
- 3. Pre-requisites for ThemingAdventures HTML.! CSS.! Basics of Drupal.! Some idea of PHP.!
- 4. ‘Some idea ofPHP:’ • 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 aTheme? 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.
- 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)
- 14.
- 15. Template variables $page – rendered page content – page.tpl.php
- 16.
- 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 contentof 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 Youcan also create tpl.php files for Views. ! ! Edit View > Advanced > > Information!
- 23. Templates… and finally Youcan also create tpl.php files for Views too. ! ! Edit View > Advanced > > Information!
- 24. Logic Q. Where doesthe 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 systemreceives 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.!
- 26.
- 27. How Drupal OutputsBreadcrumb 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 forour theme function: Any custom theme functions live in:! ! ! sites/all/themes/yourtheme/template.php ! And so much more…!
- 30. template.php Contains function overridesand 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 Insertinto template.php:! ! ! ! Add to node.tpl.php:! ! ! Clear the cache…!
- 32. Add variable example Insertinto template.php:! ! ! ! Add to node.tpl.php:! ! Clear caches" ! Clear the cache…!
- 33. Congrats! You’ve now builta theme!! ! But what next: how can I keep tweaking?!
- 34. Tools Firebug (Plugin forFF, Firebug-Lite for others)! IE Developer!
- 35. Drupal Functions Drupal API:! http://api.drupal.org/! ! Contrib Modules API: http://drupalcontrib.org/api/drupal! !
- 36.
- 37. The Killer App! ThemeDeveloper Module http://drupal.org/project/devel_themer! ! See also Drupal for Firebug (a bit hardcore)! http://drupal.org/project/drupalforfirebug! !
- 38. The Killer App! ThemeDeveloper Module http://drupal.org/project/devel_themer! ! See also Drupal for Firebug (a bit hardcore)! http://drupal.org/project/drupalforfirebug! !
- 39. Top Tip: Nevereat 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 Imastered 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 – Drupal7 Themes Only hard copy book available at time of presentation - published June 2011! !
- 43. Again! We covered thebasics:! • Theme components ! • Templates! • Overriding theme()! • Tools! • Reference!
- 44.
Editor's Notes
- #16 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.
- #18 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.