SlideShare a Scribd company logo
Grok Drupal
             Theming
                  Laura Scott
                       PINGV
                      @lauras
                     #grokd4d


Drupal Design Camp LA 2011
Laura Scott
Creative Director,
Drupal Architect
and Co-Founder
PINGV Creative



                "laura s"
                drupal.org/user/18973
                Drupal since 2004




                               @lauras
Grok Drupal Theming

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"> Grok Drupal Theming </h1>
<h1 id="title"> Grok Drupal Theming </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
    to know CSS 3 (or want         basic Drupal
    to)                            architecture concepts

•   Drupal theming confuses    •   You want to learn this
    or mystifies you
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 '?>'.
HTML5 is coming!




 http://groups.drupal.org/html5
Theming for Drupal 7 is
 more powerful than
  previous versions
  ...but it's 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
                   •   regions
                   •   footer

                       and

                   • other templates
Which template?   html.tpl.php
                                          new!
                  page.tpl.php




                       • !DOCTYPE
                       • <head> stuff
                       • Drupal calls for CSS and JavaScript*
                       • <body> container
Which template?   html.tpl.php
                  page.tpl.php
                  node.tpl.php
                  • node title
                  • node author
                  • post date
                  • node content
                  • node taxonomy terms
                  • node links
Which template?   html.tpl.php
                  page.tpl.php
                  node.tpl.php




                  comment-wrapper.tpl.php
                  • Comment area title?
                  • Comment templates
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
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


*We'll come back to
this, because there's
      one more very
    important thing.
Every module's output
also has a template file.
         (In theory.)
