Drupal 6 ~ Theming Basics<br />DUG - Leuven - 09/03/2010 <br />Bart Noppen<br />Webdesigner/Themer bij Desk02 BVBA<br />
Inhoud:<br /><ul><li>Waarom Themes?
Onderdelen Drupal 6 theme
Overlopen van de basis templates 
Aan de slag ... 
nuttige tools
hoe een nieuw theme te maken van scratch
hoe een subtheme te maken</li></li></ul><li>Waarom Themes<br /><ul><li>Opmaak staat volledig los van content
Geen core-bestanden aanpassen Core bestanden aanpassen = gevaarlijk voor updates!Core-bestanden aanpassen = fout!
Herbruikbaar op andere websites (of subsites)</li></li></ul><li>Onderdelen van een Drupal 6 theme <br /><ul><li>.info best...
Upcoming SlideShare
Loading in …5
×

Drupal 6 Theming

2,737 views
2,682 views

Published on

Slides of the presentation Bart Noppen (Desk02) gave about theming in Drupal 6.
09/03/2010

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

  • Be the first to like this

No Downloads
Views
Total views
2,737
On SlideShare
0
From Embeds
0
Number of Embeds
182
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Drupal 6 Theming

  1. 1. Drupal 6 ~ Theming Basics<br />DUG - Leuven - 09/03/2010 <br />Bart Noppen<br />Webdesigner/Themer bij Desk02 BVBA<br />
  2. 2. Inhoud:<br /><ul><li>Waarom Themes?
  3. 3. Onderdelen Drupal 6 theme
  4. 4. Overlopen van de basis templates 
  5. 5. Aan de slag ... 
  6. 6. nuttige tools
  7. 7. hoe een nieuw theme te maken van scratch
  8. 8. hoe een subtheme te maken</li></li></ul><li>Waarom Themes<br /><ul><li>Opmaak staat volledig los van content
  9. 9. Geen core-bestanden aanpassen Core bestanden aanpassen = gevaarlijk voor updates!Core-bestanden aanpassen = fout!
  10. 10. Herbruikbaar op andere websites (of subsites)</li></li></ul><li>Onderdelen van een Drupal 6 theme <br /><ul><li>.info bestand (enige verplichte bestand)
  11. 11. logo.png (logo van de site)
  12. 12. favicon.ico (favicon van de site)
  13. 13. screenshot.png (afbeelding in themes list)
  14. 14. template (tpl) pagina's (overschrijven de standaard templates)
  15. 15. template.php (overschrijven van drupal functies)
  16. 16. CSS bestanden
  17. 17. Javascript bestanden 
  18. 18. Layout  afbeeldingen</li></li></ul><li>Onderdelen van een Drupal 6 theme <br /><ul><li>.info bestand (enige verplichte bestand in een theme)
  19. 19. bevat naam omschrijving van het theme
  20. 20. bepaalt parent-theme (als er een is)
  21. 21. bepaalt welke regions beschikbaar zijn
  22. 22. bepaalt welke features beschikbaar zijn
  23. 23. bepaalt welke CSS en JS bestanden geladen moeten worden
  24. 24. logo.png, favicon, screenshot.png
  25. 25. template pagina's (overschrijven de standaard templates)
  26. 26. page.tpl.php
  27. 27. node.tpl.php
  28. 28. block.tpl.php
  29. 29. views.tpl.php
  30. 30. ... vele andere</li></li></ul><li>Onderdelen van een Drupal 6 theme <br /><ul><li>template.php 
  31. 31. bestand waar core & module theming functies overschreven kunnen worden of waar custom functies toegevoegd kunnen worden
  32. 32. CSS bestanden
  33. 33. Javascript bestanden 
  34. 34. Layout  afbeeldingen
  35. 35. achtergrond afbeeldingen</li></li></ul><li>(Noodzakelijke) theming tools<br /><ul><li>Administration menu
  36. 36. Devel module!
  37. 37. Webdeveloper toolbar (Firefox)
  38. 38. Firebug (Firefox and Google Chrome)
  39. 39. view source :)</li></li></ul><li>Aan de slag ...<br /><ul><li>Nieuw theme maken van scratch
  40. 40. .info bestand aanmaken 
  41. 41. naam en omschrijving van het theme
  42. 42. template engine
  43. 43. regions bepalen
  44. 44. CSS en JS bestanden koppelen
  45. 45. features (des-)activeren
  46. 46. standaard templates opzoeken, overlopen en overschrijven
  47. 47. een custom (front) page template maken 
  48. 48. een custom node template maken
  49. 49. een custom block template maken
  50. 50. een custom view template maken
  51. 51. (sub) sub-theme maken van ons nieuwe theme</li></li></ul><li>Een nieuwe theme starten<br /><ul><li>Maak een folder "themes" aan onder sites/all/
  52. 52. Maak een subfolder met de naam  van je themevb: sites/all/themes/dugtheme
  53. 53. Maak een .info bestand aan met dezelfde naamvb: sites/all/themes/dugtheme/dugtheme.info
  54. 54. definieer de nodige informatie voor je theme
  55. 55. Templates zoeken, overlopen en overschrijven</li></li></ul><li>Verschillen tussen Drupal 6 > 7<br /><ul><li>Blocks have new, more meaningful CSS IDs
  56. 56. Primary and secondary links are now Main and Secondary menu
  57. 57. Mission statement removed, 'highlight' region suggested
  58. 58. Footer message removed
  59. 59. Content region is now mandatory, main page content became a block
  60. 60. $closure becomes $page_bottom, new $page_top and hidden regions
  61. 61. $left and $right variables are now $sidebar_first and $sidebar_second; CSS IDs also changed
  62. 62. Search box moved from theme layer to blocks
  63. 63. Skip to main content links in core themes
  64. 64. System module stylesheets have been reorganized to separate behavior-supporting styles from presentational styles
  65. 65. CSS files are sometimes loaded with @import, sometimes with LINK tags
  66. 66. ... and many morezie: http://drupal.org/update/theme/6/7</li>

×