• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How to create a Drupal theme (Dut
 

How to create a Drupal theme (Dut

on

  • 892 views

Keynote @ Drupal Camp Gent 2012 (May 26)

Keynote @ Drupal Camp Gent 2012 (May 26)

Statistics

Views

Total Views
892
Views on SlideShare
887
Embed Views
5

Actions

Likes
0
Downloads
13
Comments
0

2 Embeds 5

http://www.linkedin.com 4
http://www.docshut.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 How to create a Drupal theme (Dut Presentation Transcript

  • How to create a Drupal theme Nicky Rutten
  • Nicky RuttenFounder / Creative director @ Prêt à utiliserDocent @ Karel de Grote HogeschoolWebdesign, typografie, sigaren, whisky en basketball @ruttennicky 2
  • 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 5
  • 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 inhoud)vb: Themanaam = dcg2012 Map : dcg2012 Bestand : dcg2012.info Bestand : page.tpl.php ... 7
  • 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 (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.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, ...
  • 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 een verzameling van blokken
  • html.tpl.php page.tpl.php region.tpl.php node.tpl.php block.tpl.php field.tpl.php block.tpl.php comment.tpl.php
  • Template suggestiesGreatest thing since ... hot water !Specifiek .tpl.php bestand per pagina, node, veld, ....Voor elk .tpl.php bestandAchteraf cache leegmaken
  • 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_themer)
  • 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 , ...
  • Bestanden op www.pretautiliser.be/docs/dcg2012/files.zip
  • Vragen ?
  • Bedankt !
  • Feedback & follow-up:http://drupalcampgent.be/feedback