How to create a Drupal theme           Nicky Rutten
Nicky RuttenFounder / Creative director @ Prêt à utiliserDocent @ Karel de Grote HogeschoolWebdesign, typografie, sigaren, ...
Prêt à utiliserDigital agencyOpleidingen & consultancyWebdesign & developmentMobile                            3
We really love Drupal !                          4
Drupal themingPresentatie laagGeen website maar web systeemWireframes zijn cruciaal (structuur)Consistentie is belangrijk ...
Drupal themingAltijd in sites/all/themes !                               6
Drupal themingVerzameling van bestanden (thema.info, *.tpl.php, template.php)HTML met stukjes PHP (Drupal zet de PHP om in...
Jummy !          8
9
<html> <body>    <article>   <aside>                <aside>
html.tpl.php  page.tpl.php     node.tpl.php   block.tpl.php                    block.tpl.php
.info file (verplicht)Altijd de naam van de theme en map (vb : dcg2012 & dcg2012.info)Definitie van:          Thema details ...
html.tpl.php!Doctype    (Standaard: xHTML + RDFa)Header: CSS + JavaScript + Favicon + Meta + ...Body container (alleen de ...
page.tpl.phpInhoud van de <body> containerUitprinten van regio’s (gedefinieerd in het .info bestand)Gebruik altijd <?php pr...
node.tpl.phpInhoud van een werkelijk " artikel "Voorkeur aan modules : Display Suite, panels and views
comment.tpl.phpOpmaak van comments bij een nodefield.tpl.phpOpmaak van aangepaste velden van een noderegion.tpl.phpMeestal ...
html.tpl.php  page.tpl.php                       region.tpl.php     node.tpl.php       block.tpl.php      field.tpl.php    ...
Template suggestiesGreatest thing since ... hot water !Specifiek .tpl.php bestand per pagina, node, veld, ....Voor elk .tpl...
Template suggestiespage--front.tpl.phpnode--54.tpl.phpfield--field--veldnaam.tpl.php
Showtime !
ToolsFirebug & web developer toolbarDevel (http://drupal.org/project/devel)Devel Themer (http://drupal.org/project/devel_t...
TipsCache vaak wissen !Niets overschrijven wat niet overschreven moet wordenGebruik een cheatsheetWees consequent (HTML, P...
Bestanden op www.pretautiliser.be/docs/dcg2012/files.zip
Vragen ?
Bedankt !
Feedback & follow-up:http://drupalcampgent.be/feedback
How to create a Drupal theme (Dut
Upcoming SlideShare
Loading in …5
×

How to create a Drupal theme (Dut

2,367 views

Published on

Keynote @ Drupal Camp Gent 2012 (May 26)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,367
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • How to create a Drupal theme (Dut

    1. 1. How to create a Drupal theme Nicky Rutten
    2. 2. Nicky RuttenFounder / Creative director @ Prêt à utiliserDocent @ Karel de Grote HogeschoolWebdesign, typografie, sigaren, whisky en basketball @ruttennicky 2
    3. 3. Prêt à utiliserDigital agencyOpleidingen & consultancyWebdesign & developmentMobile 3
    4. 4. We really love Drupal ! 4
    5. 5. Drupal themingPresentatie laagGeen website maar web systeemWireframes zijn cruciaal (structuur)Consistentie is belangrijk 5
    6. 6. Drupal themingAltijd in sites/all/themes ! 6
    7. 7. Drupal themingVerzameling 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
    8. 8. Jummy ! 8
    9. 9. 9
    10. 10. <html> <body> <article> <aside> <aside>
    11. 11. html.tpl.php page.tpl.php node.tpl.php block.tpl.php block.tpl.php
    12. 12. .info file (verplicht)Altijd de naam van de theme en map (vb : dcg2012 & dcg2012.info)Definitie van: Thema details (naam, versie, ...) CSS bestanden JavaScript bestanden Thema regio’s Thema opties (logo, slogan, ...)
    13. 13. html.tpl.php!Doctype (Standaard: xHTML + RDFa)Header: CSS + JavaScript + Favicon + Meta + ...Body container (alleen de container, GEEN inhoud)
    14. 14. page.tpl.phpInhoud van de <body> containerUitprinten van regio’s (gedefinieerd in het .info bestand)Gebruik altijd <?php print render($page[‘...’]); ?> voor regio’sVariabelen : $is_front, $logged_in, $logo, $front_page, ...
    15. 15. node.tpl.phpInhoud van een werkelijk " artikel "Voorkeur aan modules : Display Suite, panels and views
    16. 16. comment.tpl.phpOpmaak van comments bij een nodefield.tpl.phpOpmaak van aangepaste velden van een noderegion.tpl.phpMeestal een verzameling van blokken
    17. 17. html.tpl.php page.tpl.php region.tpl.php node.tpl.php block.tpl.php field.tpl.php block.tpl.php comment.tpl.php
    18. 18. Template suggestiesGreatest thing since ... hot water !Specifiek .tpl.php bestand per pagina, node, veld, ....Voor elk .tpl.php bestandAchteraf cache leegmaken
    19. 19. Template suggestiespage--front.tpl.phpnode--54.tpl.phpfield--field--veldnaam.tpl.php
    20. 20. Showtime !
    21. 21. ToolsFirebug & web developer toolbarDevel (http://drupal.org/project/devel)Devel Themer (http://drupal.org/project/devel_themer)
    22. 22. TipsCache vaak wissen !Niets overschrijven wat niet overschreven moet wordenGebruik een cheatsheetWees consequent (HTML, PHP, CSS, JS, Drupal, ...)Gebruik modules zoals views, display suite, panels , ...
    23. 23. Bestanden op www.pretautiliser.be/docs/dcg2012/files.zip
    24. 24. Vragen ?
    25. 25. Bedankt !
    26. 26. Feedback & follow-up:http://drupalcampgent.be/feedback

    ×