Grok Drupal (7) Theming

!"#$%&"'()*%+,-./01!"#$"%&'()*+,-.%/$0"120

34"#$"5 67$(89:9

9$#;"4<($7=#50$=>?@AB

!"#$"%&'()/$0"120%CD$0'E(

$F%C$#;"4%G$'HDE0'E%

"I9%/(JK(#I90$

*+,-.%/$0"120

34"#$"5

C$#;"4%5DI'0%LMM:

67$(89:9

34"#$"5

67$(89:9

http://sf2010.drupal.org/node/add/eval/8278

More on Drupal Theming this week

• Theming with Skinr! (Jacine Rodriguez) — Right after this session, right here in this room.

• All your html are belong to us (Morten) — Wednesday at 4:15pm.

• Sprint on Thursday — Free! Open! Friendly!

!"#$%&"'()*%+,-./01

Grok means to understand so thoroughly that the observer becomes a part of the observed — to merge, blend, intermarry,

lose identity in group experience.

Robert A. Heinlein, Stranger in a Strange Land

!"#$%&"'()*%+,-./01<h1 id="title"> </h1>

How Drupal displays content (templates)

How to start theming

Other things to consider

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

• You don't know PHP(but if you do, we won't hold it against you)

• You understand some basic Drupal architecture concepts

• You want to learn this

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 '?>'.

Drupal 7 is more complex than Drupal 6

...but it's also more simple

Anatomy of a Drupal "page"

• xhtml, CSS, images

• Content presented via templates

• JavaScript

The Drupal theme

• CSS files

• Image files

• Template files

• JavaScript files

• Preprocess and process files

• .info file

Which template?

It depends....

Every module's output also has a template file.

(In theory.)

42 *.tpl.php files in D7's /modules folder.

Each can be copied and used to override.

One theme might have dozens of

template files.

There are only a few basics.

(It's not rocket science.)

What's inside a template?

html.tpl.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>>

html.tpl.php

html.tpl.php

page.tpl.php

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

<?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>  <?php endif; ?>

<?php print render($page['header']); ?>

</div></div>

<?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>  <?php endif; ?>

<?php if ($breadcrumb): ?> <div id="breadcrumb"><?php print $breadcrumb; ?></div> <?php endif; ?>

<?php print $messages; ?>

<?php if ($page['sidebar_first']): ?> <div id="sidebar-first" class="column sidebar"><div class="section"> <?php print render($page['sidebar_first']); ?> </div></div>  <?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>  <?php endif; ?>

</div></div>

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

</div></div>

logosite namesite sloganmain menubreadcrumb

messages

highight<h1> title

tabshelp

content

sidebarsfooter

sidebarsfeed icons

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

page.tpl.php

<?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>  <?php if ($page['sidebar_first']): ?> <div id="sidebar-first" class="column sidebar"><div class="section"> <?php print render($page['sidebar_first']); ?> </div></div>  <?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>  <?php endif; ?> </div></div>

page.tpl.php

node.tpl.php

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>

<?php print $user_picture; ?>

<?php print render($title_prefix); ?> <?php if (!$page): ?> <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2> <?php endif; ?> <?php print render($title_suffix); ?>

<?php if ($display_submitted): ?> <div class="submitted"> <?php print t('Submitted by !username on !datetime', array('!username' => $name, '!datetime' => $date)); ?> </div> <?php endif; ?>

<?php print render($content['links']); ?>

<?php print render($content['comments']); ?>

</div>

node.tpl.php

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>

<?php print $user_picture; ?>

<?php print render($title_prefix); ?> <?php if (!$page): ?> <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2> <?php endif; ?> <?php print render($title_suffix); ?>

<?php if ($display_submitted): ?> <div class="submitted"> <?php print t('Submitted by !username on !datetime', array('!username' => $name, '!datetime' => $date)); ?> </div> <?php endif; ?>

<?php print render($content['links']); ?>

</div>

block.tpl.php

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>

<?php print render($title_prefix); ?><?php if ($block->subject): ?> <h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2><?php endif;?> <?php print render($title_suffix); ?>

block.tpl.php

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>

<?php print render($title_prefix); ?><?php if ($block->subject): ?> <h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2><?php endif;?> <?php print render($title_suffix); ?>

comment-wrapper.tpl.php

<div id="comments" class="<?php print $classes; ?>"<?php print $attributes; ?>> <?php if ($content['comments'] && $node->type != 'forum'): ?> <h2 class="title"><?php print t('Comments'); ?></h2> <?php endif; ?>

<?php if ($content['comment_form']): ?> <h2 class="title comment-form"><?php print t('Add new comment'); ?></h2> <?php print render($content['comment_form']); ?> <?php endif; ?></div>

comment.tpl.php

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> <?php print $picture ?>

<?php if ($new): ?> <span class="new"><?php print $new ?></span> <?php endif; ?>

<?php print render($title_prefix); ?> <h3<?php print $title_attributes; ?>><?php print $title ?></h3> <?php print render($title_suffix); ?>

<div class="submitted"> <?php print $permalink; ?> <?php print t('Submitted by !username on !datetime.', array('!username' => $author, '!datetime' => $created)); ?> </div>

<?php print render($content['links']) ?></div>

node.tpl.php node.tpl.php

poll-vote.tpl.php poll-results.tpl.php

poll-bar.tpl.php

block.tpl.php block.tpl.php

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

poll-bar--block.tpl.php

Fields are in core It's nice tohave a home.

field.tpl.php

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> <?php if (!$label_hidden) : ?> <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>: </div> <?php endif; ?> <div class="field-items"<?php print $content_attributes; ?>> <?php foreach ($items as $delta => $item) : ?> <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div> <?php endforeach; ?> </div></div>

page.tpl.php

node.tpl.php

comment-wrapper.tpl.phpcomment.tpl.php

block.tpl.php

html.tpl.php

page.tpl.php

node.tpl.php

comment-wrapper.tpl.phpcomment.tpl.php

block.tpl.php

html.tpl.php

region.tpl.php

region.tpl.php region.tpl.php

region.tpl.php

So if all regions use the same template,how does Drupal know which region?

<?php print render($page['content']); ?>

<?php print render($page['sidebar_first']); ?>

<?php print render($page['sidebar_second']); ?>

<?php print render($page['footer']); ?>

<?php print render($page['help']); ?>

<?php print render($page['highlight']); ?>

All regions in your theme must be declared,or else you get these defaults.

Where the heck are all these templates?

example.com/modules

BUT DON'T EDIT THEM THERE!

scaryPreprocessdoesn't have to be

!"!#$%&!"!#$%&

'&()*+#',-./0,&-'&()*+#',-./0,&-

!"#$%%&#'&()#*+,-.(#

!""#$%!&'()*+*,!"!-.+"!"!///-%!&'()*+*,!"!-.+"!

May I recommend....PHP for Drupal Designers,

by Emma Jane Hogbindesigntotheme.com

So how to go about creating a theme?

• theme .info file

• page.tpl.php

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

• template.php for your preprocess and postprocess

• background images

Create a theme from scratch, making everything

or make a baby!

Sub-themesinherit everything from parent theme,except what is overridden.

base.css

Inheritance

style.css

forms.css

style.css

base.css

page.tpl.php

Inheritance

node.tpl.php

block.tpl.php

node.tpl.php

page.tpl.php

Many good base themes

• AdaptiveTheme

• Basic

• Blueprint

• Framework

• Fusion

• Genesis

• Mobile

• NineSixty

• Stark

• Studio

• Zen

Create your theme

example.com/themes/

Create your theme

example.com/themes/

example.com/sites/all/themes/yourtheme

yourtheme.info

name = yourthemedescription = This is where you describe your theme in words.version = 1.0

; Requirementsbase theme = ninesixtycore = 7.xengine = phptemplate

; Stylesheetsstylesheets[screen][] = styles/base.cssstylesheets[screen][] = styles/layout.cssstylesheets[screen][] = styles/colors.cssstylesheets[screen][] = styles/forms.cssstylesheets[print][] = styles/print.css

; Regionsregions[header] = Headerregions[help] = Helpregions[highlight] = Highlightregions[content] = Contentregions[page_top] = Page topregions[page_bottom] = Page bottomregions[indicators] = Indicatorsregions_hidden[] = indicators

; Scriptsscripts[] = scripts/twitter.js

yourtheme.info

name = yourthemedescription = This is where you describe your theme in words.version = 1.0

; Requirementsbase theme = ninesixtycore = 7.xengine = phptemplate

; Stylesheetsstylesheets[screen][] = styles/base.cssstylesheets[screen][] = styles/layout.cssstylesheets[screen][] = styles/colors.cssstylesheets[screen][] = styles/forms.cssstylesheets[print][] = styles/print.css

; Regionsregions[header] = Headerregions[help] = Helpregions[highlight] = Highlightregions[content] = Contentregions[page_top] = Page topregions[page_bottom] = Page bottomregions[indicators] = Indicatorsregions_hidden[] = indicators

; Scriptsscripts[] = scripts/twitter.js

Template Suggestions

• Create a base template of that type

• Create variations on it to apply in certain circumstances

• No coding necessary

http://drupal.org/node/190815

blogeventclassifiedproduct

by content type

node--blog.tpl.phpnode--event.tpl.phpnode--classified.tpl.phpnode--product.tpl.php

node.tpl.php

blogeventclassifiedproduct

by content type

node--blog.tpl.phpnode--event.tpl.phpnode--classified.tpl.phpnode--product.tpl.php

node.tpl.php new!

Delimiters use two: '--'Words still use one: '-'

event-meeting

event-party

node--event-meeting.tpl.php

node--event-party.tpl.php

Be nice to robots!

photo: Don Soloflickr.com/photos/donsolo/3950364004/

• Robot food

• An entire language to learn

• Theming just got a lot more technical

Image: Davie60rflickr.com/photos/davie60r/3274499595/

Image: bbaltimoreflickr.com/photos/bbaltimore/6778028/

Robots just want to understand your site.I'm hungry!

Hmmmmm…. data…..

Hand over your RDF!

It's easy!

Image: Eric__I_Eflickr.com/photos/deadling/256390679/

Dance withthem!

html.tpl.php

Do I really need to do RDFa to use

Drupal?

No, you can just ignore it, and work on the same level as other systems.But you'll be missing

Photo: FlySiflickr.com/photos/flysi/183272970/

Points of Modification

• CSS

• xhtml in the template that applies

• preprocess

• module

Basics to Remember

• Create your theme insites/all/themes/yourtheme

• Copy templates into your theme to make overrides

• Use template suggestions to break out distinct structures and stylings

• Use base theme to get a jump on things

• Let Drupal do what it does best

Resources

• Drupal 6 » Drupal 7 theming changesdrupal.org/update/theme/6/7

• Template suggestionsdrupal.org/node/190815*

• RDFabuytaert.net/semantic-web-and-drupal-video

* Drupal 6

Get Drush!

Yeah yeah yeah, I know, you don't like command line, but this will really really and for true help you save time developing so that you can spend more time designing and theming, and isn't that what you'd rather do anyway?

Video to make it easy:

http://is.gd/aZe33

@lauras #d4dgrokrarepattern.com/contact

Questions?

http://sf2010.drupal.org/node/add/eval/8278

Feedback is good!@lauras #grokd4d

Grok Drupal (7) Theming

Design

Transcript of Grok Drupal (7) Theming

Introducción a drupal theming

Agile theming with kalatheme & panopoly

Designing and Theming Drupal for Mobile Devices

MEAN e Drupal - Drupal day 2014

Deep into Drupal Theming Layer

César López Galindo - Atlas de la región de Grok

Introducció a Theming amb Drupal 7

Drupal empezando con drupal

Drupal theming met sass, compass, susy en aurora

DÉCOUVRIR DRUPAL LE THEMING - lequipe.tech · PRÉSENTATION QUI SUIS-JE ? FLORIS MORICEAU Une photo de moi. ‣ Développeur Front-End chez L’équipe.tech (HTML / CSS / UI / UX

Leds-C4 - Grok - spanyol design, spanyol gyártás

Grok web application framework

Grok News 2014

Leds c4 grok 2015

2016/03/03 01:43 1/27 OpenBox theming OpenBox theming ... › Docs › noDE › openbox › openbox_theming.pdf · explication: Parentrelative. ParentRelative signiﬁe que l'élément

IKT-Frumo 2007 Accessible Drupal Erweitern das System. Accessible Drupal C. ahrengrubF er IKT-Frumo 2007 Einleitung Grundlagen Theming Module Editor Zusammenfassung Wichtige Begri

Theming En Drupal

Drupal - für Ein- und Umsteiger · Live Blogs from Joomla, Drupal, Wordpress Events Adaptive, Responsive, Mobile First and Drupal Theming for the Future August 24, 2011 This is a

ABC theming en Drupal7

Visão Geral Drupal - Natura Drupal Day