Your SlideShare is downloading. ×
Grok Drupal
Theming
Laura
PINGV
@lauras   #grokd4d
Laura
Laura                    pal
                      tor, Drunder
     Cr eative DinecCo-Fou
                  r
     Ar chi...
@lauras
#grokd4d
@lauras
          #grokd4d


http://sf2010.drupal.org/
  node/add/eval/8278
More on Drupal
Theming this week
More on Drupal
    Theming this week
• Theming with Skinr! (Jacine Rodriguez) —
  Right after this session, right here in ...
Grok Drupal
Grok Drupal
Grok means to understand so thoroughly
that the observer becomes a part of the
observed — to merge, blend, int...
Grok Drupal
<h1 id="title"> Grok Drupal   </h1>
<h1 id="title"> Grok Drupal   </h1>
<h1 id="title"> Grok Drupal              </h1>



    How Drupal displays content (templates)
<h1 id="title"> Grok Drupal              </h1>



    How Drupal displays content (templates)

             How to start t...
<h1 id="title"> Grok Drupal              </h1>



    How Drupal displays content (templates)

             How to start t...
Assumptions
Assumptions
•   You know HTML/xhtml
Assumptions
•   You know HTML/xhtml

•   You know CSS 2.1
Assumptions
•   You know HTML/xhtml

•   You know CSS 2.1

•   You are at least getting
    to know CSS 3 (or want
    to)
Assumptions
•   You know HTML/xhtml

•   You know CSS 2.1

•   You are at least getting
    to know CSS 3 (or want
    to)...
