Your SlideShare is downloading. ×
0
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Drupal Theming Hans Rossel
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Drupal Theming Hans Rossel

4,186

Published on

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

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,186
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
109
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Maak een Drupal Theme Hans Rossel - www.koba.be
  • 2. Theme instellingen
  • 3. Theme instellingen <ul><li>Templates: admin/build/themes
  • 4. Beheertemplate: admin/settings/admin
  • 5. Eigen template: user/uid/edit (toegangsrecht 'selecteer een andere template' in admin/user/permissions)‏
  • 6. Blokken per theme: admin/build/block
  • 7. Extra variabelen: admin/settings/site-information </li></ul>
  • 8. Garland <ul><li>Standard theme Drupal 5 & 6
  • 9. Fluid dus ok voor backend/admin theme, maar nu ook http://drupal.org/project/admin en http://drupal.org/project/rootcandy
  • 10. Niet zo goed als frontend
  • 11. Niet zo goed als starttheme </li></ul>
  • 12.  
  • 13. Theme anatomie
  • 14. Basisbestanden: phptemplate <ul><li>.info: definitie van theme
  • 15. screenshot.png
  • 16. Css: Gewoonlijk: style, print, ie6
  • 17. Template files </li></ul><ul><ul><li>page.tpl.php, node.tpl.php, block.tpl.php
  • 18. 31 template bestanden in core in D6 (http://drupal.org/node/190815#default-templates)‏ </li></ul></ul><ul><li>template.php </li></ul>
  • 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
  • 20. Methode 2 Subtheme van Starter Theme <ul><li>http://drupal.org/project/zen
  • 21. http://drupal.org/project/genesis
  • 22. http://drupal.org/project/framework
  • 23. http://drupal.org/project/hunchbaque </li></ul>CSS Frameworks <ul><li>http://drupal.org/project/blueprint
  • 24. http://drupal.org/project/ninesixty </li></ul>
  • 25. Mooie code, Lelijk Theme
  • 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
  • 27. Stap 0: Voorzorgen <ul><li>Zet Admin theme op Garland!
  • 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.
  • 29. Automatisch: Voeg drupal_rebuild_theme_registry(); toe onderaan template.php (Let op: achteraf terug weghalen!) </li></ul></ul>
  • 30. STAP 1: Theme map <ul><li>Maak in sites/all/themes een nieuwe map: abc (voor abc theme)
  • 31. Plaats je index.html en style.css die je ontworpen hebt erin
  • 32. Hernoem index.html naar page.tpl.php </li></ul>
  • 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
  • 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; ?>
  • 35. STAP 4: page.tpl.php Variabelen invoegen <ul><li>Kopiëren van Garland of van modules/system: doctype, head en alle variabelen
  • 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; ?>
  • 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>
  • 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; ?>
  • 39. Zoekbox copiëren <?php if ($search_box): ?> <div class=&quot;block block-theme&quot;> <?php print $search_box ?> </div> <?php endif; ?>
  • 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 ?>
  • 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.
  • 42. Footer copiëren <?php print $footer_message . $footer ?> <?php print $closure ?> voor </body>: belangrijk!
  • 43. Header region copiëren <div id=&quot;header-region&quot; class=&quot;clear-block&quot;> <?php print $header; ?> </div>
  • 44. .info file: regions Standaard: regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer
  • 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
  • 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.
  • 47. Dynamisch sturen Diverse mogelijkheden <ul><li>Via css: oa $body_classes (zie Zen)
  • 48. Via block visibility settings & pathauto
  • 49. Via dynamische variabelen (zie Zen)
  • 50. Via meerdere templates: volgens url, user, content type </li></ul>
  • 51. Dynamische variabelen <ul><li>if ($logged_in) {…}
  • 52. if (!$logged_in) {…}
  • 53. if ($is_front) {…}
  • 54. if (in_array('redactie'), array_values($user->roles)) {…}
  • 55. if (arg(1) == 'edit') {}
  • 56. if (arg(0) == 'admin') {} </li></ul>
  • 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
  • 58. Meerdere node.tpl.php Volgens content type node-blog.tpl.php node-forum.tpl.php node-page.tpl.php node-ccknieuwsbericht.tpl.php
  • 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
  • 60. Eigen blok: block-block-bloknummer.tpl.php </li></ul></ul><ul><li>Voorbeeld </li></ul><ul><ul><li>block-block-2.tpl.php
  • 61. block-user.tpl.php
  • 62. block-left.tpl.php </li></ul></ul>
  • 63. Theme developer http://drupal.org/project/devel

×