Grok Drupal (7) Theming

68,908 views
68,840 views

Published on

These are slides from <a>Laura Scott's DrupalCon San Francisco presentation on Drupal theming</a>. (There's a video of it at that link as well.)

Published in: Design
8 Comments
55 Likes
Statistics
Notes
No Downloads
Views
Total views
68,908
On SlideShare
0
From Embeds
0
Number of Embeds
24,871
Actions
Shares
0
Downloads
1,212
Comments
8
Likes
55
Embeds 0
No embeds

No notes for slide

Grok Drupal (7) Theming

  1. 1. !"#$%&"'()*%+,-./01 !"#$"%&'() *+,-.%/$0"120 34"#$"5 67$(89:9
  2. 2. !"#$"%&'() $#;"4%G$'HDE0'E% /$0"1 20%CD$0'E($F%C "I9 %/(JK(#I90$ * +,-.%/$0"120 9$#;"4<($7=#50$ =>?@AB C$#;"4%5DI'0%LMM: 34"#$"5 67$(89:9
  3. 3. 34"#$"5 67$(89:9 http://sf2010.drupal.org/ node/add/eval/8278
  4. 4. More on Drupal Theming this week • Theming with Skinr! (Jacine Rodriguez) — Right after this session, right here in this room. • All your html are belong to us (Morten) — Wednesday at 4:15pm. • Sprint on Thursday — Free! Open! Friendly!
  5. 5. !"#$%&"'()*%+,-./01 Grok means to understand so thoroughly that the observer becomes a part of the observed — to merge, blend, intermarry, lose identity in group experience. Robert A. Heinlein, Stranger in a Strange Land
  6. 6. <h1 id="title"> !"#$%&"'()*%+,-./01 </h1>
  7. 7. <h1 id="title"> !"#$%&"'()*%+,-./01 </h1> How Drupal displays content (templates) How to start theming Other things to consider
  8. 8. Assumptions • You know HTML/xhtml • You don't know PHP (but if you do, we won't • You know CSS 2.1 hold it against you) • You are at least getting • You understand some basic Drupal to know CSS 3 (or want to) architecture concepts • Drupal theming confuses • You want to learn this or mystifies you
  9. 9. Some PHP required • Mainly to printthe page title). e.g., $title (for pre-defined variables … • You can do a lot in the "preprocess" and "process" functions. • You can avoidof you. totally scarescopy living daylights out it if it Just stick to the and paste from '<?php' to '?>'.
  10. 10. Drupal 7 is more complex than Drupal 6 ...but it's also more simple
  11. 11. Anatomy of a Drupal "page" • xhtml, CSS, images • Content presented via templates • JavaScript
  12. 12. The Drupal theme • CSS files • Image files • Template files • JavaScript files • Preprocess and process files new! • .info file
  13. 13. Which template? It depends....
  14. 14. Every module's output also has a template file. (In theory.)
  15. 15. 42 *.tpl.php files in D7's /modules folder. Each can be copied and used to override.
  16. 16. One theme might have dozens of template files.
  17. 17. There are only a few basics. (It's not rocket science.)
  18. 18. What's inside a template?
  19. 19. html.tpl.php
  20. 20. 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; ?>>
  21. 21. 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>
  22. 22. 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"><?php print t('Skip to main content'); ?></a> </div> <?php print $page_top; ?> <?php print $page; ?> <?php print $page_bottom; ?> </body> </html>
  23. 23. <body class="<?php print $classes; ?>" <?php print $attributes;?>> <div id="skip-link"> <a href="#main-content"><?php print t('Skip to main content'); ?></a> </div> <?php print $page_top; ?> <?php print $page; ?> <?php print $page_bottom; ?> </body> </html>
  24. 24. <body class="<?php print $classes; ?>" <?php print $attributes;?>> <div id="skip-link"> <a href="#main-content"><?php print t('Skip to main content'); ?></a> </div> <?php print $page_top; ?> <?php print $page; ?> <?php print $page_bottom; ?> </body> </html>
  25. 25. page.tpl.php
  26. 26. page.tpl.php logo <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"> <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): ?> site slogan <?php if ($title): ?> <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; ?> breadcrumb <?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"> messages <?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; ?> <?php print $messages; ?> <div id="main-wrapper"><div id="main" class="clearfix"> <h1> title <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); ?> help <?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 --> content feed icons <?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' => sidebars footer 'secondary-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Secondary menu'))); ?> <?php print render($page['footer']); ?> </div></div> <!-- /.section, /#footer --> </div></div> <!-- /#page, /#page-wrapper -->
  27. 27. The Semantic Page • Logo/branding/site name • [main nav]* • <h1> Title (of article, view, blog post, etc.) • Main content • Then sidebar(s), footer * and that's debated
  28. 28. <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 -->
  29. 29. <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 -->
  30. 30. <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 -->
  31. 31. node.tpl.php
  32. 32. 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>
  33. 33. 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']); ?> new! <?php print render($content['comments']); ?> </div>
  34. 34. block.tpl.php
  35. 35. block.tpl.php <div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $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>
  36. 36. block.tpl.php <div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $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>
  37. 37. comment-wrapper.tpl.php
  38. 38. comment-wrapper.tpl.php <div id="comments" class="<?php print $classes; ?>"<?php print $attributes; ?>> <?php if ($content['comments'] && $node->type != 'forum'): ?> <h2 class="title"><?php print t('Comments'); ?></h2> <?php endif; ?> <?php print render($content['comments']); ?> <?php if ($content['comment_form']): ?> <h2 class="title comment-form"><?php print t('Add new comment'); ?></h2> <?php print render($content['comment_form']); ?> <?php endif; ?> </div>
  39. 39. comment.tpl.php
  40. 40. 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 t('Submitted by !username on !datetime.', array('!username' => $author, '!datetime' => $created)); ?> </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>
  41. 41. polls
  42. 42. node.tpl.php node.tpl.php poll-vote.tpl.php poll-results.tpl.php poll-bar.tpl.php
  43. 43. block.tpl.php block.tpl.php poll-vote.tpl.php poll-results--block.tpl.php poll-bar--block.tpl.php
  44. 44. Fields are in core It's nice to have a home.
  45. 45. field.tpl.php
  46. 46. 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>
  47. 47. html.tpl.php page.tpl.php node.tpl.php block.tpl.php comment-wrapper.tpl.php comment.tpl.php
  48. 48. html.tpl.php page.tpl.php region.tpl.php region.tpl.php region.tpl.php node.tpl.php block.tpl.php comment-wrapper.tpl.php comment.tpl.php region.tpl.php
  49. 49. region.tpl.php
  50. 50. region.tpl.php <div class="<?php print $classes; ?>"> <?php print $content; ?> </div>
  51. 51. So if all regions use the same template, how does Drupal know which region?
  52. 52. <?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']); ?>
  53. 53. All regions in your theme must be declared, or else you get these defaults.
  54. 54. Where the heck are all these templates?
  55. 55. example.com/modules BUT DON'T EDIT THEM THERE!
  56. 56. Preprocess doesn't have to be scary
  57. 57. May I recommend.... !"!#$%& '&()*+#',-./0,&- PHP for Drupal Designers, by Emma Jane Hogbin !"#$%%&#'&()#*+,-.(# !""#$%!&'()*+*,!"!-.+"!"!///-%!&'()*+*,!"!-.+"! designtotheme.com
  58. 58. So how to go about creating a theme?
  59. 59. 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 postprocess • background images
  60. 60. or make a baby!
  61. 61. Sub-themes inherit everything from parent theme, except what is overridden.
  62. 62. Inheritance base.css base.css style.css style.css forms.css
  63. 63. Inheritance page.tpl.php page.tpl.php node.tpl.php node.tpl.php block.tpl.php
  64. 64. Many good base themes • AdaptiveTheme • Basic • NineSixty • Blueprint • Stark • Framework • Studio • Fusion • Zen • Genesis • Mobile
  65. 65. Create your theme example.com/themes/
  66. 66. Create your theme example.com/themes/ example.com/sites/all/themes/yourtheme
  67. 67. yourtheme.info
  68. 68. 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[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[] = scripts/twitter.js
  69. 69. 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[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 new! regions_hidden[] = indicators ; Scripts scripts[] = scripts/twitter.js
  70. 70. 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
  71. 71. Template Suggestions by content type node.tpl.php blog node--blog.tpl.php event node--event.tpl.php classified node--classified.tpl.php product node--product.tpl.php
  72. 72. Template Suggestions by content type new! node.tpl.php blog node--blog.tpl.php event node--event.tpl.php classified node--classified.tpl.php product node--product.tpl.php
  73. 73. Delimiters use two: '--' Words still use one: '-' event-meeting node--event-meeting.tpl.php event-party node--event-party.tpl.php
  74. 74. Be nice to robots! photo: Don Solo flickr.com/photos/donsolo/3950364004/
  75. 75. RDFa • Robot food • Anlearn language to entire • Theming just got a lot more technical photo: Don Solo flickr.com/photos/donsolo/3950364004/
  76. 76. Image: Davie60r flickr.com/photos/davie60r/3274499595/
  77. 77. Robots just want to I'm hungry! Hand over your RDF! understand your site. Hmmmmm…. data….. Image: bbaltimore flickr.com/photos/bbaltimore/6778028/
  78. 78. Dance with them! It's easy! Image: Eric__I_E flickr.com/photos/deadling/256390679/
  79. 79. 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; ?>>
  80. 80. 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; ?>>
  81. 81. 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; ?>>
  82. 82. 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; ?>>
  83. 83. 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; ?>>
  84. 84. Do I really need to do RDFa to use Drupal? No, you can just ignore it, and work on the same level as other systems. But you'll be missing out. Photo: FlySi flickr.com/photos/flysi/183272970/
  85. 85. Points of Modification • CSS • xhtml in the template that applies • preprocess • module
  86. 86. 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
  87. 87. 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
  88. 88. Get Drush! Yeah yeah yeah, I know, you don't like command line, but this will really really and for true help you save time developing so that you can spend more time designing and theming, and isn't that what you'd rather do anyway? Video to make it easy: http://is.gd/ a Ze 3 3
  89. 89. @lauras #d4dgrok rarepattern.com/contact ©2010 Laura Scott
  90. 90. Questions? Feedback is good! @lauras #grokd4d http://sf2010.drupal.org/ node/add/eval/8278

×