Assumptions
•   You know HTML/xhtml        •   You don't know PHP
                                   (but if you do, we wo...
Assumptions
•   You know HTML/xhtml        •   You don't know PHP
                                   (but if you do, we wo...
Assumptions
•   You know HTML/xhtml        •   You don't know PHP
                                   (but if you do, we wo...
Some PHP required
• Mainly to print pre-defined variables …
  e.g., $title (for the page title).
• You can do a lot in the ...
Drupal 7 is more
complex than Drupal 6
     ...but it's also more simple
Anatomy of a Drupal "page"


            •   xhtml, CSS, images
Anatomy of a Drupal "page"


            •   xhtml, CSS, images


            •   Content presented via
                te...
Anatomy of a Drupal "page"


            •   xhtml, CSS, images


            •   Content presented via
                te...
The Drupal theme
The Drupal theme
 • CSS files
 • Image files
 • Template files
 • JavaScript files
 • Preprocess and process files
 • .info file
The Drupal theme
 • CSS files
 • Image files
 • Template files
 • JavaScript files
 • Preprocess and process files
 • .info file
• CSS files
• Image files
• Template files
• JavaScript files
• Preprocess and process files
• .info file
Which template?
Which template?




                  It depends....
Which template?
Which template?
                  page.tpl.php


                   •   logo
                   •   main title
           ...
Which template?   html.tpl.php
                                          new!
                  page.tpl.php




         ...
Which template?   html.tpl.php
                  page.tpl.php
                  node.tpl.php
                  • node titl...
Which template?   html.tpl.php
                  page.tpl.php
                  node.tpl.php




                  comment...
Which template?   html.tpl.php
                  page.tpl.php
                  node.tpl.php




                  comment...
Which template?   html.tpl.php
                  page.tpl.php
                  node.tpl.php              block.tpl.php
  ...
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.
There are only
  a few basics.


  (It's not rocket science.)
What's inside a
 template?
html.tpl.php
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.tpl.php
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
   "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
 ...
html.tpl.php
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
   "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
 ...
html.tpl.php
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
   "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
 ...
html.tpl.php
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
   "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
 ...
<body class="<?php print $classes; ?>" <?php print
$attributes;?>>
  <div id="skip-link">
    <a href="#main-content"><?ph...
<body class="<?php print $classes; ?>" <?php print
$attributes;?>>
  <div id="skip-link">
    <a href="#main-content"><?ph...
page.tpl.php
page.tpl.php
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
page.tpl.php
  <div id="page-wrapper"><div id="page">

    <div id="header"><div class="section clearfix">

      <?php if...
The Semantic Page
• Logo/branding/site name
• [main nav]*
• <h1> Title (of article, view, blog post, etc.)
• Main content
...
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Upcoming SlideShare
Loading in...5
×

Grok Drupal (7) Theming (presented at DrupalCon San Francisco)

3,806

Published on

This is now DEPRECATED. Please see Grok Drupal (7) Theming, February 11 Update

These are slides for my presentation at DrupalCon San Francisco, April 2010.

There is <a>audio/video of the presentation at the DCSF website</a>.

My apologies for the extraneous slides -- that's how Slideshare converted my Keynote file.

Published in: Design
2 Comments
7 Likes
Statistics
Notes
  • Updated and expanded slides from my presentation at Drupal Design Camp LA 2011 are now posted. View my slideshows to find it, or copy/paste this url http://www.slideshare.net/laurascott/grok-drupal-7-theming-2011-feb-update
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • My apologies for the extraneous (semi-)blank slides. That's how Slideshare converted the Keynote file. I wish I could edit them out of the final.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,806
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

  • About me
  • About me
  • About me
  • About me
  • About me
  • About me
  • About me
  • About me
  • About me
  • About me
  • About me
  • Most of the most interesting theming sessions have already happened

    But stay here in this room for Jacine&apos;s session.

    -
    If you care about clean markup, check out Morten&apos;s session tomorrow

    -
    On Thursday is the big sprint. Even if you&apos;re new, come join in. Lots of breakout groups.
  • Most of the most interesting theming sessions have already happened

    But stay here in this room for Jacine&apos;s session.

    -
    If you care about clean markup, check out Morten&apos;s session tomorrow

    -
    On Thursday is the big sprint. Even if you&apos;re new, come join in. Lots of breakout groups.
  • Most of the most interesting theming sessions have already happened

    But stay here in this room for Jacine&apos;s session.

    -
    If you care about clean markup, check out Morten&apos;s session tomorrow

    -
    On Thursday is the big sprint. Even if you&apos;re new, come join in. Lots of breakout groups.





  • * MOSTLY templates, but more than templates
  • * MOSTLY templates, but more than templates
  • * MOSTLY templates, but more than templates








  • The bad news

    The good news
  • The bad news

    The good news
  • Gross oversimplifcation

  • Gross oversimplifcation

  • Gross oversimplifcation

  • Gross oversimplifcation











  • Templates are the most involved, but provide the foundation for theming

  • The question is when you come to a page...

    which template applies?

    And the answer is clear:

    [X]

    It depends
  • The question is when you come to a page...

    which template applies?

    And the answer is clear:

    [X]

    It depends
  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**

  • because a Drupal page has many templates controlling the output presentation.

    Let&apos;s start with the basics

    [X] page.tpl.php **now don&apos;t fret over that php extension on the filename - get into it later**












  • What&apos;s this? It&apos;s new in D7.

    So where is the page template?
  • RDF namespaces we&apos;ll get into later

  • First is the doctype declaration. We&apos;ll get a bit more into that later.
    [X]
    Then is the head information
    Yes, there is PHP, but look at how simple and contained it is.
    Scared? If you leave the stuff between the php tags, you&apos;ll be fine
    [X]
    Then is the body.
    An example of the power you have. Look at that ugly &quot;skip-link&quot; div. Why?
    [X] (to focus)
  • The anchor tag could be given that id and you could skip that div.
    This is the power of templates. You can change this kind of stuff.

    Aside: If you define custom regions, it is important to remember that you need to include the page_top and page_bottom regions in your set of regions.






























  • One of my things is why sidebar blocks would have h2 tags.

    If you&apos;re looking at a river of news, nodes will have h2 tags for their titles.

    The blocks should have h3 tags at the least. This is supplementary info with a lower semantic importance.







  • Life is good, because

    [X]

    fields are now in core

  • Life is good, because

    [X]

    fields are now in core

  • Life is good, because

    [X]

    fields are now in core

  • Life is good, because

    [X]

    fields are now in core

  • Life is good, because

    [X]

    fields are now in core

  • Life is good, because

    [X]

    fields are now in core




  • My previous chart was omitting a big thing.
    Left out to focus on what we see
    But now let&apos;s get into it:

    [x} REGIONS

  • My previous chart was omitting a big thing.
    Left out to focus on what we see
    But now let&apos;s get into it:

    [x} REGIONS




  • Every region has its own content, own blocks.

    The tpl file is just a potato sack.

    The sack is the same, but what&apos;s in it makes the sack different.
  • So when printing, you tell Drupal which sack is printing.

    The syntax in Drupal 7 is new, but it&apos;s a simple, consistent syntax

    Header

    [X]


  • So when printing, you tell Drupal which sack is printing.

    The syntax in Drupal 7 is new, but it&apos;s a simple, consistent syntax

    Header

    [X]


  • So when printing, you tell Drupal which sack is printing.

    The syntax in Drupal 7 is new, but it&apos;s a simple, consistent syntax

    Header

    [X]


  • So when printing, you tell Drupal which sack is printing.

    The syntax in Drupal 7 is new, but it&apos;s a simple, consistent syntax

    Header

    [X]


  • So when printing, you tell Drupal which sack is printing.

    The syntax in Drupal 7 is new, but it&apos;s a simple, consistent syntax

    Header

    [X]


  • So when printing, you tell Drupal which sack is printing.

    The syntax in Drupal 7 is new, but it&apos;s a simple, consistent syntax

    Header

    [X]


  • So when printing, you tell Drupal which sack is printing.

    The syntax in Drupal 7 is new, but it&apos;s a simple, consistent syntax

    Header

    [X]




  • We&apos;ll get into where and how to get started in a moment.

    There&apos;s one more major part of the Drupal theming system you&apos;ll want to be aware of.






  • Think of it as a way of adding your own creation to the templates

  • So with all of these templates, where do you start?
  • One way


    or [X]

  • Subthemes inherit everything, except what&apos;s overridden

    Which makes them the best and easiest way to &quot;modify&quot; a theme.
  • As an illustration

  • Same goes for templates.

    And JavaScripts.




  • You may want to put your theme in the themes folder
    Makes sense, right?

    [X]

    Don&apos;t do that!
  • You may want to put your theme in the themes folder
    Makes sense, right?

    [X]

    Don&apos;t do that!
  • You may want to put your theme in the themes folder
    Makes sense, right?

    [X]

    Don&apos;t do that!








  • You can define custom specific templates by using &quot;template suggestions&quot;

    [X]

    For example, node templates can be made for each content type

    [X]

    Note something new in Drupal 7
  • You can define custom specific templates by using &quot;template suggestions&quot;

    [X]

    For example, node templates can be made for each content type

    [X]

    Note something new in Drupal 7
  • You can define custom specific templates by using &quot;template suggestions&quot;

    [X]

    For example, node templates can be made for each content type

    [X]

    Note something new in Drupal 7
  • You can define custom specific templates by using &quot;template suggestions&quot;

    [X]

    For example, node templates can be made for each content type

    [X]

    Note something new in Drupal 7
  • Note something new in Drupal 7

    You now use a double-hyphen delimiter
  • Note something new in Drupal 7

    You now use a double-hyphen delimiter
  • Note something new in Drupal 7

    You now use a double-hyphen delimiter
  • Note something new in Drupal 7

    You now use a double-hyphen delimiter
  • Word phrases still use one hyphen.

    For example.
  • Word phrases still use one hyphen.

    For example.
  • Word phrases still use one hyphen.

    For example.
  • Word phrases still use one hyphen.

    For example.
  • Word phrases still use one hyphen.

    For example.
  • Word phrases still use one hyphen.

    For example.
  • Word phrases still use one hyphen.

    For example.

  • Resource Description Framework

    More technical because the theming layer is presenting more things that you cannot see, but robots CAN see
  • Resource Description Framework

    More technical because the theming layer is presenting more things that you cannot see, but robots CAN see
  • Resource Description Framework

    More technical because the theming layer is presenting more things that you cannot see, but robots CAN see
  • Robots don&apos;t have to be scary
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends
  • Robots are your friends











  • And the biggest resource of all is Drush.

  • And the biggest resource of all is Drush.

  • And the biggest resource of all is Drush.

  • And the biggest resource of all is Drush.





  • Transcript of "Grok Drupal (7) Theming (presented at DrupalCon San Francisco)"

    1. 1. Grok Drupal Theming Laura PINGV @lauras #grokd4d
    2. 2. Laura
    3. 3. Laura pal tor, Drunder Cr eative DinecCo-Fou r Ar chitect eatd e a iv PING V Cr drupal.org/u ser/18973 Drupal since 2004 @lauras #grokd4d
    4. 4. @lauras #grokd4d
    5. 5. @lauras #grokd4d http://sf2010.drupal.org/ node/add/eval/8278
    6. 6. More on Drupal Theming this week
    7. 7. 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!
    8. 8. Grok Drupal
    9. 9. Grok Drupal 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
    10. 10. Grok Drupal
    11. 11. <h1 id="title"> Grok Drupal </h1>
    12. 12. <h1 id="title"> Grok Drupal </h1>
    13. 13. <h1 id="title"> Grok Drupal </h1> How Drupal displays content (templates)
    14. 14. <h1 id="title"> Grok Drupal </h1> How Drupal displays content (templates) How to start theming
    15. 15. <h1 id="title"> Grok Drupal </h1> How Drupal displays content (templates) How to start theming Other things to consider
    16. 16. Assumptions
    17. 17. Assumptions • You know HTML/xhtml
    18. 18. Assumptions • You know HTML/xhtml • You know CSS 2.1
    19. 19. Assumptions • You know HTML/xhtml • You know CSS 2.1 • You are at least getting to know CSS 3 (or want to)
    20. 20. Assumptions • You know HTML/xhtml • You know CSS 2.1 • You are at least getting to know CSS 3 (or want to) • Drupal theming confuses or mystifies you
    21. 21. 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 to know CSS 3 (or want to) • Drupal theming confuses or mystifies you
    22. 22. 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 or mystifies you
    23. 23. 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
    24. 24. 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 '?>'.
    25. 25. Drupal 7 is more complex than Drupal 6 ...but it's also more simple
    26. 26. Anatomy of a Drupal "page" • xhtml, CSS, images
    27. 27. Anatomy of a Drupal "page" • xhtml, CSS, images • Content presented via templates
    28. 28. Anatomy of a Drupal "page" • xhtml, CSS, images • Content presented via templates • JavaScript
    29. 29. The Drupal theme
    30. 30. The Drupal theme • CSS files • Image files • Template files • JavaScript files • Preprocess and process files • .info file
    31. 31. The Drupal theme • CSS files • Image files • Template files • JavaScript files • Preprocess and process files • .info file
    32. 32. • CSS files • Image files • Template files • JavaScript files • Preprocess and process files • .info file
    33. 33. Which template?
    34. 34. Which template? It depends....
    35. 35. Which template?
    36. 36. Which template? page.tpl.php • logo • main title • regions • footer and • other templates
    37. 37. Which template? html.tpl.php new! page.tpl.php • !DOCTYPE • <head> stuff • Drupal calls for CSS and JavaScript* • <body> container
    38. 38. Which template? html.tpl.php page.tpl.php node.tpl.php • node title • node author • post date • node content • node taxonomy terms • node links
    39. 39. Which template? html.tpl.php page.tpl.php node.tpl.php comment-wrapper.tpl.php • Comment area title? • Comment templates
    40. 40. 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
    41. 41. 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
    42. 42. Every module's output also has a template file. (In theory.)
    43. 43. 42 *.tpl.php files in D7's /modules folder. Each can be copied and used to override.
    44. 44. One theme might have dozens of template files.
    45. 45. There are only a few basics.
    46. 46. There are only a few basics. (It's not rocket science.)
    47. 47. What's inside a template?
    48. 48. html.tpl.php
    49. 49. html.tpl.php
    50. 50. 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; ?>>
    51. 51. 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; ?>>
    52. 52. 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>
    53. 53. 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>
    54. 54. 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>
    55. 55. <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>
    56. 56. <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>
    57. 57. page.tpl.php
    58. 58. page.tpl.php
    59. 59. 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"> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /> </a> <?php endif; ?> <?php if ($site_name || $site_slogan): ?> <div id="name-and-slogan"> <?php if ($site_name): ?> <?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"> <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): ?> <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 --> </div></div> <!-- /#page, /#page-wrapper -->
    60. 60. 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'); ?>" /> </a> <?php endif; ?> <?php if ($site_name || $site_slogan): ?> <div id="name-and-slogan"> <?php if ($site_name): ?> <?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"> <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): ?> <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 --> </div></div> <!-- /#page, /#page-wrapper -->
    61. 61. 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): ?> <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"> <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): ?> <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 --> </div></div> <!-- /#page, /#page-wrapper -->
    62. 62. 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"> <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): ?> <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 --> </div></div> <!-- /#page, /#page-wrapper -->
    63. 63. 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): ?> <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 --> </div></div> <!-- /#page, /#page-wrapper -->
    64. 64. 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']); ?> </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 --> </div></div> <!-- /#page, /#page-wrapper -->
    65. 65. 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'))); ?> </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 --> </div></div> <!-- /#page, /#page-wrapper -->
    66. 66. 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; ?> <?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 --> </div></div> <!-- /#page, /#page-wrapper -->
    67. 67. 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"> <?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 --> </div></div> <!-- /#page, /#page-wrapper -->
    68. 68. 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; ?> <?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 --> </div></div> <!-- /#page, /#page-wrapper -->
    69. 69. 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 --> <?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 --> </div></div> <!-- /#page, /#page-wrapper -->
    70. 70. 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 --> <?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 --> </div></div> <!-- /#page, /#page-wrapper -->
    71. 71. 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' => 'secondary-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Secondary menu'))); ?> <?php print render($page['footer']); ?> </div></div> <!-- /.section, /#footer --> </div></div> <!-- /#page, /#page-wrapper -->
    72. 72. 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' => 'secondary-menu', 'class' => array('links', 'clearfix')), 'heading' => t('Secondary menu'))); ?> sidebars <?php print render($page['footer']); ?> </div></div> <!-- /.section, /#footer --> </div></div> <!-- /#page, /#page-wrapper -->
    73. 73. 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 -->
    74. 74. 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

    ×