Van HTML naar Drupaltemplate
CSS
1// check of het css-bestand style.css heet
Screenshot.png
2// maak een screenshot van de lay-out en sla op als screenshot.png (150px breed – liefst ook nog 90px hoog)
Template.info
3// maak een bestand en sla op als naam-template.info. Inhoud:
name = Naam template
description = Beschrijving
core= 6.x
engine = phptemplate
eventueel ook nog:
regions[left] = Left
regions[header] = Header
regions[content] = Inhoud
regions[footer] = Footer
regions[right] = Right
regions[menu] = Menu
Page.tpl.php
4// Open layout.html en sla op als page.tpl.php.
Gebruik layout.html om nog wijzigingen aan te brengen in de CSS.
In de head:
<?php print $head ?><title><?php print $head_title ?></title><?php print $styles ?><?php print $scripts ?>
De linkerdiv:
<?php print $left ?>
De rechterdiv:
<?php print $right ?>
***** je moet niet altijd linkerdiv én rechterdiv invullen
De footer:
<?php print $footer_message . $footer ?>
Het menu (meestal niet nodig):
<?php // menu maken kan met deze regel code print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?>
De inhoud:
<?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; ?><?php print $content ?>
Net boven </body>:
<?php print $closure ?>
Extra Extra Extra
Extra positie maken:
In template.info:
regions[mijnpositie] = mijnpositie
In page.tpl.php:
<?php if ($mijnpositie): ?>
<?php print $mijnpositie; ?>
<?php endif; ?>
Extra bron:
http://api.drupal.org/api/drupal/modules--system--page.tpl.php/6
Header:
Achtergrondfiguur – no repeat
Positioneren: 960px breed en hoogte van de figuur en relatief
Container:
Positioneren: relatief en 960px breed
*** Tip voor links en rechts: maak 2 segmenten in fireworks en klik erop. Je kan dan de breedte en positie (x) van het segment zien.
Links
Positioneren: relatief en 600px breed
Kader: marge links (zie x in fireworks, bv 81px), float left, evt een linkerpadding
Rechts
Positioneren: relatief en 200px breed
Kader: marge links (zie x in fireworks, bv 81px), float left, evt een linkerpadding
Footer
Achtergrondfiguur, no repeat
Positioneren: relatief, 960 px breed en hoogte (zie afbeelding).
Kader: Clear: both
Body
Achtergrondkleur, lettertype, tekstgrootte, tekstkleur, enz.