Uit DeVliegendeWiki

Het Zen-theme schijnt erg geschikt te zijn om zelf aan te passen, oa. vanwege de uitgebreide beschikbare documentatie, zowel in boekvorm als online. Het gebruikt de phpTemplate-engine. Eén van de features van Zen is, dat een draadmodel (wireframes) getoond kan worden rondom de verschillende regions. Wellicht helpt dat tijdens ontwerpen. Het idee is, dat je niet rechtstreeks dit theme aanpast, maar dat je een subtheme creëert en aanpast. Zie Drupal.org - Why use Zen?. Zen maakt gebruik van de Template dinges API. Deze is standaard aanwezig in Drupal 6, en is als module beschikbaar voor oudere versies. Dit artikel refereert naar Drupal 5 en 6 door elkaar heen.

Zenophile is een module die het gemakkelijk maakt om Zen-subthemes aan te maken. Daarnaast zou het 't aanpassen van regions gemakkelijker maken, etc. Ik gebruik het altijd in combinatie met Zen.

Ingebruikname

Zen subtheme aanmaken: Human name is de naam die verschijnt in de lijst met ontwerpen. Site directory: Staan themes in default of in All? Ik kies steeds het eerste. Verder gekozen voor een nieuw fresh.css-bestand

Download de Zen-module vanaf hier en plaats 'm op de gebruikelijke locatie;
Download en installeer Zenophile
Ga naar Administer > Site building > Themes > Zen > Configure > Create Zen subtheme: Nu kun je met Zenophile een subtheme configureren:
- Site directory: Onduidelijk. Ik gebruik de standaardinstelling 'all'
- Layout: Fixed or liquid
- UNIX permissions (chmod): Als php een map aanmaakt, kun je als gebruiker daar vaak niets aan veranderen. Dat probleem kun je hier omzeilen door 777 als permissie in te stellen. Errug handig!
- Create fresh CSS file: Dat is ideaal: Er wordt een kant-en-klaar leeg css-bestand aangemaakt waar je al je eigen code in kunt stoppen. Is ook handig voor onderhoud naderhand

Overigens: er is ook een noeste handmatige variant om een subtheme aan te maken. Dat is iets voor mensen die vuur maken met vuurstenen. Belangrijkste links: Getting started 5.x, 6.x; Build your own sub-theme 5.x, 6.x; automatische subtheme-generatie.

Klonen

Zelf creëer ik subthemes middels Zenophile, maar handmatig klonen werkt ook. Je krijgt alleen dubbele template-bestanden. Daarnaast mis je Zen-specifieke instellingen zoals Kruimelpad en Wireframes:

Ga naar
```
Administer > Site building > Themes > Create Zen subtheme
```
en maak het nieuwe theme aan. Selecteer bij Site directory het theme dat je wilt klonen. vervolgens maakt Zenophile de bestanden aan;
Copiëer de inhoud van <oude-theme-fresh.css> naar <nieuwe-theme-fresh.css>. Verwijder daarna de css-bestanden met de naam van het oude theme in hun naam;

Ga naar

Administer > Sitebuilding > Themes > Configure: <theme-naam>

en pas instellingen aan.

Hoofdtheme - subtheme

Een subtheme erft de instellingen van het hoofd-theme waar het bijhoort. In Drupal 6 hoeft een subtheme niet meer in een submap van het hoofdtheme te zitten. Als je mbv. Zenophile een Zen-subtheme aanmaakt, belandt dit in een map naast die van Zen zelf.

De gebruikelijke tpl.php-bestanden staan in de map zen/templates. Het is niet de bedoeling om deze bestanden aan te passen, maar om ze te kopiëren, of vanaf nul opnieuw te genereren

zen is het hoofdtheme, zen04 is het subtheme

De bestanden van het subtheme. De tpl.php-bestanden uit zen/templates worden gebruikt

Primary links???

In het configuratiescherm voor een Zen-subtheme, kun je aangeven dat de primaire links getoond moeten worden. Dat verwart mij, omdat ik dat normaal als block plaats. Hoe dan ook. Nu weet ik 't.

Wireframes

Draadmodellen zet je aan/uit via het configuratiescherm voor het betreffende Zen-subtheme.

Stylesheets

De 25 standaard stylesheets. Let niet op het verdwaalde gif-bestandje

Zen komt met zo'n 25 CSS-bestanden. Als je een subtheme aanmaakt, worden deze gekopiëerd naar de map css.

Zo'n 9 CSS-bestanden zijn vaak van ondergeschikt belang:

Stylesheets die eindigen met -rtl hebben betrekking op talen die van rechts naar links gelezen worden;
drupal6-reference.css en drupal7-reference.css zijn een soort dummy's, en spelen geen rol van betekenis;
wireframes.css dient om draadmodellen weer te geven rondom blocks;

Enkele van de overgebleven 16 stylesheets:

html-reset.css

Hier krijgen alle gebruikte html-elementen een standaardwaarde. Handig als je bv. in één keer het standaardlettertype voor een hele site wilt vaststellen.

layout-fixed.css & layout-liquid.css

Plaatsing van de kolommen. layout-fixed.css bepaalt oa. de breedte van de pagina

page-background.css

Vormgeving van de achtergrond van de verschillende regions

pages.css

Styling mbt. page.tpl.php.

tabs.css

Vormgeving van primary & secondary tabs, wat dat moge zijn.

Internet Explorer Hated You

Alle versies van IE zijn beperkt tot 31 stylesheets.

Bronnen

http://drupal.org/node/1069786 - Zen's stylesheets

Bestandslocaties en paden

