Drupal Theming Hans Rossel

1. Maak een Drupal Theme Hans Rossel - www.koba.be

2. Theme instellingen

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

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

13. Theme anatomie

15. screenshot.png

16. Css: Gewoonlijk: style, print, ie6

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

21. http://drupal.org/project/genesis

22. http://drupal.org/project/framework

24. http://drupal.org/project/ninesixty

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

29. Automatisch: Voeg drupal_rebuild_theme_registry(); toe onderaan template.php (Let op: achteraf terug weghalen!)

31. Plaats je index.html en style.css die je ontworpen hebt erin

32. Hernoem index.html naar page.tpl.php

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; ?>

36. Constructie invoegen variabelen (Theme coding conventions: http://drupal.org/node/1965 )‏ <?php if ($tabs): ?> <div class="tabs"> <?php print $tabs; ?> </div> <?php endif; ?>

37. Doctype en head copiëren <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>"> <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="block block-theme"> <?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="mission">'. $mission .'</div>'; endif; ?> <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?> <?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?> <?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?> <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?> <?php if ($show_messages && $messages): print $messages; endif; ?> <?php print $help; ?> <div class="clear-block"> <?php print $content ?> </div> <?php print $feed_icons ?>

41. Rechterkolom copiëren <?php if ($right): ?> <div id="sidebar-right" class="sidebar"> <?php if (!$left && $search_box): ?><div class="block block-theme"><?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="header-region" class="clear-block"> <?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="logo"> <a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>"> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" title="<?php print t('Home'); ?>" /> </a> </div> <?php endif; ?> En bij Templates logo opladen of logo.png copiëren.

48. Via block visibility settings & pathauto

49. Via dynamische variabelen (zie Zen)

50. Via meerdere templates: volgens url, user, content type

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') {}

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

61. block-user.tpl.php

62. block-left.tpl.php

63. Theme developer http://drupal.org/project/devel

Drupal Theming Hans Rossel

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (15)

Destaque

Destaque (8)

Mais de Hans Rossel

Mais de Hans Rossel (14)

Drupal Theming Hans Rossel