!"#$%&"'()*%+,-./01
!"#$"%&'()
*+,-.%/$0"120
34"#$"5         67$(89:9
!"#$"%&'()           $#;"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
34"#$"5
          67$(89:9


http://sf2010.drupal.org/
  node/add/eval/8278
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!
!"#$%&"'()*%+,-./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
<h1 id="title"> !"#$%&"'()*%+,-./01 </h1>
<h1 id="title"> !"#$%&"'()*%+,-./01 </h1>



    How Drupal displays content (templates)

             How to start theming

           Other things to consider
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
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 '?>'.
Drupal 7 is more
complex than Drupal 6
     ...but it's also more simple
Anatomy of a Drupal "page"


            •   xhtml, CSS, images


            •   Content presented via
                templates


            •   JavaScript
The Drupal theme
 • CSS files
 • Image files
 • Template files
 • JavaScript files
 • Preprocess and process files   new!

 • .info file
Which template?




                  It depends....
Every module's output
also has a template file.
         (In theory.)
42 *.tpl.php files in D7's /modules folder.

Each can be copied and used to override.
One theme
  might have
  dozens of
template files.
There are only
  a few basics.


  (It's not rocket science.)
What's 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">
 <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; ?>>
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>
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>
<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>
<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>
page.tpl.php
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 -->
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
<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 -->
<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 -->
<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 -->
node.tpl.php
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>
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>
block.tpl.php
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>
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>
comment-wrapper.tpl.php
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>
comment.tpl.php
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>
polls
node.tpl.php        node.tpl.php


poll-vote.tpl.php   poll-results.tpl.php
                    poll-bar.tpl.php
block.tpl.php       block.tpl.php


poll-vote.tpl.php   poll-results--block.tpl.php
                     poll-bar--block.tpl.php
Fields are in core   It's nice to
                     have a home.
field.tpl.php
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>
html.tpl.php
page.tpl.php
node.tpl.php              block.tpl.php




comment-wrapper.tpl.php
 comment.tpl.php
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
region.tpl.php
region.tpl.php




          <div class="<?php print $classes; ?>">
            <?php print $content; ?>
          </div>
So if all regions use the same template,
how does Drupal know which region?
<?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']); ?>
All regions in your theme must be declared,
        or else you get these defaults.
Where the heck are all these templates?
example.com/modules
BUT DON'T EDIT THEM THERE!
Preprocess
  doesn't have to be




scary
May I
recommend....                                !"!#$%&
                                    '&()*+#',-./0,&-
PHP for Drupal Designers,
  by Emma Jane Hogbin
                                        !"#$%%&#'&()#*+,-.(#
                            !""#$%!&'()*+*,!"!-.+"!"!///-%!&'()*+*,!"!-.+"!




   designtotheme.com
So how to go about
 creating a theme?
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
or make a baby!
Sub-themes
inherit everything from parent theme,
except what is overridden.
Inheritance


base.css          base.css



style.css         style.css



forms.css
Inheritance


page.tpl.php          page.tpl.php




node.tpl.php          node.tpl.php




block.tpl.php
Many good base
      themes
• AdaptiveTheme
• Basic           • NineSixty
• Blueprint       • Stark
• Framework       • Studio
• Fusion          • Zen
• Genesis
• Mobile
Create your theme


example.com/themes/
Create your theme


example.com/themes/
example.com/sites/all/themes/yourtheme
yourtheme.info
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
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
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
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
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
Delimiters use two: '--'
       Words still use one: '-'



event-meeting    node--event-meeting.tpl.php
event-party      node--event-party.tpl.php
Be nice to
   robots!




photo: Don Solo
flickr.com/photos/donsolo/3950364004/
RDFa
• Robot food
• Anlearn language
  to
     entire

• Theming just got a
  lot more technical


photo: Don Solo
flickr.com/photos/donsolo/3950364004/
Image: Davie60r
flickr.com/photos/davie60r/3274499595/
Robots just want to
            I'm hungry!
Hand over
your RDF!
                          understand your site.


                               Hmmmmm….
                                 data…..




                             Image: bbaltimore
                             flickr.com/photos/bbaltimore/6778028/
Dance with
      them!




                                        It's easy!

Image: Eric__I_E
flickr.com/photos/deadling/256390679/
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; ?>>
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; ?>>
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; ?>>
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; ?>>
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; ?>>
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/
Points of Modification

  • CSS
  • xhtml in the template that applies
  • preprocess
  • module
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
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
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
@lauras #d4dgrok
rarepattern.com/contact




        ©2010 Laura Scott
Questions?




      Feedback is good!
      @lauras      #grokd4d
      http://sf2010.drupal.org/
        node/add/eval/8278

Grok Drupal (7) Theming

  • 1.
  • 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.
    34"#$"5 67$(89:9 http://sf2010.drupal.org/ node/add/eval/8278
  • 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.
    !"#$%&"'()*%+,-./01 Grok means tounderstand 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.
  • 7.
    <h1 id="title"> !"#$%&"'()*%+,-./01</h1> How Drupal displays content (templates) How to start theming Other things to consider
  • 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.
    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.
    Drupal 7 ismore complex than Drupal 6 ...but it's also more simple
  • 11.
    Anatomy of aDrupal "page" • xhtml, CSS, images • Content presented via templates • JavaScript
  • 12.
    The Drupal theme • CSS files • Image files • Template files • JavaScript files • Preprocess and process files new! • .info file
  • 13.
    Which template? It depends....
  • 20.
    Every module's output alsohas a template file. (In theory.)
  • 21.
    42 *.tpl.php filesin D7's /modules folder. Each can be copied and used to override.
  • 22.
    One theme might have dozens of template files.
  • 24.
    There are only a few basics. (It's not rocket science.)
  • 25.
  • 26.
  • 27.
    html.tpl.php <!DOCTYPE htmlPUBLIC "-//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.
    html.tpl.php <!DOCTYPE htmlPUBLIC "-//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.
    html.tpl.php <!DOCTYPE htmlPUBLIC "-//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>
  • 30.
    <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>
  • 31.
    <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>
  • 32.
  • 33.
    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 -->
  • 34.
    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
  • 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 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 -->
  • 36.
    <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 -->
  • 37.
    <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 -->
  • 38.
  • 39.
    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>
  • 40.
    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>
  • 41.
  • 42.
    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>
  • 43.
    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>
  • 44.
  • 45.
    comment-wrapper.tpl.php <div id="comments" class="<?phpprint $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>
  • 46.
  • 47.
    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>
  • 48.
  • 49.
    node.tpl.php node.tpl.php poll-vote.tpl.php poll-results.tpl.php poll-bar.tpl.php
  • 50.
    block.tpl.php block.tpl.php poll-vote.tpl.php poll-results--block.tpl.php poll-bar--block.tpl.php
  • 51.
    Fields are incore It's nice to have a home.
  • 52.
  • 53.
    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>
  • 54.
    html.tpl.php page.tpl.php node.tpl.php block.tpl.php comment-wrapper.tpl.php comment.tpl.php
  • 55.
    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
  • 56.
  • 57.
    region.tpl.php <div class="<?php print $classes; ?>"> <?php print $content; ?> </div>
  • 58.
    So if allregions use the same template, how does Drupal know which region?
  • 60.
    <?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']); ?>
  • 61.
    All regions inyour theme must be declared, or else you get these defaults.
  • 62.
    Where the heckare all these templates?
  • 63.
  • 64.
    Preprocess doesn'thave to be scary
  • 66.
    May I recommend.... !"!#$%& '&()*+#',-./0,&- PHP for Drupal Designers, by Emma Jane Hogbin !"#$%%&#'&()#*+,-.(# !""#$%!&'()*+*,!"!-.+"!"!///-%!&'()*+*,!"!-.+"! designtotheme.com
  • 67.
    So how togo about creating a theme?
  • 68.
    Create a themefrom 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
  • 69.
    or make ababy!
  • 70.
    Sub-themes inherit everything fromparent theme, except what is overridden.
  • 71.
    Inheritance base.css base.css style.css style.css forms.css
  • 72.
    Inheritance page.tpl.php page.tpl.php node.tpl.php node.tpl.php block.tpl.php
  • 73.
    Many good base themes • AdaptiveTheme • Basic • NineSixty • Blueprint • Stark • Framework • Studio • Fusion • Zen • Genesis • Mobile
  • 74.
  • 75.
  • 76.
  • 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[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
  • 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[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
  • 79.
    Template Suggestions • Createa base template of that type • Create variations on it to apply in certain circumstances • No coding necessary http://drupal.org/node/190815
  • 80.
    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
  • 81.
    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
  • 82.
    Delimiters use two:'--' Words still use one: '-' event-meeting node--event-meeting.tpl.php event-party node--event-party.tpl.php
  • 83.
    Be nice to robots! photo: Don Solo flickr.com/photos/donsolo/3950364004/
  • 84.
    RDFa • Robot food •Anlearn language to entire • Theming just got a lot more technical photo: Don Solo flickr.com/photos/donsolo/3950364004/
  • 85.
  • 86.
    Robots just wantto I'm hungry! Hand over your RDF! understand your site. Hmmmmm…. data….. Image: bbaltimore flickr.com/photos/bbaltimore/6778028/
  • 87.
    Dance with them! It's easy! Image: Eric__I_E flickr.com/photos/deadling/256390679/
  • 88.
    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; ?>>
  • 89.
    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; ?>>
  • 90.
    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; ?>>
  • 91.
    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; ?>>
  • 92.
    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; ?>>
  • 93.
    Do I reallyneed 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/
  • 94.
    Points of Modification • CSS • xhtml in the template that applies • preprocess • module
  • 95.
    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
  • 96.
    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
  • 97.
    Get Drush! Yeahyeah 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
  • 98.
  • 99.
    Questions? Feedback is good! @lauras #grokd4d http://sf2010.drupal.org/ node/add/eval/8278