Nu we de header van het ontwerp helemaal onder de knie hebben, zijn we toegekomen aan de body van het template. Ook hier begin ik met een bespreking van de body van rhuk_milkyway, aangezien die het eenvoudigst is. Belangrijk om even op te merken is dat de hele pagina opgemaakt kan worden met CSS! Dit biedt enorme voordelen voor een ontwerper.
De opbouw van de body is een beetje als het Droste vrouwtje: alle onderdelen zijn genest. Wil je de pagina begrijpen, dan moet je de onderdelen een voor een uitpakken.

 

De bodytag

<body id="page_bg" class="color_<?php echo $this->params->get('colorVariation'); ?> bg_<?php echo $this->params->get('backgroundVariation'); ?> width_<?php echo $this->params->get('widthStyle'); ?>">

Het eerste wat opvalt is de body-tag zelf. Hierin zie je drie variabelen die gebruikt worden om de vormgeving van de pagina te bepalen. Deze komen uit de instellingen die je in dit template kunt veranderen bij de installatie:
a) de kleur ( $this->params->get('colorVariation'); ),
b) de achtergrond ( $this->params->get('backgroundVariation'); ) en
c) de breedte ( $this->params->get('backgroundVariation'); ).

Je kunt dit aanpassen via Extensions > Template Manager. Klik daarna op de naam van het template.
In het stylesheet van dit template, template.css, is elke mogelijke optie gekoppeld aan een eigen stukje code. Hier een voorbeeld hoe dit met de breedte is gedaan:

 

body.width_medium div#wrapper {
 width: 950px;
 }
<p> </p>
<p>body.width_small div#wrapper {
 width: 773px;
 }</p>
<p>body.width_fmax div#wrapper {
 min-width: 750px;
 max-width: 1050px;
 }</p>
 

De basisindeling

 

Als we de pagina een beetje opruimen (lees: alles terugbrengen tot de hoofdelementen), heeft deze de volgende indeling:

<a name="up" id="up"></a>
<div class="center" align="center">
  <div id="wrapper">
    <div id="wrapper_r">
      <div id="header">
      <div id="tabarea">
      <div id="search">
      <div id="pathway">
      <div class="clr">
      <div id="whitebox">
        <div id="whitebox_t">
        <div id="whitebox_m">
        <div id="whitebox_b">
      </div>
      <div id="footerspacer">      
    </div>    
    <div id="footer">
  </div>
</div>
<jdoc:include type="modules" name="debug" />

1) Een anker
De pagina begint met een klein anker, dat we later gebruiken in de pagina om een linkje naar de bovenkant van de pagina te gebruiken.

2) Drie wrappers
Daarna komen er drie in elkaar geneste ‘wrappers'.

<div class="center">
  <div id="wrapper">
    <div id="wrapper_r">
    <div id="footer">
  </div>
</div>

a) div - class="center" - bevat de hele pagina en zet hem in het midden
b) div - id="wrapper" - bevat het template zonder de linker- en rechterkanten die buiten het template vallen
c) div - id="wrapper_r" - een tweede wrapper om de schaduw aan de rechterkant neer te zetten
d) div - id="footer" - de onderkant van de pagina

3) Kop en romp

<div id="header">
  <div id="tabarea">
  <div id="search">
  <div id="pathway">
  <div class="clr">
  <div id="whitebox">
  <div id="footerspacer">
</div>

In de laatste wrapper (wrapper_r) zitten de verschillende onderdelen van de pagina zoals de bezoeker deze ervaart als pagina: een kop en een romp.
a) div id="header" - de bovenkant van de pagina met het Joomla logo en een algemene tekst
b) div id="tabarea" - de navigatieknoppen
c) div id="search" - het zoekveld
d) div id="pathway" - het navigatiepad dat je ziet als je naar een pagina toegaat
e) div class="clr" - een element om als het ware opnieuw te beginnen (zie het als het omhalen van de hendel op een oude typemachine)
f) div id="whitebox" - de wrapper voor het middengedeelte van de pagina
g) div id="footerspacer" - een stukje witruimte tussen de romp en de footer

4) De romp

<div id="whitebox_t"/>
<div id="whitebox_m"/>
<div id="whitebox_b"/>

a) div id="whitebox_t" is een kleine witruimte bovenaan in de romp (de _t staat voor top)
b) div id="whitebox_m" is het middengedeelte van de romp (de _m staat voor middle). Deze bevat een linkerkolom, een middenstuk en een rechterkolom.
c) div id="whitebox_b" is een kleine witruimte onderaan in de romp (de _b staat voor bottom)

5) Debug
Helemaal onderaan de pagina zit nog een klein stukje joomla code om debug informatie te tonen. Als de debug functie hebt aanstaan, komt daar de debug informatie te staan.

<jdoc:include type="modules" name="debug"></jdoc:include>

Hoe nu verder?
Nu we het basisstramien weten, zullen we volgende keer kijken naar het bovenste gedeelte van de pagina: het logo en de ‘tagline', de navigatie en het zoekscherm.