Your SlideShare is downloading. ×
0
Grok Drupal             Theming                  Laura Scott                       PINGV                      @lauras     ...
Laura ScottCreative Director,Drupal Architectand Co-FounderPINGV Creative                "laura s"                drupal.o...
Grok Drupal ThemingGrok means to understand so thoroughlythat the observer becomes a part of theobserved — to merge, blend...
<h1 id="title"> Grok Drupal Theming </h1>
<h1 id="title"> Grok Drupal Theming </h1>    How Drupal displays content (templates)             How to start theming     ...
Assumptions•   You know HTML/xhtml        •   You dont know PHP                                   (but if you do, we wont•...
Some PHP required• Mainly to print pre-defined variables …  e.g., $title (for the page title).• You can do a lot in the "pr...
HTML5 is coming! http://groups.drupal.org/html5
Theming for Drupal 7 is more powerful than  previous versions  ...but its also a bit more complicated.
Anatomy of a Drupal "page"    •   xhtml, CSS, bg images    •   Content presented via        templates    •   JavaScript
The Drupal theme • CSS files • Image files • Template files • JavaScript files • .info file • Preprocess and process   new!
• CSS files• Image files• Template files• JavaScript files• Preprocess and process files• .info file
Which template?                  It depends....
Which template?                  page.tpl.php                   •   logo                   •   main title                 ...
Which template?   html.tpl.php                                          new!                  page.tpl.php                ...
Which template?   html.tpl.php                  page.tpl.php                  node.tpl.php                  • node title  ...
Which template?   html.tpl.php                  page.tpl.php                  node.tpl.php                  comment-wrappe...
Which template?   html.tpl.php                  page.tpl.php                  node.tpl.php                  comment-wrappe...
Which template?         html.tpl.php                        page.tpl.php                        node.tpl.php              ...
Every modules outputalso has a template file.         (In theory.)
42 *.tpl.php files in D7s /modules folder.  Each can be copied into your theme         and used to override.
The Views UI gives you template code      to override Views output.
One theme might have dozens of template files.
There are only  a few basics.  (Its not rocket science.)
Whats inside a template?
html.tpl.php
html.tpl.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"   "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <ht...
html.tpl.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"   "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <ht...
html.tpl.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"   "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <ht...
<body class="<?php print $classes; ?>" <?php print$attributes;?>>  <div id="skip-link">    <a href="#main-content" class="...
page.tpl.php
page.tpl.php  <div id="page-wrapper"><div id="page">    <div id="header"><div class="section clearfix">      <?php if ($lo...
The Semantic Page• Logo/branding/site name• [main nav]*• <h1> Title (of article, view, blog post, etc.)• Main content• The...
<a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home"><span><?  php print $site_name; ?></span>...
<a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home"><span><?  php print $site_name; ?></span>...
node.tpl.php
node.tpl.php   <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>   clearfix"<?php print $attribute...
node.tpl.php   <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>   clearfix"<?php print $attribute...
comment-wrapper.tpl.php
comment-wrapper.tpl.php<div id="comments" class="<?php print $classes; ?>"<?phpprint $attributes; ?>>  <?php if ($content[...
comment.tpl.php
comment.tpl.php<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>  <?php print $picture ?>  <?php ...
block.tpl.php
block.tpl.php<div id="<?php print $block_html_id; ?>" class="<?phpprint $classes; ?>"<?php print $attributes; ?>>  <?php p...
block.tpl.php<div id="<?php print $block_html_id; ?>" class="<?phpprint $classes; ?>"<?php print $attributes; ?>>  <?php p...
polls
node.tpl.php        node.tpl.phppoll-vote.tpl.php   poll-results.tpl.php                    poll-bar.tpl.php
block.tpl.php       block.tpl.phppoll-vote.tpl.php   poll-results--block.tpl.php                     poll-bar--block.tpl.php
Fields are in core   Its nice to                     have a home.
field.tpl.php
field.tpl.php   <div class="<?php print $classes; ?> clearfix"<?php   print $attributes; ?>>     <?php if (!$label_hidden) ...
html.tpl.phppage.tpl.phpnode.tpl.php              block.tpl.phpcomment-wrapper.tpl.php comment.tpl.php
html.tpl.phppage.tpl.phpregion.tpl.phpregion.tpl.php            region.tpl.phpnode.tpl.php              block.tpl.phpcomme...
new!region.tpl.php
region.tpl.php          <?php if ($content): ?>            <div class="<?php print $classes; ?>">              <?php print...
So if all regions use the same template,how does Drupal know which region?
<?php print render($page[header]); ?>
<?php print render($page[header]); ?>     <?php print render($page[help]); ?>  <?php print render($page[highlight]); ?>   ...
All regions in your theme must be declared,        or else you get these defaults.
Where the heck are all these templates?
example.com/modules
Preprocessscary  doesnt have to be
Everything is an array        pretty much
So how to go about creating a theme?
Create a theme from scratch,     making everything               •   theme .info file               •   page.tpl.php       ...
or make a baby!
Sub-themesinheriteverything fromparent theme,                  except what is overridden.
Inheritancehtml.tpl.phppage.tpl.phpnode.tpl.phpblock.tpl.php
Inheritancehtml.tpl.phppage.tpl.php          page.tpl.phpnode.tpl.php          node.tpl.phpblock.tpl.php
Inheritancehtml.tpl.php          html.tpl.phppage.tpl.php          page.tpl.phpnode.tpl.php          node.tpl.phpblock.tpl...
Inheritancebase.css          base.csstype.css          type.cssforms.css
Many good base themes
Copy in the base themeexample.com/themes/example.com/sites/all/themes/basetheme
Create your child themeexample.com/themes/example.com/sites/all/themes/yourtheme
sites        all              themes                   yourtheme                               yourtheme.info             ...
yourtheme.info
yourtheme.info    name = yourtheme    description = This is where you describe your theme in words.    version = 1.0    ; ...
yourtheme.info    name = yourtheme    description = This is where you describe your theme in words.    version = 1.0    ; ...
In Drupal 7,  if youre creating a theme from  scratch, you must now declarestyle.css and script.js in your .info file, or t...
yourtheme.info    name = yourtheme    description = This is where you describe your theme in words.    version = 1.0    ; ...
Template Suggestions• Create a base template of that type• Create variations on it to apply in certain  circumstances• No ...
Template Suggestions            by content type             node.tpl.phpblog                node--blog.tpl.phpevent       ...
Template Suggestions            by content type                                  new!             node.tpl.phpblog        ...
Delimiters use two: --       Words still use one: -event-meeting    node--event-meeting.tpl.phpevent-party      node--even...
new!And no longer need    node.tpl.php   in your theme  in order to usenode--event.tpl.php.
new!Wildcards in tpl names    page--user--42.tpl.php    page--user--%.tpl.php   override all user displays    without affe...
new!.clear-block   is now  .clearfix
Alter Hookshook_page_alter()hook_form_alter()hook_css_alter()hook_js_alter()
Conditional CSS  still needs trickery//IE6 overridesdrupal_add_css(   path_to_theme() . /fix-ie.css, array(     group => C...
new!    Classes and Attributes      are now standardand predefined without futzing(although you can still futz if you want).
<div id="example" class="<?php print $classes; ?>clearfix"<?php print $attributes; ?>>...</div>
node.tpl.php<div id="node-<?php print $node->nid; ?>"class="<?php print $classes; ?> clearfix"<?php print$attributes; ?>>.....
Attributes                              new!• $attributes• $title_attributes for titles• $content_attributes for content
<div id="example" class="<?php print$classes; ?>"<?php print $attributes; ?>>  <h2<?php print $title_attributes; ?>>...</h...
Be nice to   robots!photo: Don Soloflickr.com/photos/donsolo/3950364004/
RDFa• Robot food• An entire language     to learn• Theming just got a     lot more technicalphoto: Don Soloflickr.com/photo...
Image: Davie60rflickr.com/photos/davie60r/3274499595/
Robots just want toHand over   Im hungry!your RDF!                 understand your site.                               Hmm...
Dance with      them!                                       Its easy!Image: Eric__I_Eflickr.com/photos/deadling/256390679/
html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN"  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html x...
html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN"  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html x...
html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN"  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html x...
html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN"  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html x...
html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN"  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html x...
html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN"  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html x...
Do I really need to doRDFa to use Drupal?   No, you can just ignore  it, and work on the same    level as other systems.  ...
Attributes• $attributes• $title_attributes for titles• $content_attributes for content
Basics to Remember• Create your theme in  sites/all/themes/yourtheme• Copy templates into your theme to make  overrides• U...
Points of Modification  • CSS  • xhtml in the template that applies  • preprocess  • module
Resources• Drupal 6 » Drupal 7 theming  changes  drupal.org/update/theme/6/7• Template suggestions  drupal.org/node/190815...
Get Drush! Yeah yeah yeah, I know, you dont like command line, but this will really really and for true help you save time...
@laurasrarepattern.com/contact        ©2010 Laura Scott
Questions?         @lauras
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
Upcoming SlideShare
Loading in...5
×

Grok Drupal (7) Theming - 2011 Feb update

15,613

Published on

These are slides from my presentation at Drupal Design Camp Los Angeles, February 2011. Video with rather low resolution version of the slides (we inadvertently recorded my presentation notes screen rather than the projector screen) can be viewed on blip:
http://ladrupal.blip.tv/file/4731722/

Published in: Technology
4 Comments
28 Likes
Statistics
Notes
  • can you enable the download ?
    thank you in advance
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Why all the photo's? saves a lot of clicking if it was just the usefull info tbh... besides that... nice info!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Super
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • BTW, the video with lower resolution slides is here: http://ladrupal.blip.tv/file/4731722/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
15,613
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
367
Comments
4
Likes
28
Embeds 0
No embeds

No notes for slide

Transcript of "Grok Drupal (7) Theming - 2011 Feb update"

  1. 1. Grok Drupal Theming Laura Scott PINGV @lauras #grokd4dDrupal Design Camp LA 2011
  2. 2. Laura ScottCreative Director,Drupal Architectand Co-FounderPINGV Creative "laura s" drupal.org/user/18973 Drupal since 2004 @lauras
  3. 3. Grok Drupal ThemingGrok means to understand so thoroughlythat the observer becomes a part of theobserved — to merge, blend, intermarry, lose identity in group experience. Robert A. Heinlein, Stranger in a Strange Land
  4. 4. <h1 id="title"> Grok Drupal Theming </h1>
  5. 5. <h1 id="title"> Grok Drupal Theming </h1> How Drupal displays content (templates) How to start theming Other things to consider
  6. 6. Assumptions• You know HTML/xhtml • You dont know PHP (but if you do, we wont• You know CSS 2.1 hold it against you)• You are at least getting • You understand some to know CSS 3 (or want basic Drupal to) architecture concepts• Drupal theming confuses • You want to learn this or mystifies you
  7. 7. Some PHP required• Mainly to print pre-defined variables … e.g., $title (for the page title).• You can do a lot in the "preprocess" and "process" functions.• You can avoid it if it totally scares the living daylights out of you. Just stick to copy and paste from <?php to ?>.
  8. 8. HTML5 is coming! http://groups.drupal.org/html5
  9. 9. Theming for Drupal 7 is more powerful than previous versions ...but its also a bit more complicated.
  10. 10. Anatomy of a Drupal "page" • xhtml, CSS, bg images • Content presented via templates • JavaScript
  11. 11. The Drupal theme • CSS files • Image files • Template files • JavaScript files • .info file • Preprocess and process new!
  12. 12. • CSS files• Image files• Template files• JavaScript files• Preprocess and process files• .info file
  13. 13. Which template? It depends....
  14. 14. Which template? page.tpl.php • logo • main title • regions • footer and • other templates
  15. 15. Which template? html.tpl.php new! page.tpl.php • !DOCTYPE • <head> stuff • Drupal calls for CSS and JavaScript* • <body> container
  16. 16. Which template? html.tpl.php page.tpl.php node.tpl.php • node title • node author • post date • node content • node taxonomy terms • node links
  17. 17. Which template? html.tpl.php page.tpl.php node.tpl.php comment-wrapper.tpl.php • Comment area title? • Comment templates
  18. 18. Which template? html.tpl.php page.tpl.php node.tpl.php comment-wrapper.tpl.php comment.tpl.php • Comment title? • Comment author • Comment content • Comment links
  19. 19. Which template? html.tpl.php page.tpl.php node.tpl.php block.tpl.php • Block title • Block content comment-wrapper.tpl.php comment.tpl.php*Well come back tothis, because theres one more very important thing.
  20. 20. Every modules outputalso has a template file. (In theory.)
  21. 21. 42 *.tpl.php files in D7s /modules folder. Each can be copied into your theme and used to override.
  22. 22. The Views UI gives you template code to override Views output.
  23. 23. One theme might have dozens of template files.
  24. 24. There are only a few basics. (Its not rocket science.)
  25. 25. Whats inside a template?
  26. 26. html.tpl.php
  27. 27. html.tpl.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>>
  28. 28. html.tpl.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>> <head profile="<?php print $grddl_profile; ?>"> <?php print $head; ?> <title><?php print $head_title; ?></title> <?php print $styles; ?> <?php print $scripts; ?> </head>
  29. 29. html.tpl.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>> <head profile="<?php print $grddl_profile; ?>"> <?php print $head; ?> <title><?php print $head_title; ?></title> <?php print $styles; ?> <?php print $scripts; ?> </head> <body class="<?php print $classes; ?>" <?php print $attributes;?>> <div id="skip-link"> <a href="#main-content" class="element-invisible element-focusable"><?php print t(Skip to main content); ?></a> </div> <?php print $page_top; ?> <?php print $page; ?> <?php print $page_bottom; ?> </body> </html>
  30. 30. <body class="<?php print $classes; ?>" <?php print$attributes;?>> <div id="skip-link"> <a href="#main-content" class="element-invisibleelement-focusable"><?php print t(Skip to maincontent); ?></a> </div> <?php print $page_top; ?> <?php print $page; ?> <?php print $page_bottom; ?></body></html>
  31. 31. page.tpl.php
  32. 32. page.tpl.php <div id="page-wrapper"><div id="page"> <div id="header"><div class="section clearfix"> <?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home" id="logo"> logo <img src="<?php print $logo; ?>" alt="<?php print t(Home); ?>" /> site name </a> <?php endif; ?> <?php if ($site_name || $site_slogan): ?> <div id="name-and-slogan"> <?php if ($site_name): ?> <?php if ($title): ?> site slogan <div id="site-name"><strong> <a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home"><span><?php print$site_name; ?></span></a> </strong></div> <?php else: /* Use h1 when the content title is empty */ ?> <h1 id="site-name"> main menu <a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home"><span><?php print$site_name; ?></span></a> </h1> <?php endif; ?> <?php endif; ?> <?php if ($site_slogan): ?> breadcrumb <div id="site-slogan"><?php print $site_slogan; ?></div> <?php endif; ?> </div> <!-- /#name-and-slogan --> <?php endif; ?> <?php print render($page[header]); ?> messages </div></div> <!-- /.section, /#header --> <?php if ($main_menu): ?> <div id="navigation"><div class="section"> <?php print theme(links__system_main_menu, array(links => $main_menu, attributes => array(id => main-menu,class => array(links, clearfix)), heading => t(Main menu))); ?> highight </div></div> <!-- /.section, /#navigation --> <?php endif; ?> <?php if ($breadcrumb): ?> <div id="breadcrumb"><?php print $breadcrumb; ?></div> <?php endif; ?> <h1> title <?php print $messages; ?> <div id="main-wrapper"><div id="main" class="clearfix"> <div id="content" class="column"><div class="section"> tabs <?php if ($page[highlight]): ?><div id="highlight"><?php print render($page[highlight]); ?></div><?php endif; ?> <a id="main-content"></a> <?php print render($title_prefix); ?> <?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?> <?php print render($title_suffix); ?> <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?> help <?php print render($page[help]); ?> <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?> <?php print render($page[content]); ?> <?php print $feed_icons; ?> </div></div> <!-- /.section, /#content --> content <?php if ($page[sidebar_first]): ?> <div id="sidebar-first" class="column sidebar"><div class="section"> <?php print render($page[sidebar_first]); ?> </div></div> <!-- /.section, /#sidebar-first --> <?php endif; ?> <?php if ($page[sidebar_second]): ?> <div id="sidebar-second" class="column sidebar"><div class="section"> <?php print render($page[sidebar_second]); ?> </div></div> <!-- /.section, /#sidebar-second --> feed icons <?php endif; ?> </div></div> <!-- /#main, /#main-wrapper --> <div id="footer"><div class="section"> <?php print theme(links__system_secondary_menu, array(links => $secondary_menu, attributes => array(id => sidebars footersecondary-menu, class => array(links, clearfix)), heading => t(Secondary menu))); ?> <?php print render($page[footer]); ?> </div></div> <!-- /.section, /#footer --> </div></div> <!-- /#page, /#page-wrapper -->
  33. 33. The Semantic Page• Logo/branding/site name• [main nav]*• <h1> Title (of article, view, blog post, etc.)• Main content• Then secondary content (aka "sidebars"), footer * and thats debated
  34. 34. <a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home"><span><? php print $site_name; ?></span></a>page.tpl.php </h1> <?php endif; ?> <?php endif; ?> <?php if ($site_slogan): ?> <div id="site-slogan"><?php print $site_slogan; ?></div> <?php endif; ?> </div> <!-- /#name-and-slogan --> <?php endif; ?> <?php print render($page[header]); ?> </div></div> <!-- /.section, /#header --> <?php if ($main_menu): ?> <div id="navigation"><div class="section"> <?php print theme(links__system_main_menu, array(links => $main_menu, attributes => array(id => main-menu, class => array(links, clearfix)), heading => t(Main menu))); ?> </div></div> <!-- /.section, /#navigation --> <?php endif; ?> <?php if ($breadcrumb): ?> <div id="breadcrumb"><?php print $breadcrumb; ?></div> <?php endif; ?> <?php print $messages; ?> <div id="main-wrapper"><div id="main" class="clearfix"> <div id="content" class="column"><div class="section"> <?php if ($page[highlight]): ?><div id="highlight"><?php print render($page[highlight]); ?></ div><?php endif; ?> <a id="main-content"></a> <?php print render($title_prefix); ?> <?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?> <?php print render($title_suffix); ?> <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?> <?php print render($page[help]); ?> <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?> <?php print render($page[content]); ?> <?php print $feed_icons; ?> </div></div> <!-- /.section, /#content --> <?php if ($page[sidebar_first]): ?> <div id="sidebar-first" class="column sidebar"><div class="section"> <?php print render($page[sidebar_first]); ?> </div></div> <!-- /.section, /#sidebar-first --> <?php endif; ?> <?php if ($page[sidebar_second]): ?> <div id="sidebar-second" class="column sidebar"><div class="section"> <?php print render($page[sidebar_second]); ?> </div></div> <!-- /.section, /#sidebar-second --> <?php endif; ?> </div></div> <!-- /#main, /#main-wrapper --> <div id="footer"><div class="section"> <?php print theme(links__system_secondary_menu, array(links => $secondary_menu, attributes => array(id => secondary-menu, class => array(links, clearfix)), heading => t(Secondary menu))); ?> <?php print render($page[footer]); ?> </div></div> <!-- /.section, /#footer -->
  35. 35. <a href="<?php print $front_page; ?>" title="<?php print t(Home); ?>" rel="home"><span><? php print $site_name; ?></span></a>page.tpl.php </h1> <?php endif; ?> <?php endif; ?> <?php if ($site_slogan): ?> <div id="site-slogan"><?php print $site_slogan; ?></div> <?php endif; ?> </div> <!-- /#name-and-slogan --> <?php endif; ?> <?php print render($page[header]); ?> </div></div> <!-- /.section, /#header --> <?php print $messages; ?> <div id="main-wrapper"><div id="main" class="clearfix"> <div id="content" class="column"><div class="section"> <?php if ($page[highlight]): ?><div id="highlight"><?php print render($page[highlight]); ?></ div><?php endif; ?> <a id="main-content"></a> <?php print render($title_prefix); ?> <?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?> <?php print render($title_suffix); ?> <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?> <?php print render($page[help]); ?> <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?> <?php print render($page[content]); ?> <?php print $feed_icons; ?> </div></div> <!-- /.section, /#content --> <?php if ($page[sidebar_first]): ?> <div id="sidebar-first" class="column sidebar"><div class="section"> <?php print render($page[sidebar_first]); ?> </div></div> <!-- /.section, /#sidebar-first --> <?php endif; ?> <?php if ($page[sidebar_second]): ?> <div id="sidebar-second" class="column sidebar"><div class="section"> <?php print render($page[sidebar_second]); ?> </div></div> <!-- /.section, /#sidebar-second --> <?php endif; ?> </div></div> <!-- /#main, /#main-wrapper --> <?php if ($main_menu): ?> <div id="navigation"><div class="section"> <?php print theme(links__system_main_menu, array(links => $main_menu, attributes => array(id => main-menu, class => array(links, clearfix)), heading => t(Main menu))); ?> </div></div> <!-- /.section, /#navigation --> <?php endif; ?> <?php if ($breadcrumb): ?> <div id="breadcrumb"><?php print $breadcrumb; ?></div> <?php endif; ?> <div id="footer"><div class="section"> <?php print theme(links__system_secondary_menu, array(links => $secondary_menu, attributes => array(id => secondary-menu, class => array(links, clearfix)), heading => t(Secondary menu))); ?> <?php print render($page[footer]); ?> </div></div> <!-- /.section, /#footer -->
  36. 36. node.tpl.php
  37. 37. node.tpl.php <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> <?php print $user_picture; ?> <?php print render($title_prefix); ?> <?php if (!$page): ?> <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ? >"><?php print $title; ?></a></h2> <?php endif; ?> <?php print render($title_suffix); ?> <?php if ($display_submitted): ?> <div class="submitted"> <?php print t(Submitted by !username on !datetime, array(!username => $name, !datetime => $date)); ?> </div> <?php endif; ?> <div class="content"<?php print $content_attributes; ?>> <?php // We hide the comments and links now so that we can render them later. hide($content[comments]); hide($content[links]); print render($content); ?> </div> <?php print render($content[links]); ?> <?php print render($content[comments]); ?> </div>
  38. 38. node.tpl.php <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> <?php print $user_picture; ?> <?php print render($title_prefix); ?> <?php if (!$page): ?> <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ? >"><?php print $title; ?></a></h2> <?php endif; ?> <?php print render($title_suffix); ?> <?php if ($display_submitted): ?> <div class="submitted"> <?php print t(Submitted by !username on !datetime, array(!username => $name, !datetime => $date)); ?> </div> <?php endif; ?> <div class="content"<?php print $content_attributes; ?>> <?php // We hide the comments and links now so that we can render them later. hide($content[comments]); hide($content[links]); print render($content); ?> </div> <?php print render($content[links]); ?> <?php print render($content[comments]); ?> new! </div>
  39. 39. comment-wrapper.tpl.php
  40. 40. comment-wrapper.tpl.php<div id="comments" class="<?php print $classes; ?>"<?phpprint $attributes; ?>> <?php if ($content[comments] && $node->type !=forum): ?> <?php print render($title_prefix); ?> <h2 class="title"><?php print t(Comments); ?></h2> <?php print render($title_suffix); ?> <?php endif; ?> <?php print render($content[comments]); ?> <?php if ($content[comment_form]): ?> <h2 class="title comment-form"><?php print t(Addnew comment); ?></h2> <?php print render($content[comment_form]); ?> <?php endif; ?></div>
  41. 41. comment.tpl.php
  42. 42. comment.tpl.php<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> <?php print $picture ?> <?php if ($new): ?> <span class="new"><?php print $new ?></span> <?php endif; ?> <?php print render($title_prefix); ?> <h3<?php print $title_attributes; ?>><?php print $title ?></h3> <?php print render($title_suffix); ?> <div class="submitted"> <?php print $permalink; ?> <?php print $submitted; ?> </div> <div class="content"<?php print $content_attributes; ?>> <?php // We hide the comments and links now so that we can render them later. hide($content[links]); print render($content); ?> <?php if ($signature): ?> <div class="user-signature clearfix"> <?php print $signature ?> </div> <?php endif; ?> </div> <?php print render($content[links]) ?></div>
  43. 43. block.tpl.php
  44. 44. block.tpl.php<div id="<?php print $block_html_id; ?>" class="<?phpprint $classes; ?>"<?php print $attributes; ?>> <?php print render($title_prefix); ?><?php if ($block->subject): ?> <h2<?php print $title_attributes; ?>><?php print$block->subject ?></h2><?php endif;?> <?php print render($title_suffix); ?> <div class="content"<?php print $content_attributes; ?>> <?php print $content ?> </div></div>
  45. 45. block.tpl.php<div id="<?php print $block_html_id; ?>" class="<?phpprint $classes; ?>"<?php print $attributes; ?>> <?php print render($title_prefix); ?><?php if ($block->subject): ?> <h2<?php print $title_attributes; ?>><?php print$block->subject ?></h2><?php endif;?> <?php print render($title_suffix); ?> <div class="content"<?php print $content_attributes; ?>> <?php print $content ?> </div></div>
  46. 46. polls
  47. 47. node.tpl.php node.tpl.phppoll-vote.tpl.php poll-results.tpl.php poll-bar.tpl.php
  48. 48. block.tpl.php block.tpl.phppoll-vote.tpl.php poll-results--block.tpl.php poll-bar--block.tpl.php
  49. 49. Fields are in core Its nice to have a home.
  50. 50. field.tpl.php
  51. 51. field.tpl.php <div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> <?php if (!$label_hidden) : ?> <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div> <?php endif; ?> <div class="field-items"<?php print $content_attributes; ?>> <?php foreach ($items as $delta => $item) : ?> <div class="field-item <?php print $delta % 2 ? odd : even; ?>"<?php print $item_attributes [$delta]; ?>><?php print render($item); ?></div> <?php endforeach; ?> </div> </div>
  52. 52. html.tpl.phppage.tpl.phpnode.tpl.php block.tpl.phpcomment-wrapper.tpl.php comment.tpl.php
  53. 53. html.tpl.phppage.tpl.phpregion.tpl.phpregion.tpl.php region.tpl.phpnode.tpl.php block.tpl.phpcomment-wrapper.tpl.php comment.tpl.phpregion.tpl.php
  54. 54. new!region.tpl.php
  55. 55. region.tpl.php <?php if ($content): ?> <div class="<?php print $classes; ?>"> <?php print $content; ?> </div> <?php endif; ?>
  56. 56. So if all regions use the same template,how does Drupal know which region?
  57. 57. <?php print render($page[header]); ?>
  58. 58. <?php print render($page[header]); ?> <?php print render($page[help]); ?> <?php print render($page[highlight]); ?> <?php print render($page[content]); ?><?php print render($page[sidebar_first]); ?><?php print render($page[sidebar_second]); ?> <?php print render($page[footer]); ?>
  59. 59. All regions in your theme must be declared, or else you get these defaults.
  60. 60. Where the heck are all these templates?
  61. 61. example.com/modules
  62. 62. Preprocessscary doesnt have to be
  63. 63. Everything is an array pretty much
  64. 64. So how to go about creating a theme?
  65. 65. Create a theme from scratch, making everything • theme .info file • page.tpl.php • *.tpl.php files as needed to override core • template.php for your preprocess and process • background images
  66. 66. or make a baby!
  67. 67. Sub-themesinheriteverything fromparent theme, except what is overridden.
  68. 68. Inheritancehtml.tpl.phppage.tpl.phpnode.tpl.phpblock.tpl.php
  69. 69. Inheritancehtml.tpl.phppage.tpl.php page.tpl.phpnode.tpl.php node.tpl.phpblock.tpl.php
  70. 70. Inheritancehtml.tpl.php html.tpl.phppage.tpl.php page.tpl.phpnode.tpl.php node.tpl.phpblock.tpl.php
  71. 71. Inheritancebase.css base.csstype.css type.cssforms.css
  72. 72. Many good base themes
  73. 73. Copy in the base themeexample.com/themes/example.com/sites/all/themes/basetheme
  74. 74. Create your child themeexample.com/themes/example.com/sites/all/themes/yourtheme
  75. 75. sites all themes yourtheme yourtheme.info template.php license.txt css images templates
  76. 76. yourtheme.info
  77. 77. yourtheme.info name = yourtheme description = This is where you describe your theme in words. version = 1.0 ; Requirements base theme = ninesixty core = 7.x engine = phptemplate ; Stylesheets stylesheets[all][] = styles.css stylesheets[screen][] = styles/base.css stylesheets[screen][] = styles/layout.css stylesheets[screen][] = styles/colors.css stylesheets[screen][] = styles/forms.css stylesheets[print][] = styles/print.css ; Regions regions[header] = Header regions[help] = Help regions[highlight] = Highlight regions[content] = Content regions[page_top] = Page top regions[page_bottom] = Page bottom regions[indicators] = Indicators regions_hidden[] = indicators ; Scripts scripts[] = script.js scripts[] = scripts/twitter.js
  78. 78. yourtheme.info name = yourtheme description = This is where you describe your theme in words. version = 1.0 ; Requirements base theme = ninesixty core = 7.x engine = phptemplate ; Stylesheets stylesheets[all][] = styles.css stylesheets[screen][] = styles/base.css stylesheets[screen][] = styles/layout.css stylesheets[screen][] = styles/colors.css stylesheets[screen][] = styles/forms.css stylesheets[print][] = styles/print.css ; Regions regions[header] = Header regions[help] = Help regions[highlight] = Highlight regions[content] = Content regions[page_top] = Page top regions[page_bottom] = Page bottom regions[indicators] = Indicators regions_hidden[] = indicators ; Scripts scripts[] = script.js scripts[] = scripts/twitter.js
  79. 79. In Drupal 7, if youre creating a theme from scratch, you must now declarestyle.css and script.js in your .info file, or they will not be included.
  80. 80. yourtheme.info name = yourtheme description = This is where you describe your theme in words. version = 1.0 ; Requirements base theme = ninesixty core = 7.x engine = phptemplate ; Stylesheets stylesheets[all][] = styles.css stylesheets[screen][] = styles/base.css stylesheets[screen][] = styles/layout.css stylesheets[screen][] = styles/colors.css stylesheets[screen][] = styles/forms.css stylesheets[print][] = styles/print.css ; Regions regions[header] = Header regions[help] = Help regions[highlight] = Highlight regions[content] = Content regions[page_top] = Page top regions[page_bottom] = Page bottom regions[indicators] = Indicators regions_hidden[] = indicators ; Scripts scripts[] = script.js scripts[] = scripts/twitter.js
  81. 81. Template Suggestions• Create a base template of that type• Create variations on it to apply in certain circumstances• No coding necessary http://drupal.org/node/190815
  82. 82. Template Suggestions by content type node.tpl.phpblog node--blog.tpl.phpevent node--event.tpl.phpclassified node--classified.tpl.phpproduct node--product.tpl.php
  83. 83. Template Suggestions by content type new! node.tpl.phpblog node--blog.tpl.phpevent node--event.tpl.phpclassified node--classified.tpl.phpproduct node--product.tpl.php
  84. 84. Delimiters use two: -- Words still use one: -event-meeting node--event-meeting.tpl.phpevent-party node--event-party.tpl.php
  85. 85. new!And no longer need node.tpl.php in your theme in order to usenode--event.tpl.php.
  86. 86. new!Wildcards in tpl names page--user--42.tpl.php page--user--%.tpl.php override all user displays without affecting /user
  87. 87. new!.clear-block is now .clearfix
  88. 88. Alter Hookshook_page_alter()hook_form_alter()hook_css_alter()hook_js_alter()
  89. 89. Conditional CSS still needs trickery//IE6 overridesdrupal_add_css( path_to_theme() . /fix-ie.css, array( group => CSS_THEME, browsers => array( IE => lt IE 7, !IE => FALSE ), preprocess => FALSE ));
  90. 90. new! Classes and Attributes are now standardand predefined without futzing(although you can still futz if you want).
  91. 91. <div id="example" class="<?php print $classes; ?>clearfix"<?php print $attributes; ?>>...</div>
  92. 92. node.tpl.php<div id="node-<?php print $node->nid; ?>"class="<?php print $classes; ?> clearfix"<?php print$attributes; ?>>...</div>
  93. 93. Attributes new!• $attributes• $title_attributes for titles• $content_attributes for content
  94. 94. <div id="example" class="<?php print$classes; ?>"<?php print $attributes; ?>> <h2<?php print $title_attributes; ?>>...</h2> <div class="content"<?php print$content_attributes; ?>>... </div></div>
  95. 95. Be nice to robots!photo: Don Soloflickr.com/photos/donsolo/3950364004/
  96. 96. RDFa• Robot food• An entire language to learn• Theming just got a lot more technicalphoto: Don Soloflickr.com/photos/donsolo/3950364004/
  97. 97. Image: Davie60rflickr.com/photos/davie60r/3274499595/
  98. 98. Robots just want toHand over Im hungry!your RDF! understand your site. Hmmmmm…. data….. Image: bbaltimore flickr.com/photos/bbaltimore/6778028/
  99. 99. Dance with them! Its easy!Image: Eric__I_Eflickr.com/photos/deadling/256390679/
  100. 100. html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="<?php print $language->language; ?>"version="XHTML+RDFa 1.0" dir="<?php print$language->dir; ?>" <?php print $rdf_namespaces; ?>>
  101. 101. html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="<?php print $language->language; ?>"version="XHTML+RDFa 1.0" dir="<?php print$language->dir; ?>" <?php print $rdf_namespaces; ?>>
  102. 102. html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="<?php print $language->language; ?>"version="XHTML+RDFa 1.0" dir="<?php print$language->dir; ?>" <?php print $rdf_namespaces; ?>>
  103. 103. html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="<?php print $language->language; ?>"version="XHTML+RDFa 1.0" dir="<?php print$language->dir; ?>" <?php print $rdf_namespaces; ?>>
  104. 104. html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="<?php print $language->language; ?>"version="XHTML+RDFa 1.0" dir="<?php print$language->dir; ?>" <?php print $rdf_namespaces; ?>>
  105. 105. html.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="<?php print $language->language; ?>"version="XHTML+RDFa 1.0" dir="<?php print$language->dir; ?>" <?php print $rdf_namespaces; ?>><head profile="<?php print $grddl_profile; ?>">
  106. 106. Do I really need to doRDFa to use Drupal? No, you can just ignore it, and work on the same level as other systems. But youll be missing out.Photo: FlySiflickr.com/photos/flysi/183272970/
  107. 107. Attributes• $attributes• $title_attributes for titles• $content_attributes for content
  108. 108. Basics to Remember• Create your theme in sites/all/themes/yourtheme• Copy templates into your theme to make overrides• Use template suggestions to break out distinct structures and stylings• Use base theme to get a jump on things• Let Drupal do what it does best
  109. 109. Points of Modification • CSS • xhtml in the template that applies • preprocess • module
  110. 110. Resources• Drupal 6 » Drupal 7 theming changes drupal.org/update/theme/6/7• Template suggestions drupal.org/node/190815*• RDFa buytaert.net/semantic-web- and-drupal-video * Drupal 6
  111. 111. Get Drush! Yeah yeah yeah, I know, you dont like command line, but this will really really and for true help you save timedeveloping so that you can spend more time designing and theming, and isnt that what youd rather do anyway? Video to make it easy: http://is.gd/ aZe33
  112. 112. @laurasrarepattern.com/contact ©2010 Laura Scott
  113. 113. Questions? @lauras
  1. A particular slide catching your eye?

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

×