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
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:
width: 950px;
}
body.width_small div#wrapper {
width: 773px;
}
body.width_fmax div#wrapper {
min-width: 750px;
max-width: 1050px;
}
De basisindeling
Als we de pagina een beetje opruimen (lees: alles terugbrengen tot de hoofdelementen), heeft deze de volgende indeling: