Het creëren van stijlen in een Joomla template

Sinds Joomla 1.6 is het mogelijk met één template meerdere stijlen te gebruiken, een onmisbare feature waarmee je in een handomdraai verschillende pagina's een ander uiterlijk kunt geven.

Hoe doe je dat? Stappenplan!

In dit voorbeeld maak ik twee kleur variaties op mijn standaard template. De ene heeft een blauwe achtergrondkleur en de ander een groene, oftewel de blauwe en de groene stijl.
Bij het uitvoeren van dit stappenplan ga ik er vanuit dat je toegang hebt tot je site middels FTP of een console.

Stap 1

Aan de slag: open 'templateDetails.xml' in je template map. Onderaan het bestand, maar boven de </install> tag plak je het volgende blok:

<config>
 <fields name="params">
 <fieldset name="advanced">
 <field name="templateColor" type="list" default="template" label="Pagina Kleur" description="" filter="word">
 <option value="template">Standaard stijl</option>
 <option value="blauw">Blauwe stijl</option>
 <option value="groen">Groene stijl</option>
 </field>
 </fieldset>
 </fields>
 </config>

De eerste optie <option value="template">Standaard stijl</option> is het standaard template. Hetgeen na 'value' staat is de naam van je standaard css bestand, zonder de .css er achter. In de meeste gevallen heet deze template.css.

De naam "Standaard stijl" zie je later terug in de administrator.
De twee option-tags daaronder zijn de twee stijlen die we aan het maken zijn. Je kunt de value in de option-tag veranderen in de naam die je wilt (geen spaties en speciale tekens). De naam die je hier invult moet hetzelfde zijn als de stylesheet die je straks aan gaat maken voor de stijl. Wat je tussen de option tags zet zie je later terug in de admin, dus maak hier ook iets zinnigs van. Tot slot kun je ook nog in de tag 'field name' de naam van het label veranderen. Deze naam zal te zien zijn in de backend voor de pulldown met de stijlen. Nu heet deze 'Pagina Kleur'.

Stap 2

Open 'index.php' in je templatemap. Dit stukje bovenaan de pagina:

<?php $app = JFactory::getApplication(); ?>

Verander je in:

<?php $app = JFactory::getApplication();
 $templateColor = $this->params->get('templateColor');
 ?>

Stap 3

Nog steeds in index.php zoek je iets verder naar beneden naar de verwijzing naar het stylesheet, dat zal er min of meer zo uitzien:

<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/css_template.css" type="text/css" />

Zet daaronder op de volgende regel het volgende:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $templateColor;?>.css" type="text/css" />

Stap 4

Dan gaan we nu naar de css map in je template en maak daarin de verschillende stylesheet bestanden aan. Bij de options in templateDetails.xml hebben we blauw en groen aangemaakt. Maak dus twee stylesheets aan die je blauw.css en groen.css noemt. Laat de stylesheets leeg, maar zet (om straks te kunnen controleren of alles werkt) in groen.css deze code:

body { background: #409723; }

en in blauw.css deze code:

body { background: #2859A7; }

Het is het overzichtelijkst als je in de kleur stylesheets alleen die stukken css neerzet die afwijken van het standaard template. Zo wil ik in blauw bijvoorbeeld de kopjes blauw maken, dan kopieer ik alleen de h1, h2, h3 en h4 informatie naar blauw.css en verander de kleur in blauw. Je kunt op die wijze alle delen van de site die je er anders uit wilt laten zien kopiëren en aanpassen. Zo kun je ook bijvoorbeeld de body info aanpassen.

De browser laadt in een fractie van een seconde eerst het standaard template in en daarna laad het de veranderingen die je hebt gemaakt in bv. blauw.css er overheen, vandaar dat je niet alle css info in je nieuwe stylesheets hoeft op te nemen.

Stap 5

Log nu in bij administrator en ga naar: "Extensies > Template Beheer". Op het tabblad "Stijlen" vink je je standaard template aan en klik rechtsboven op "Dupliceren". Nu zie je in de lijst stijlen je template naam met (2) er achter. Klik hierop en verander de stijlnaam in iets zinnigs, bijvoorbeeld "Templatenaam - Blauw".

Rechts bij de Geavanceerde opties zie je nu "Pagina kleur" staan met een pulldown ernaast". Hierin zie je de opties "Standaard stijl, Blauwe stijl en Groene stijl". Kies de kleur die je wilt, voor dit voorbeeld kun je 'Blauwe stijl' selecteren en vink linksonder bij "Menutoewijzing" alle pagina's aan waarbij je wilt dat deze stijl getoond wordt.

Klik nu op "Opslaan en sluiten", ververs de eigenlijke site en klik op een van de menuitems die je net geselecteerd hebt om te kijken of alles goed gegaan is. En nu kun je aan de slag om je stijlen op smaak te maken...

Marijke Verkaik werkt bij OwnIT als Content Management Specialiste. Daarnaast houdt ze al jaren de Joomla Startpagina's bij. OwnIT houdt zich dagelijks bezig met Cloud, CMS en andere Open Source oplossingen. Twitter: @joomlapagina

Heb jij net als Marijke zelf een artikel geschreven dat je graag met andere Joomla gebruikers wilt delen? Neem dan contact met ons op.

Reacties (1)

0

#1

digibi vr 30 dec 2011, 14:59

Dat is een leuke uitsmijter. Bedankt Marijke.
digibi

Plaats reactie

Om een reactie te kunnen plaatsen op dit artikel zul je moeten inloggen aan de rechterzijde van deze pagina. Als je nog geen account hebt kun je er gratis een aanmaken waarna je een reactie kunt plaatsen.