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.
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!
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
18. Assumptions
• You know HTML/xhtml
• You know CSS 2.1
19. Assumptions
• You know HTML/xhtml
• You know CSS 2.1
• You are at least getting
to know CSS 3 (or want
to)
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. 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. 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. 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. 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.
26. Drupal 7 is more
complex than Drupal 6
...but it's also more simple
80. 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
Editor's Notes
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's session.
-
If you care about clean markup, check out Morten's session tomorrow
-
On Thursday is the big sprint. Even if you'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's session.
-
If you care about clean markup, check out Morten's session tomorrow
-
On Thursday is the big sprint. Even if you'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's session.
-
If you care about clean markup, check out Morten's session tomorrow
-
On Thursday is the big sprint. Even if you'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don'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's start with the basics
[X] page.tpl.php **now don't fret over that php extension on the filename - get into it later**
What's this? It's new in D7.
So where is the page template?
RDF namespaces we'll get into later
First is the doctype declaration. We'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'll be fine
[X]
Then is the body.
An example of the power you have. Look at that ugly "skip-link" 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'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'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'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'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'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'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'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'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'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'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's a simple, consistent syntax
Header
[X]
We'll get into where and how to get started in a moment.
There's one more major part of the Drupal theming system you'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's overridden
Which makes them the best and easiest way to "modify" 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't do that!
You may want to put your theme in the themes folder
Makes sense, right?
[X]
Don't do that!
You may want to put your theme in the themes folder
Makes sense, right?
[X]
Don't do that!
You can define custom specific templates by using "template suggestions"
[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 "template suggestions"
[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 "template suggestions"
[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 "template suggestions"
[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