Vaak is het nodig om vanuit page.tpl.php te refereren naar andere locaties binnen Drupal. Daarom is het handig om te weten waar je bent en hoe je die andere locaties kunt benaderen.

$base_path: Pad naar root. Als Drupal direct onder root staat: '/'. Anders bv. '/test01/'
$directory: Directory waar het huidige theme is gelocaliseerd. Bv. themes/garland

Vanaf $base_path kun je alle locaties binnen de Drupal-installatie bereiken. Ter illustratie: $logo in page.tpl.php expandeert tot:

<img id="logo-image" alt="Home" src="/rootfolder/sites/default/files/logo.jpg"/>

Waarbij het pad begint bij $base_path. Links in bv. footers naar pagina's zoals inloggen of algemene voorwaarden beginnen met base_path() en vermoedelijk is dit hetzelfde. Wellicht dat $base_path()-Zen-specifiek is.

Na uploaden van een logo belandt deze op locatie

 sites/default/files/logo.jpg

Een css-bestand ziet de wereld vanaf de locatie waar dat bestand zich daadwerkelijk bevindt. Een voorbeeld: Een verwijzing vanaf een css-bestand in map root/modules/system naar een graphic in map root/misc kan als volgt: url(../../misc/menu-leaf.png) (dit is het voorbeeld van de bullet van de bulleted-list).

Primary links

In page.tpl.php worden primary links afgebeeld middels

<?php print $header; ?>

Volgens Firebug wordt dit geëxpandeerd tot:

<div class="region region-header">
   <div id="block-menu-primary-links" class="block block-menu first last region-odd even region-count-1 count-4 with-block-editing">
      <div class="content">
         <ul class="menu">
            <li class="leaf first">
               <a title="" href="/catalog">Catalogus</a>
            </li>
            <li class="leaf">
               <a title="Log in, of maak een nieuw account aan" href="/user">Inloggen</a>
            </li>
            <li class="leaf last">
               <a title="" href="/user">User</a>
            </li>
         </ul>
      </div>
      <div class="edit">
      </div>
      <div class="block-region">Header</div>
   </div>

Dit is hoe dit deels ingeklapt eruit ziet als er drie elementen zijn:

<div class="content">
   <ul class="menu">
      <li class="leaf first active-trail">
      <li class="leaf">
      <li class="leaf last">
</ul>

Zoals je kunt zien, zijn er aparte klassen voor het eerste item, het laatste item, en items daartussen. Verder krijgt het actieve item additioneel de klasse active-trail. Er wordt een unsorted list gebruikt.

Zie artikel Tabbed navigation (Drupal) voor het themen van primary links.

Bronnen

http://drupal.org/node/137788 - Theming Primary Links - Hoopvol!
http://drupal.org/phptemplate - PHPTemplate theme engine
http://api.drupal.org/api/drupal/includes!menu.inc/function/theme_menu_links/5 - Drupal API, theme_menu_links

Toepassingen

Achtergrondkleur aanpassen

In fresh.css:

body{
	background-color: #f4f5f4;
}

Bullet van bulleted-lists aanpassen

De vormgeving van de bullet wordt als volgt bepaald in bestand system-menus.css:

li.leaf {
   list-style-image:url(../../misc/menu-leaf.png);
   list-style-type:square;
}

Om dit te overloaden ligt het voor de hand om de nieuwe afbeelding in files te plaatsen. Als de aangepaste css-definitie zich in map root/sites/all/themes/themenaam/ bevindt, krijg je de volgende code:

li.leaf {
   list-style-image:url(../../../default/files/bestand.gif);
   list-style-type:square;
}

Header: Hoogte aanpassen

De hoogte wordt automatisch aangepast aan de inhoud. Header is gedefineerd in div#header

Links aanpassen

De kleuren van links kun je aanpassen door bijbehorende definities in <themenaam>-fresh.css te zetten. Bv:

a:link 
{
	color: #9b533b;
	text-decoration: underline;
}

a:visited 
{
	color: #800000;
	text-decoration: underline;
}

a:hover
{
	color: #800000;
	text-decoration: underline;
}

Via Google kun je additionele specificaties vinden, bv. hoe je links dik kunt maken.

Logo in header

Het stijl-element waarmee het logo geplaatst wordt, is als volgt ingebed in page.tpl.php:

<head>
<body>
 <div id="page">
  <div id="page-inner">
   <div id="header">
    <div id="header-inner" class="clear-block">
     <div id="logo-title">
 
 
      <div id="logo">
       <a rel="home" title="Home" href="/<root-dir>/">
        <img id="logo-image" alt="Home" src="/<root-dir>/sites/all/themes/<theme-naam>/logo.png"/>
       </a>
      </div>
 
 
      <h1 id="site-name">
       ...
      </h1>
     </div> <!-- logo-title -->
    </div> <!-- header-inner -->
   </div> <!-- header -->
   <div id="main">
   <div id="footer">

Op twee plekken wordt div id="logo" gedefineerd. Eerst in layout.css:

#logo {
 float:left;
}

en daarna in <theme-naam>.css:

#logo {
 margin:0 10px 0 0;
 padding:0;
}

Als je in page.tpl.php het stukje over het logo herhaald, wordt het logo gewoon twee keer naast elkaar afgebeeld.

Logo centreren

Om het logo te centreren moet je de css-definitie van logo overloaden met zowel een float- als een text-align-commando. Zie http://groups.drupal.org/node/22907. Dit werkte, terwijl de andere niet werkte. Het lijkt erop dat met alleen een text-align-commando, het plaatje wordt ge-aligned binnen een gegeven ruimte. Die ruimte moet juist de hele breedte van het scherm beslaan.

Bronnen: