Maak een Drupal Theme Hans Rossel -  www.koba.be
Theme instellingen
Theme instellingen <ul><li>Templates: admin/build/themes
Beheertemplate: admin/settings/admin
Eigen template: user/uid/edit (toegangsrecht 'selecteer een andere template' in admin/user/permissions)‏
Blokken per theme: admin/build/block
Extra variabelen: admin/settings/site-information </li></ul>
Garland <ul><li>Standard theme Drupal 5 & 6
Fluid dus ok voor backend/admin theme,  maar nu ook  http://drupal.org/project/admin  en   http://drupal.org/project/rootc...
Niet zo goed als frontend
Niet zo goed als starttheme </li></ul>
 
Theme anatomie
Basisbestanden: phptemplate <ul><li>.info: definitie van theme
screenshot.png
Css: Gewoonlijk: style, print, ie6
Template files </li></ul><ul><ul><li>page.tpl.php, node.tpl.php, block.tpl.php
31 template bestanden in core in D6  (http://drupal.org/node/190815#default-templates)‏ </li></ul></ul><ul><li>template.ph...
Methode 1: Subtheme van Prefab Theme Links op drupal.be/nl http://drupal.be/node/1809   Gratis http://drupal.org/project/T...
Methode 2 Subtheme van Starter Theme <ul><li>http://drupal.org/project/zen
http://drupal.org/project/genesis
http://drupal.org/project/framework
http://drupal.org/project/hunchbaque </li></ul>CSS Frameworks <ul><li>http://drupal.org/project/blueprint
http://drupal.org/project/ninesixty   </li></ul>
Mooie code, Lelijk Theme
Methode 3: Vanaf eigen html/css prototype http://drupal.org/theme-guide http://www.oswd.org/designs/favorites/ http://www....
Stap 0: Voorzorgen <ul><li>Zet Admin theme op Garland!
Theme registry wordt gecached! </li></ul><ul><ul><li>Handmatig: telkens cache clearen na wijziging in template: Klik op de...
Automatisch: Voeg drupal_rebuild_theme_registry(); toe onderaan template.php (Let op: achteraf terug weghalen!) </li></ul>...
STAP 1: Theme map <ul><li>Maak in sites/all/themes een nieuwe map: abc (voor abc theme)
Plaats je index.html en style.css die je ontworpen hebt erin
Hernoem index.html naar page.tpl.php </li></ul>
Upcoming SlideShare
Loading in …5
×

Drupal Theming Hans Rossel

4,609 views

Published on

Drupal theming, make a drupal theme from a static html css prototype

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

No Downloads
Views
Total views
4,609
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
110
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Drupal Theming Hans Rossel

  1. 1. Maak een Drupal Theme Hans Rossel - www.koba.be
  2. 2. Theme instellingen
  3. 3. Theme instellingen <ul><li>Templates: admin/build/themes
  4. 4. Beheertemplate: admin/settings/admin
  5. 5. Eigen template: user/uid/edit (toegangsrecht 'selecteer een andere template' in admin/user/permissions)‏
  6. 6. Blokken per theme: admin/build/block
  7. 7. Extra variabelen: admin/settings/site-information </li></ul>
  8. 8. Garland <ul><li>Standard theme Drupal 5 & 6
  9. 9. Fluid dus ok voor backend/admin theme, maar nu ook http://drupal.org/project/admin en http://drupal.org/project/rootcandy
  10. 10. Niet zo goed als frontend
  11. 11. Niet zo goed als starttheme </li></ul>
  12. 13. Theme anatomie
  13. 14. Basisbestanden: phptemplate <ul><li>.info: definitie van theme
  14. 15. screenshot.png
  15. 16. Css: Gewoonlijk: style, print, ie6
  16. 17. Template files </li></ul><ul><ul><li>page.tpl.php, node.tpl.php, block.tpl.php
  17. 18. 31 template bestanden in core in D6 (http://drupal.org/node/190815#default-templates)‏ </li></ul></ul><ul><li>template.php </li></ul>
  18. 19. Methode 1: Subtheme van Prefab Theme Links op drupal.be/nl http://drupal.be/node/1809 Gratis http://drupal.org/project/Themes http://themegarden.org/drupal6/ Betalend http://www.topnotchthemes.com/browse http://www.templatemonster.com/drupal-themes.php Aanbevolen methode : Subtheme vb Minelli
  19. 20. Methode 2 Subtheme van Starter Theme <ul><li>http://drupal.org/project/zen
  20. 21. http://drupal.org/project/genesis
  21. 22. http://drupal.org/project/framework
  22. 23. http://drupal.org/project/hunchbaque </li></ul>CSS Frameworks <ul><li>http://drupal.org/project/blueprint
  23. 24. http://drupal.org/project/ninesixty </li></ul>
  24. 25. Mooie code, Lelijk Theme
  25. 26. Methode 3: Vanaf eigen html/css prototype http://drupal.org/theme-guide http://www.oswd.org/designs/favorites/ http://www.styleshout.com Zenlike theme: http://www.oswd.org/design/preview/id/3559
  26. 27. Stap 0: Voorzorgen <ul><li>Zet Admin theme op Garland!
  27. 28. Theme registry wordt gecached! </li></ul><ul><ul><li>Handmatig: telkens cache clearen na wijziging in template: Klik op de &quot;cache data opschonen&quot; knop op Beheren > Site-instellingen > Prestatie.
  28. 29. Automatisch: Voeg drupal_rebuild_theme_registry(); toe onderaan template.php (Let op: achteraf terug weghalen!) </li></ul></ul>
  29. 30. STAP 1: Theme map <ul><li>Maak in sites/all/themes een nieuwe map: abc (voor abc theme)
  30. 31. Plaats je index.html en style.css die je ontworpen hebt erin
  31. 32. Hernoem index.html naar page.tpl.php </li></ul>
  32. 33. STAP 2: .info file definitie theme Maak abc.info file met inhoud (copieer garland.info, hernoem en pas aan) Meer info: .info handbook: http://drupal.org/node/171205 ; $Id$ name = ABC Theme description = Heel mooi theme version = VERSION core = 6.x engine = phptemplate stylesheets[all][] = style.css stylesheets[print][] = print.css
  33. 34. STAP 3: css en js In .info file: stylesheets[all][] = style.css stylesheets[print][] = print.css scripts[] = myscript.js In page.tpl.php: <?php print $styles; ?> <?php print $scripts; ?>
  34. 35. STAP 4: page.tpl.php Variabelen invoegen <ul><li>Kopiëren van Garland of van modules/system: doctype, head en alle variabelen
  35. 36. Constructie invoegen variabelen (Theme coding conventions: http://drupal.org/node/1965 )‏ </li></ul><?php if ($tabs): ?> <div class=&quot;tabs&quot;> <?php print $tabs; ?> </div> <?php endif; ?>
  36. 37. Doctype en head copiëren <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;<?php print $language->language ?>&quot; lang=&quot;<?php print $language->language ?>&quot; dir=&quot;<?php print $language->dir ?>&quot;> <head> <?php print $head ?> <title><?php print $head_title ?></title> <?php print $styles ?> <?php print $scripts ?> </head> <body>
  37. 38. Menus copiëren <?php if (isset($primary_links)) : ?> <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?> <?php endif; ?> <?php if (isset($secondary_links)) : ?> <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?> <?php endif; ?>
  38. 39. Zoekbox copiëren <?php if ($search_box): ?> <div class=&quot;block block-theme&quot;> <?php print $search_box ?> </div> <?php endif; ?>
  39. 40. Hoofdinhoud copiëren Via Firebug: kijken in theme: #primarycontent: statische inhoud vervangen door Drupal variabelen: <?php print $breadcrumb; ?> <?php if ($mission): print '<div id=&quot;mission&quot;>'. $mission .'</div>'; endif; ?> <?php if ($tabs): print '<div id=&quot;tabs-wrapper&quot; class=&quot;clear-block&quot;>'; endif; ?> <?php if ($title): print '<h2'. ($tabs ? ' class=&quot;with-tabs&quot;' : '') .'>'. $title .'</h2>'; endif; ?> <?php if ($tabs): print '<ul class=&quot;tabs primary&quot;>'. $tabs .'</ul></div>'; endif; ?> <?php if ($tabs2): print '<ul class=&quot;tabs secondary&quot;>'. $tabs2 .'</ul>'; endif; ?> <?php if ($show_messages && $messages): print $messages; endif; ?> <?php print $help; ?> <div class=&quot;clear-block&quot;> <?php print $content ?> </div> <?php print $feed_icons ?>
  40. 41. Rechterkolom copiëren <?php if ($right): ?> <div id=&quot;sidebar-right&quot; class=&quot;sidebar&quot;> <?php if (!$left && $search_box): ?><div class=&quot;block block-theme&quot;><?php print $search_box ?></div><?php endif; ?> <?php print $right ?> </div> <?php endif; ?> Zorg dat je rechterkolom blokken hebt.
  41. 42. Footer copiëren <?php print $footer_message . $footer ?> <?php print $closure ?> voor </body>: belangrijk!
  42. 43. Header region copiëren <div id=&quot;header-region&quot; class=&quot;clear-block&quot;> <?php print $header; ?> </div>
  43. 44. .info file: regions Standaard: regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer
  44. 45. .info file: eigen regions regions[left] = Left sidebar regions[right] = Right sidebar regions[header] = Header regions[footer] = Footer regions[content_top] = Content top regions[content_bottom] = Content bottom regions[navbar] = Navbar regions[helemaalrechtsboven] = Helemaal rechts boven Opm: Bestaande naamgeving best behouden, maar eigen nieuwe toevoegen
  45. 46. Logo invoegen <?php if ($logo): ?> <div id=&quot;logo&quot;> <a href=&quot;<?php print $base_path; ?>&quot; title=&quot;<?php print t('Home'); ?>&quot;> <img src=&quot;<?php print $logo; ?>&quot; alt=&quot;<?php print t('Home'); ?>&quot; title=&quot;<?php print t('Home'); ?>&quot; /> </a> </div> <?php endif; ?> En bij Templates logo opladen of logo.png copiëren.
  46. 47. Dynamisch sturen Diverse mogelijkheden <ul><li>Via css: oa $body_classes (zie Zen)
  47. 48. Via block visibility settings & pathauto
  48. 49. Via dynamische variabelen (zie Zen)
  49. 50. Via meerdere templates: volgens url, user, content type </li></ul>
  50. 51. Dynamische variabelen <ul><li>if ($logged_in) {…}
  51. 52. if (!$logged_in) {…}
  52. 53. if ($is_front) {…}
  53. 54. if (in_array('redactie'), array_values($user->roles)) {…}
  54. 55. if (arg(1) == 'edit') {}
  55. 56. if (arg(0) == 'admin') {} </li></ul>
  56. 57. Meerdere page.tpl.php files Frontpage page-front.tpl.php Voor node pad (url)‏ Page-node-edit.tpl.php of page-node-add.tpl.php > page-node-1.tpl.php > page-node.tpl.php > page.tpl.php Volgens url (view of module)‏ page-blog-tpl.php, page-viewpagename.tpl.php, page-admin.tpl.php, page-admin-build-block.tpl.php, page-civicrm.tpl.php, page-googlemap.tpl.php, page-user-1.tpl.php... Let op : volgens url niet voor node aliassen, steeds Drupal path vb node/2
  57. 58. Meerdere node.tpl.php Volgens content type node-blog.tpl.php node-forum.tpl.php node-page.tpl.php node-ccknieuwsbericht.tpl.php
  58. 59. Block.tpl.php <ul><li>Opsplitsen in meerdere </li></ul><ul><ul><li>Moduleblok: block-modulename-delta.tpl.php > block-modulename.tpl.php > block-region.tpl.php > block.tpl.php
  59. 60. Eigen blok: block-block-bloknummer.tpl.php </li></ul></ul><ul><li>Voorbeeld </li></ul><ul><ul><li>block-block-2.tpl.php
  60. 61. block-user.tpl.php
  61. 62. block-left.tpl.php </li></ul></ul>
  62. 63. Theme developer http://drupal.org/project/devel

×