How to create a Drupal theme (Dut

How to create a Drupal theme
Nicky Rutten

Nicky Rutten

Founder / Creative director @ Prêt à utiliser

Docent @ Karel de Grote Hogeschool

Webdesign, typograﬁe, sigaren, whisky en basketball

@ruttennicky
2

Prêt à utiliser

Digital agency

Opleidingen & consultancy

Webdesign & development

Mobile

3

We really love Drupal !
4

Drupal theming

Presentatie laag

Geen website maar web systeem

Wireframes zijn cruciaal (structuur)

Consistentie is belangrijk

5

Drupal theming

Altijd in sites/all/themes !

6

Drupal theming

Verzameling van bestanden (thema.info, *.tpl.php, template.php)

HTML met stukjes PHP (Drupal zet de PHP om in inhoud)

vb: Themanaam = dcg2012

Map : dcg2012

Bestand : dcg2012.info
Bestand : page.tpl.php
... 7

html.tpl.php

page.tpl.php

node.tpl.php block.tpl.php

block.tpl.php

.info ﬁle (verplicht)

Altijd de naam van de theme en map (vb : dcg2012 & dcg2012.info)

Deﬁnitie van:

Thema details (naam, versie, ...)
CSS bestanden
JavaScript bestanden
Thema regio’s
Thema opties (logo, slogan, ...)

html.tpl.php

!Doctype (Standaard: xHTML + RDFa)

Header: CSS + JavaScript + Favicon + Meta + ...

Body container (alleen de container, GEEN inhoud)

page.tpl.php

Inhoud van de <body> container

Uitprinten van regio’s (gedeﬁnieerd in het .info bestand)

Gebruik altijd <?php print render($page[‘...’]); ?> voor regio’s

Variabelen : $is_front, $logged_in, $logo, $front_page, ...

node.tpl.php

Inhoud van een werkelijk " artikel "

Voorkeur aan modules : Display Suite, panels and views

comment.tpl.php

Opmaak van comments bij een node

ﬁeld.tpl.php

Opmaak van aangepaste velden van een node

region.tpl.php

Meestal een verzameling van blokken

html.tpl.php

page.tpl.php
region.tpl.php
node.tpl.php block.tpl.php

ﬁeld.tpl.php

block.tpl.php

comment.tpl.php

Template suggesties

Greatest thing since ... hot water !

Speciﬁek .tpl.php bestand per pagina, node, veld, ....

Voor elk .tpl.php bestand

Achteraf cache leegmaken

Template suggesties

page--front.tpl.php

node--54.tpl.php

ﬁeld--ﬁeld--veldnaam.tpl.php

Tools

Firebug & web developer toolbar

Devel (http://drupal.org/project/devel)

Devel Themer (http://drupal.org/project/devel_themer)

Tips

Cache vaak wissen !

Niets overschrijven wat niet overschreven moet worden

Gebruik een cheatsheet

Wees consequent (HTML, PHP, CSS, JS, Drupal, ...)

Gebruik modules zoals views, display suite, panels , ...

Bestanden op www.pretautiliser.be/docs/dcg2012/ﬁles.zip

Feedback & follow-up:
http://drupalcampgent.be/feedback

How to create a Drupal theme (Dut

Recomendados

Recomendados

Más contenido relacionado

Similar a How to create a Drupal theme (Dut

Similar a How to create a Drupal theme (Dut (20)

How to create a Drupal theme (Dut

Notas del editor