42 *.tpl.php files in D7's /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.


  (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" 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>
<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>
page.tpl.php
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
                                                                                                                                  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 secondary content (aka "sidebars"),
  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 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']); ?>
     <?php print render($content['comments']); ?>
                                                        new!
   </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'): ?>
    <?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('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 $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>
block.tpl.php
block.tpl.php

<div id="<?php print $block_html_id; ?>" 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="<?php print $block_html_id; ?>" 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>
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
new!




region.tpl.php
region.tpl.php




          <?php if ($content): ?>
            <div class="<?php print $classes; ?>">
              <?php print $content; ?>
            </div>
          <?php endif; ?>
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']); ?>

   <?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
Preprocess


scary
  doesn't 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

               •   *.tpl.php files as
                   needed to override
                   core

               •   template.php for your
                   preprocess and
                   process

               •   background images
or make a baby!
Sub-themes
inherit
everything from
parent theme,




                  except what is overridden.
Inheritance

html.tpl.php




page.tpl.php




node.tpl.php




block.tpl.php
Inheritance

html.tpl.php




page.tpl.php          page.tpl.php




node.tpl.php          node.tpl.php




block.tpl.php
Inheritance

html.tpl.php          html.tpl.php




page.tpl.php          page.tpl.php




node.tpl.php          node.tpl.php




block.tpl.php
Inheritance


base.css          base.css



type.css          type.css



forms.css
Many good base themes
Copy in the base theme


example.com/themes/

example.com/sites/all/themes/basetheme
Create your child theme


example.com/themes/

example.com/sites/all/themes/yourtheme
sites

        all

              themes

                   yourtheme


                               yourtheme.info

                               template.php

                               license.txt

                               css

                               images

                               templates
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[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
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
In Drupal 7,
  if you're creating a theme from
  scratch, you must now declare
style.css and script.js in your .info
 file, or they will not be included.
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
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
new!

And no longer need
    node.tpl.php
   in your theme
  in order to use
node--event.tpl.php.
new!

Wildcards in tpl names
    page--user--42.tpl.php

    page--user--%.tpl.php

   override all user displays
    without affecting /user
new!



.clear-block
   is now
  .clearfix
Alter Hooks


hook_page_alter()
hook_form_alter()
hook_css_alter()
hook_js_alter()
Conditional CSS
  still needs trickery
//IE6 overrides
drupal_add_css(
   path_to_theme() . '/fix-ie.css', array(
     'group' => CSS_THEME,
     'browsers' => array(
        'IE' => 'lt IE 7',
        '!IE' => FALSE
     ),
     'preprocess' => FALSE
   )
);
new!



    Classes and Attributes
      are now standard
and 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; ?>>


...


</div>
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; ?>>...</h2>

  <div class="content"<?php print
$content_attributes; ?>>
...

  </div>

</div>
Be nice to
   robots!




photo: Don Solo
flickr.com/photos/donsolo/3950364004/
RDFa
• Robot food
• An entire language
     to learn
• 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
Hand over   I'm hungry!
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; ?>>
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; ?
>">
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/
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
• 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
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*

• 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/             aZe33
@lauras
rarepattern.com/contact




        ©2010 Laura Scott
Questions?




         @lauras

More Related Content

What's hot

Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Emma Jane Hogbin Westby
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Acquia
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
Dick Olsson
 
Using Core Themes in Drupal 8
Using Core Themes in Drupal 8Using Core Themes in Drupal 8
Using Core Themes in Drupal 8
Suzanne Dergacheva
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
Peter
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
Amanda Giles
 
Arizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress ThemeArizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress Theme
certainstrings
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
Josh Lee
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
Emma Jane Hogbin Westby
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
Adolfo Nasol
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009
Emma Jane Hogbin Westby
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
Chandra Prakash Thapa
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
Russ Weakley
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Derek Christensen
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
elliotjaystocks
 
8 things to know about theming in drupal 8
8 things to know about theming in drupal 88 things to know about theming in drupal 8
8 things to know about theming in drupal 8
Logan Farr
 
Custom WordPress theme development
Custom WordPress theme developmentCustom WordPress theme development
Custom WordPress theme development
Tammy Hart
 
PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)
kuydigital
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme Development
Sitdhibong Laokok
 

What's hot (20)

Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
 
Using Core Themes in Drupal 8
Using Core Themes in Drupal 8Using Core Themes in Drupal 8
Using Core Themes in Drupal 8
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
 
The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
 
Arizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress ThemeArizona WP - Building a WordPress Theme
Arizona WP - Building a WordPress Theme
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
WordPress Theme Development for Designers
WordPress Theme Development for DesignersWordPress Theme Development for Designers
WordPress Theme Development for Designers
 
8 things to know about theming in drupal 8
8 things to know about theming in drupal 88 things to know about theming in drupal 8
8 things to know about theming in drupal 8
 
Custom WordPress theme development
Custom WordPress theme developmentCustom WordPress theme development
Custom WordPress theme development
 
PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)PSD to a Drupal Theme (using a base theme)
PSD to a Drupal Theme (using a base theme)
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme Development
 

Similar to Grok Drupal (7) Theming - 2011 Feb update

PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPress
Nile Flores
 
D7 theming what's new - London
D7 theming what's new - LondonD7 theming what's new - London
D7 theming what's new - London
Marek Sotak
 
WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4
David Bisset
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
vathur
 
Drupal Themes
Drupal ThemesDrupal Themes
Drupal Themes
akosh
 
Theming 101
Theming 101Theming 101
Theming 101
WinnipegWordcamp
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme Enlightenment
Amanda Giles
 
Word press templates
Word press templatesWord press templates
Word press templates
Dan Phiffer
 
Drupal theming
Drupal themingDrupal theming
Drupal theming
Philip Norton
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3
David Bisset
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Steven Pignataro
 
How does get template part works in twenty ten theme
How does get template part works in twenty ten themeHow does get template part works in twenty ten theme
How does get template part works in twenty ten theme
mohd rozani abd ghani
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
LinnAlexandra
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
stuplum
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
Hernan Mammana
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Gaurav Mishra
 
Functional FIPS: Learning PHP for Drupal Theming
Functional FIPS: Learning PHP for Drupal ThemingFunctional FIPS: Learning PHP for Drupal Theming
Functional FIPS: Learning PHP for Drupal Theming
Emma Jane Hogbin Westby
 
Drupal Front End PHP
Drupal Front End PHPDrupal Front End PHP
Drupal Front End PHP
Emma Jane Hogbin Westby
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
Hardeep Asrani
 
Word Camp Fukuoka2010
Word Camp Fukuoka2010Word Camp Fukuoka2010
Word Camp Fukuoka2010
YUKI YAMAGUCHI
 

Similar to Grok Drupal (7) Theming - 2011 Feb update (20)

PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPress
 
D7 theming what's new - London
D7 theming what's new - LondonD7 theming what's new - London
D7 theming what's new - London
 
WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
Drupal Themes
Drupal ThemesDrupal Themes
Drupal Themes
 
Theming 101
Theming 101Theming 101
Theming 101
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme Enlightenment
 
Word press templates
Word press templatesWord press templates
Word press templates
 
Drupal theming
Drupal themingDrupal theming
Drupal theming
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
 
How does get template part works in twenty ten theme
How does get template part works in twenty ten themeHow does get template part works in twenty ten theme
How does get template part works in twenty ten theme
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 
Functional FIPS: Learning PHP for Drupal Theming
Functional FIPS: Learning PHP for Drupal ThemingFunctional FIPS: Learning PHP for Drupal Theming
Functional FIPS: Learning PHP for Drupal Theming
 
Drupal Front End PHP
Drupal Front End PHPDrupal Front End PHP
Drupal Front End PHP
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
 
Word Camp Fukuoka2010
Word Camp Fukuoka2010Word Camp Fukuoka2010
Word Camp Fukuoka2010
 

Recently uploaded

Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 

Recently uploaded (20)

Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 

Grok Drupal (7) Theming - 2011 Feb update

  • 1. Grok Drupal Theming Laura Scott PINGV @lauras #grokd4d Drupal Design Camp LA 2011
  • 2. Laura Scott Creative Director, Drupal Architect and Co-Founder PINGV Creative "laura s" drupal.org/user/18973 Drupal since 2004 @lauras
  • 3. Grok Drupal Theming 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
  • 4. <h1 id="title"> Grok Drupal Theming </h1>
  • 5. <h1 id="title"> Grok Drupal Theming </h1> How Drupal displays content (templates) How to start theming Other things to consider
  • 6. 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 to know CSS 3 (or want basic Drupal to) architecture concepts • Drupal theming confuses • You want to learn this or mystifies you
  • 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. HTML5 is coming! http://groups.drupal.org/html5
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. Theming for Drupal 7 is more powerful than previous versions ...but it's also a bit more complicated.
  • 16.
  • 17.
  • 18.
  • 19. Anatomy of a Drupal "page" • xhtml, CSS, bg images • Content presented via templates • JavaScript
  • 20. The Drupal theme • CSS files • Image files • Template files • JavaScript files • .info file • Preprocess and process new!
  • 21. • CSS files • Image files • Template files • JavaScript files • Preprocess and process files • .info file
  • 22. Which template? It depends....
  • 23. Which template? page.tpl.php • logo • main title • regions • footer and • other templates
  • 24. Which template? html.tpl.php new! page.tpl.php • !DOCTYPE • <head> stuff • Drupal calls for CSS and JavaScript* • <body> container
  • 25. Which template? html.tpl.php page.tpl.php node.tpl.php • node title • node author • post date • node content • node taxonomy terms • node links
  • 26. Which template? html.tpl.php page.tpl.php node.tpl.php comment-wrapper.tpl.php • Comment area title? • Comment templates
  • 27. 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
  • 28. 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 *We'll come back to this, because there's one more very important thing.
  • 29. Every module's output also has a template file. (In theory.)
  • 30. 42 *.tpl.php files in D7's /modules folder. Each can be copied into your theme and used to override.
  • 31. The Views UI gives you template code to override Views output.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36. One theme might have dozens of template files.
  • 37.
  • 38. There are only a few basics. (It's not rocket science.)
  • 39. What's inside a template?
  • 41. 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; ?>>
  • 42. 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>
  • 43. 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>
  • 44. <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>
  • 46. 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 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 -->
  • 47. 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 that's debated
  • 48. <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 -->
  • 49. <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 -->
  • 51. 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>
  • 52. 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>
  • 54. comment-wrapper.tpl.php <div id="comments" class="<?php print $classes; ?>"<?php print $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('Add new comment'); ?></h2> <?php print render($content['comment_form']); ?> <?php endif; ?> </div>
  • 56. 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>
  • 58. block.tpl.php <div id="<?php print $block_html_id; ?>" 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>
  • 59. block.tpl.php <div id="<?php print $block_html_id; ?>" 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>
  • 60. polls
  • 61. node.tpl.php node.tpl.php poll-vote.tpl.php poll-results.tpl.php poll-bar.tpl.php
  • 62. block.tpl.php block.tpl.php poll-vote.tpl.php poll-results--block.tpl.php poll-bar--block.tpl.php
  • 63. Fields are in core It's nice to have a home.
  • 65. 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>
  • 66.
  • 67. html.tpl.php page.tpl.php node.tpl.php block.tpl.php comment-wrapper.tpl.php comment.tpl.php
  • 68. 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
  • 70. region.tpl.php <?php if ($content): ?> <div class="<?php print $classes; ?>"> <?php print $content; ?> </div> <?php endif; ?>
  • 71. So if all regions use the same template, how does Drupal know which region?
  • 72.
  • 74. <?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']); ?>
  • 75. All regions in your theme must be declared, or else you get these defaults.
  • 76. Where the heck are all these templates?
  • 78.
  • 80.
  • 81. Everything is an array pretty much
  • 82. So how to go about creating a theme?
  • 83. 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
  • 84. or make a baby!
  • 87. Inheritance html.tpl.php page.tpl.php page.tpl.php node.tpl.php node.tpl.php block.tpl.php
  • 88. Inheritance html.tpl.php html.tpl.php page.tpl.php page.tpl.php node.tpl.php node.tpl.php block.tpl.php
  • 89. Inheritance base.css base.css type.css type.css forms.css
  • 90. Many good base themes
  • 91. Copy in the base theme example.com/themes/ example.com/sites/all/themes/basetheme
  • 92. Create your child theme example.com/themes/ example.com/sites/all/themes/yourtheme
  • 93. sites all themes yourtheme yourtheme.info template.php license.txt css images templates
  • 95. 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
  • 96. 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
  • 97. In Drupal 7, if you're creating a theme from scratch, you must now declare style.css and script.js in your .info file, or they will not be included.
  • 98. 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
  • 99. 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
  • 100. 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
  • 101. 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
  • 102. Delimiters use two: '--' Words still use one: '-' event-meeting node--event-meeting.tpl.php event-party node--event-party.tpl.php
  • 103. new! And no longer need node.tpl.php in your theme in order to use node--event.tpl.php.
  • 104. new! Wildcards in tpl names page--user--42.tpl.php page--user--%.tpl.php override all user displays without affecting /user
  • 105. new! .clear-block is now .clearfix
  • 107. Conditional CSS still needs trickery //IE6 overrides drupal_add_css( path_to_theme() . '/fix-ie.css', array( 'group' => CSS_THEME, 'browsers' => array( 'IE' => 'lt IE 7', '!IE' => FALSE ), 'preprocess' => FALSE ) );
  • 108. new! Classes and Attributes are now standard and predefined without futzing (although you can still futz if you want).
  • 109. <div id="example" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> ... </div>
  • 110. node.tpl.php <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> ... </div>
  • 111. Attributes new! • $attributes • $title_attributes for titles • $content_attributes for content
  • 112. <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>
  • 113. Be nice to robots! photo: Don Solo flickr.com/photos/donsolo/3950364004/
  • 114. RDFa • Robot food • An entire language to learn • Theming just got a lot more technical photo: Don Solo flickr.com/photos/donsolo/3950364004/
  • 116. Robots just want to Hand over I'm hungry! your RDF! understand your site. Hmmmmm…. data….. Image: bbaltimore flickr.com/photos/bbaltimore/6778028/
  • 117. Dance with them! It's easy! Image: Eric__I_E flickr.com/photos/deadling/256390679/
  • 118. 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; ?>>
  • 119. 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; ?>>
  • 120. 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; ?>>
  • 121. 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; ?>>
  • 122. 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; ?>>
  • 123. 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; ? >">
  • 124. 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/
  • 125. Attributes • $attributes • $title_attributes for titles • $content_attributes for content
  • 126. 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
  • 127. Points of Modification • CSS • xhtml in the template that applies • preprocess • module
  • 128. 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
  • 129.
  • 130. 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/ aZe33
  • 131. @lauras rarepattern.com/contact ©2010 Laura Scott
  • 132. Questions? @lauras