JOOMLA 2.5 - TEMPLATES

VERANDEREN EN MAKEN

HOOFDSTUKKEN

In deze bijlage
Stappenplan
De basisonderdelen
templateDetails.xml
index.php
index.php - Header
index.php - Bodytag
index.php - Body
Opmaak
Menu's in templates
Template Stijlen
Verfijningen
Extra's
Links

In deze bijlage

Terug naar de top

 

Templates
Dit artikel gaat over het maken van templates ten behoeve van een Joomla 2.5 site. Een template is in feite de grafische schil rond de inhoud van de site. Templates staan, elk in een eigen map (genoemd naar desbetreffende template), in de map 'templates'. Via Modulebeheer --> Templates komt men bij een overzicht van templates waarvan er twee actief zijn, één voor het beheersdeel van de site en één voor de sie zelf. Wij houden ons bezig met een template voor de site zelf.
Er is standaard een aantal templates aanwezig. Met een druk op een knop kan men kiezen voor een andere template. Het is zelfs mogelijk voor verschillende delen van de site verschillende templates te gebruiken.

Stappenplan

Terug naar de top

Inhoud
- Stappenplan voor je nieuwe Joomla template
- Bedenk hoe je vormgeving eruit moet zien
- Maak het raamwerk zonder functionaliteit
- Breidt het raamwerk uit met Joomla code
- Bouw een typografie CSS-Stylesheet

Stappenplan voor je nieuwe Joomla template
De beste manier om je nieuwe Joomla template te realiseren is de pagina in stappen op te bouwen:

  1. Bedenk hoe je vormgeving eruit moet zien.
  2. Maak een raamwerk zonder functionaliteit.
  3. Breidt het raamwerk uit met Joomla code.
  4. Bouw het CSS stylesheet verder uit.

Testen is heel belangrijk. Dit kun je het beste lokaal doen of op een speciale ontwikkelserver. De werkwijze is als volgt:

  1. Maak of wijzig teksten met een editor en sla deze op;
  2. Laat de server op de achtergrond draaien en toon de joomla site;
  3. Kijk in een webbrowser hoe de wijzigingen eruit zien;
  4. Ga weer verder met stap 1.

(1) Bedenk hoe je vormgeving eruit moet zien
Ga eens kijken op diverse template websites. Maak vervolgens een schets van de indeling van de nieuwe site. Die zou er als volgt uit kunnen zien:

linker-
zij-
kolom
top rechter-
zij-
kolom
links-
-boven
-midden
-onder
kruimelpad
artikelen
bodem
rechts-
-boven
-midden
-onder
voettekst

Kort samengevat: Links en rechts (ter opvulling) zijkolommen. Hierin komt verder niets te staan. Het overig deel noemen we de pagina. Deze wordt gecentreerd. In de pagina staat bovenaan een header (met sitenaam, positie top, logo, etc), daaronder komen 3 onderdelen: linkerkolom (met drie posities), middenkolom (met kruimelpad,content kolom [met de artikelen] en bodempositie, en rechterkolom (met drie posities) en tot slot komt de voettekst. Een kenmerk van het ontwerp is dat de pagina even breed blijft (waarbij we overigens de breedte instelbaar zouden kunnen maken) en de linker- en rechterzijkolommen smaller of breder worden afhankelijk van de breedte van je beeldscherm. Dit heet een fluid ontwerp. Het midden is meestal 960 pixels breed; ongeveer een A4.

2) Maak het raamwerk zonder functionaliteit
Start met het opstellen van templateDetails.xml. Hierin worden alle bestanden (inclusief paden) en (Joomla) posities genoemd die in de template zullen worden gebruikt. Voor de werkwijze bij invulling van templateDetails.xml: Zie het deel "templateDetails.xml".
Vul de header van index.php in op de wijze als weergegeven in het deel "index.php - header". Ga vervolgens verder (in index.php) met de codes van de posities. Begin bij de indeling en voeg vervolgens de positionering toe. Voeg daar verder niets extras aan toe. Dat is voor een volgende stap. Dit helpt je om even los te denken van enige php code. Voordeel daarvan is dat je eenvoudiger kunt schuiven. Werk eventueel met nonsense teksten, zoals Lorem Ipsum. Een nonsense tekst helpt je het woordbeeld van een pagina te zien, zonder je al over de tekst druk te maken. (NB. In de loop van het proces zal templateDetails.xml regelmatig bekeken moeten worden om vast te stellen of die nog aansluit bij de op te stellen en opgestelde documenten.)

3) Breidt het raamwerk uit met Joomla code
De volgende stap is het raamwerk te vullen met echte content van Joomla. Dit doen we ook in meerdere stappen, we beginnen met de header (alles tot aan de start body tag). De eenvoudigste werkwijze is het overnemen van het head-deel met daarin alle noodzakelijke Joomla beveiliging, encoding en overige gegevens uit een andere Joomla template. Vervolgens roep je de externe bestanden aan. Dat zijn er tenminste twee: je stylesheet en je favicon. Het CSS stylesheet plaats je dus in een apart bestand. Dit vereenvoudigt je beheer aanzienlijk en zal je pagina sneller doen laden. Je favicon roep je ook aan op deze plek. Meestal zie je bij Joomla templates het logo van Joomla (niet erg origineel). Dus met deze simpele actie begint het al goed in de adresbalk.

Na de header komt de body aan de beurt. Hierin staan de module-positeis waar de inhoud in kan verschijnen. We voorzien de body van de eigen opmaak en brengen hier het raamwerk onder: het logo met de omschrijving en het zoekvenster, de navigatie, de content, de twee kolommen en de voettekst. Houdt de code zo eenvoudig mogelijk. Dit kan gedaan worden door de code op te knippen in blokken en deze in te sluiten. Hiervoor zijn de volgende redenen aan te voeren:
1) Je houdt het overzicht in je code. In plaats van een groot aantal regels code, zie je één regel met een include.
2) Het dwingt je heel goed na te denken over de structuur van je code.
3) Je kunt elementen eenvoudiger hergebruiken; als je een element elders wilt gebruiken, sluit je dat op die plek nog een keer in.
4) Het voorkomt dubbelingen in je code; includes dwingen je om bestaande code zo te schrijven dat het voor meerdere plekken te gebruiken is.
5) Het onderhoud aan je code is hierdoor ook eenvoudiger en minder tijdrovend.

4) Bouw een typografie CSS-Stylesheet.

We hebben nu gewerkt aan inhoud en layout, maar nog niet aan de vormgeving. Daarover gaat het volgende deel. De resultaten kunnen vastgelegd worden in template.css, maar ook in een nieuwe css-file genaamd typografie.css. Dit kan opzoeken en wijzigen gemakkelijker maken.

De basisonderdelen

Terug naar de top

Inhoud
- Overzicht bestanden en mappen

Templates zijn opgenomen in de map templates in de root van Joomla. De templates zitten in folders; foldernamen zijn daarbij gelijk aan de naam van de template. Het pad naar de template is derhalve:
<joomlaroot>/templates/<templatenaam>/

De belangrijkste zaken die een template regelt, zijn:

  • De globale indeling van de site.
  • De posities van de modules binnen de delen van de site
  • de opmaak van de site (lettertypes, groottes, kleuren, etc)

Eén en ander wordt vastgelegd in diverse bestanden. Deze en de volgende hoofdstukken gaan over deze bestanden en op de wijze waarop deze ingevuld moeten worden. NB. Het moge duidelijk zijn, dat het maken van een template een wisselwerking is tussen deze bestanden. Een bestand is pas af als de template af is.

Overzicht bestanden en mappen

De enige bestanden die strikt noodzakelijk zijn, zijn "templateDetails.xml" en "index.php". Joomla zoekt bij het openen van een site altijd naar deze bestanden. "templateDetails.xml" bevat een aantal basisgegevens. Daarnaast dient het als installatiescript wanneer de template als plugin wordt geïnstalleerd. De noodzakelijke gegevens waar Joomla dan naar vraagt zijn onder andere: welke bestanden dienen gebruikt te worden en waar staan deze. Met "index.php" wordt de site geopend. Deze geeft weer waar de diverse elementen van de site hun plaats krijgen. In de meest simpele vorm (alleen de twee genoemde bestanden) bevat "index.php" ook css-bestanden. De namen en locaties van deze eerste twee bestanden staan vast. Andere namen of locaties voor deze twee bestanden worden door Joomla niet geaccepteerd; de template werkt dan niet.
Het gebruik van extra files en van folders is niet strikt noodzakelijk maar maakt de template, met name als er veel files zijn, wel veel overzichtelijker. Van belang is het aanmaken van minimaal één file; een file met de css styles. Meestal wordt deze template.css genoemd en staat deze in de css-folder. In onze template is deze in tweeën gesplits: in layout.css en typography.css

Minimaal aanwezig zijn derhalve:

  1. templateDetails.xml.(verplicht) Dit bestand beschrijft welke bestanden je gebruikt in je template. Joomla gebruikt dit om - als je je template installeert - te controleren of alle bestanden aanwezig zijn en hoe de bestanden van je template zich tot elkaar verhouden. Daarnaast worden de posities benoemd en worden (indien gewenst) parameters opgenomen. Meer hierover in het volgende deel van deze serie.
  2. index.php. (verplicht) Dit is het belangrijkste bestand: dit regelt dat alle modules die je wilt gebruiken bij elkaar worden gevoegd. Dit wordt (samen met je stylesheets en afbeeldingen) de kern van je ontwerp. We zullen dit later uitvoerig gaan bespreken.

Bijna alle templates gebruiken aanvullende files en folders. De meest veelvoorkomende files zijn daarbij:

  1. index.html.Dit is een leeg bestand. Dit bestand is niet verplicht en kun je eventueel weglaten. Je moet het dan ook wel verwijderen uit je templateDetails.xml. De file is hier geplaatst om veiligheidsredenen. Het maakt het hackers moeilijk de site over te nemen. Het is daarom verstandig de file te laten staan. Zie voor de inhoud de bijlage hieronder.
  2. favicon.ico.Dit is een bestand waarmee je in het adres van je website een icoontje kunt laten zien. Dit wordt ook bij bookmarks opgeslagen. Dit is niet specifiek voor Joomla en voor de werking van de website niet interssant. Aanmaken kan door gebruik te maken van een tekenprogramma. De grootte van de tekening is 16x16 pixels. Sla de tekening op als "favicon.ico".
  3. params.ini.Dit is een bestand waarmee je keuzemogelijkheden (bijvoorbeeld voor wat betefft de breedte van de site of de basiskleuren) kunt inbrengen. Deze instellingen van de template xijn vervolgens (via de backend) op eenvoudige wijze aan te passen. Params.ini is gekoppeld aan templateDetails.xml. Het mag leeg zijn. Vulling vindt dan plaats via het administrator template scherm. Daar kan een keuze gemaakt worden met betrekking tot de gewenste parameters. Zie hierover later meer.
  4. template_thumbnail.pngDeze afbeelding laat zien hoe je template eruit als je het zou installeren (je ziet het als je in Joomla met je muis over een template gaat in de Template Manager; zie afbeelding hieronder). Als je van plan bent een commercieel template te maken, voeg dit dan toe aan je template. Het is voor de juiste werking van een template overigens niet nodig en dit bestd kan dus weggelaten worden. De aanmaak is eenvoudig. Ga naar de voorpagina en maak een schermafdruk. Verklein deze tot een grootte van rond de 140x90 pixels en sla deze op als "template_thumbnail.png".
  5. template_preview.png Deze afbeelding komt tevoorschijn als op de thumbnail wordt geklikt. De grootte is 800x600pixels. Ook deze afbeelding is niet nodig en kan dus weggelaten worden. De aanmaak is eenvoudig. Ga naar de voorpagina en maak een schermafdruk. Verklein deze tot een grootte van rond de 800x600 pixels en sla deze op als "template_preview.png".

Naast bovengenoemde bestanden maken ook een aantal folders deel uit van een Joomla template.
Als je een Joomla design bekijkt zul je zien dat er min of meer een vaste indeling is. Vaak komt men de volgende folders tegen:

  1. CSS. Hierin worden de css-stylesheets geplaatst.
  2. images. Hierin worden de afbeeldingen geplaatst.
  3. html. In de html folder komen bestanden waarmee je als ontwerper onderdelen van je template veel beter dan voorheen kunt bepalen. Ze vervangen standaard template onderdelen en worden "template-overrides" genoemd. Hierover later meer.
  4. js. Een folder die men ook wel tegenkomt is javascript. Deze bevat javascript bestanden.

In feite kan men net zoveel files en folders toevoegen als men wenst. Zij dienen wel geregistreerd te zijn in templateDetails.xml.

templateDetails.xml

Terug naar de top

Inhoud
- Openingsstatement / Afsluiting
- Gegevens over de template
- Inhoud - files
- Inhoud - positions
- Inhoud - config
- templateDetails.xml: Eindresultaat

Het bestand templateDetails.xml is van cruciaal belang, omdat dit bij de installatie van je template precies aangeeft welke overige bestanden er aanwezig moeten zijn. Daarnaast worden hier de posities die de template gebruikt vastgelegd. "TemplateDetails.xml" kent de volgende onderdelen:

  1. Openingsstatements.
  2. Gegevens over de template zelf
  3. Inhoud (= installatiegegevens). Hieronder vallen onder meer:
    • files - welke bestanden moeten uitgepakt en geïnstalleerd worden bij de installatie van het template.
    • positions - welke moduleposities moeten gemaakt worden in Joomla bij de installatie van het template.
    • config - Dit deel beschrijft welke parameters moeten gemaakt worden bij de installatie van het template.
    Deze gegevens kunnen meerdere malen voorkomen
  4. Afsluiting

Openingsstatement / Afsluiting

"templateDetails.xml" begint met:

<?xml version="1.0" encoding="utf-8"?>
<install version="2.5" type="template">

[Gegevens en Inhoud]

</install>
  • xml version=...- Standaardregel
  • Install version... - Standaardregel. Noodzakelijk bij externe templates. Deze worden aangeboden als zip-file. Het installatieprogramma binnen modulebeheer herkent aan deze regel de bestanden als horende bij een template en zal ze dan ook op de juiste wijze installeren. 2.5 slaat daarbij op de versie van Joomla waarvoor de template bedoeld is.

Na deze regels komen de gegevens en de inhoud. De laatste regel met de sluittag van install vormt de afsluiting van "templateDetails.xml".

Gegevens over de template
De volgende onderdelen kunnen maximaal éénmaal voorkomen (maar zijn allen facultatief):

  • name - Zet hier de naam van je template. Omdat deze naam ook gebruikt wordt voor de foldernaam dient deze te bestaan uit tekens waar een filesysteem mee om kan gaan. Dus bijvoorbeeld geen spaties.
  • creationDate - De datum waarop je het template hebt gemaakt. De vorm is vrij.
  • author - De auteur of auteurs van het template.
  • authorEmail - Hoe je per e-mail bereikt kan worden.
  • authorUrl - Wat je website is.
  • copyright - De voorwaarden die je aan het gebruik van het template stelt.
  • license - Geef hier aan of het via een publieke licentie te gebruiken is.
  • version - Het versienummer. Dit is met name handig als je je template verbetert. Geef er dan een volgend versie nummer aan.
  • description - Een korte omschrijving van je template.

Gegevens over de template - Voorbeeld:

<name>eigen_template</name>
<creationDate>augustus 2011</creationDate>
<author>Fred Jansen</author>
<authorEmail>Dit e-mailadres wordt beveiligd tegen spambots. JavaScript dient ingeschakeld te zijn om het te bekijken.</authorEmail>
<authorUrl>http://www.f-jansen.nl</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0</version>
<description>Ontwikkeld in les template bouwen</description>

Een aantal van deze onderdelen zie je als je na een installatie bij het template kijkt naar de details (zie tweede regel).

Inhoud - files
Een lijst van bestanden (inclusief paden) die nodig zijn voor je template. Denk hierbij aan stylesheets, afbeeldingen en een favicon, javascript, php en html bestanden. Ook params.ini (waarover straks meer) en templateDetails.xml zelf staan erbij.

<files>
	<filename>index.php</filename>
	<filename>index.htm</filename>
	<filename>templateDetails.xml</filename>
	<filename>params.ini</filename>
	<folder>images</folder>
	<folder>css</folder>
	<folder>js</folder>
</files>

Inhoud - positions
Hier geef je aan welke posities je in je ontwerp hebt opgenomen en door de gebruiker ingesteld kunnen worden. Posities worden gebruikt om 'content' in onder te brengen. 'Content' bestaat uit artikelen of modules.
Joomla 2.5 kent in feite geen standaard posities in een pagina. Het hanteren van standaard posities heeft voordelen, daar wisselen van template met een andere template die ze ook gebruikt, eenvoudiger wordt. Verplicht is het niet. Men mag ook posities definiëren met bijvoorbeeld de naam zoeken. (NB. De namen suggereren de plaats van de bedoelde positie op het beeldscherm. templateDetails.xml bepaalt dit echter niet, De posities moeten gedefinieerd worden in index.php in combinatie met de css-file. Hierover later meer.)

De standaard posities in Joomla 1.5 waren:

  1. breadcrumb - het kruimelpad
  2. debug - een plek om informatie te tonen als je de site in debug modus bekijkt; dit is met name handig voor ontwikkelaars
  3. footer - de onderkant van de pagina
  4. left - links
  5. right - rechts
  6. syndicate - voor de syndicate module
  7. top - bovenaan
  8. user1 - gebruikerspositie 1
  9. user2 - gebruikerspositie 2
  10. user3 - gebruikerspositie 3
  11. user4 - gebruikerspositie 4

De gebruikersposities zijn niet direct duidelijk, maar die kun je beschouwen als vrije plekken waar je als gebruiker een module kunt plaatsen. Deze posities kun je ook zelf uitbreiden. Er zijn templates waar met 10 of meer gebruikersposities wordt gewerkt. Er wordt dan gewoon doorgeteld ("user10"). In je template bepaal je welke posities je wilt gebruiken en waar de posities staan en dat bepaalt weer waar je modules in je pagina verschijnen.
Naast deze posities is er een deel waar de artikelen geplaatst worden. Deze staat meestal in het midden en is standaard aanwezig. Ze hoeft niet in bovenstaande lijst opgenomen te worden.

Voorbeeld: ("eigen_template")

<positions>
	<position>top</position>
	<position>breadcrumb</position>
	<position>lefttop</position>
	<position>leftmiddle</position>
	<position>leftbottom</position>
	<position>righttop</position>
	<position>rightmiddle</position>
	<position>rightbottom</position>
	<position>bottom</position>
	<position>footer</position>
</positions>

Nb. Over posities...
Posities komen in feite in drie bestanden voor:

  1. templateDetails.xml - hier worden de posities genoemd.
    <positions>
    <position>top</position>
  2. index.php - hier wordt de globale indeling weergegeven
    <div id="tabarea"
    include module top
  3. css/typografie.css - Verfijning van de locatie
    #tabarea {}

Inhoud - config
Als je meerdere versies van een ontwerp hebt (bijvoorbeeld met meerdere kleuren), dan geef je in dit onderdeel aan welke parameters nodig zijn om die verschillen tot uiting te brengen. Nadere invulling vindt plaats in "index.php" en de diverse css-files. Door ze hier als parameters in te stellen kan de beheerder van de website deze via de beheeromgeving zelf aanpassen. Als een beheerder deze instellingen via de beheersomgeving wijzigt, worden deze opgeslagen in ‘params.ini’. Maar omdat een ontwerp natuurlijk een basisinstelling moet hebben, maak je zelf dit bestand alvast aan met de standaardwaarden van je ontwerp. Met deze waarden zal het template - nadat het voor de eerste keer geinstalleerd is - starten De standaardwaarde is de waarde vermeld bij "default". 'Params.ini' kan leeg zijn, maar moet aanwezig zijn als templateDetails.xml </config> bevat.

Voorbeeld: ("eigen_template")

<config>
	<fields name="params">
		<fieldset name="basic">
			<field
				name="colorVariation"
				type="list"
				default="white"
				label="Color Variation"
				description="Base Color of template">
				<option value="blue">blue</option>
				<option value="red">red</option>
			</field>
		</fieldset>
	</fields>
</config>

Deze parameter maakt het mogelijk om gebruik te maken van diverse stijlen binnen een template. Betekenis van de belangrijkste elementen van de inhoud:
name - naam van de parameter
default - waarde die als eerste (standaard) ingesteld moet worden
label - naam die de beheerder in de beheersomgeving ziet
description - korte verklarende tekst die getoond wordt als in de backend de muis op de wijzigingsknop staat.
Activeren gebeurt via index.php. Zie verder aldaar bij "parameters css-files".

Het gebruik van "field" en "fieldset" maakt het onderdeel "config" overzichtelijker, met name als er met veel parameters wordt gewerkt.

Hieronder zie je hoe dit er in de beheeromgeving uit ziet voor het rhuk_milkyway template. Rechtsboven zijn de kleur, achtergrond en breedte van het template in te stellen. Deze leveren een variabele op, die vastgelegd wordt in params.ini en vandaaruit gebruikt kan worden in index.php. Daartoe dient in index.php (bijvoorbeeld in de body) wel een specifieke code opgenomen te worden.
NB. Rukh_milkyway staat hier niet als standaard template ingesteld. Was dat wel zo, dan zou linksonder de menutoewijzing niet zichtbaar zijn, omdat de standaard geldt voor alle pagina's (tenzij via de pagina anders aangegeven.)

Kijk in de templateDetails.xml van de meegeleverde templates van Joomla hoe je binnen deze elementen de afzonderlijke onderdelen precies moet invullen. Dit wijst zich vanzelf.

templateDetails.xml: Eindresultaat

TemplateDetails.xml is nu af. Het eindresultaat (in "eigen_template") ziet er als volgt uit:

<?xml version="1.0" encoding="utf-8"?>
<install version="2.5" type="template">

<name>eigen_template</name>
<creationDate>augustus 2011</creationDate>
<author>Fred Jansen</author>
<authorEmail>Dit e-mailadres wordt beveiligd tegen spambots. JavaScript dient ingeschakeld te zijn om het te bekijken.</authorEmail>
<authorUrl>http://www.f-jansen.nl</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0</version>
<description>Ontwikkeld in les template bouwen</description>

<files>
<filename>index.php</filename>
<filename>index.htm</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
<folder>js</folder>
</files>

<positions>
<position>top</position>
<position>breadcrumb</position>
<position>lefttop</position>
<position>leftmiddle</position>
<position>leftbottom</position>
<position>righttop</position>
<position>rightmiddle</position>
<position>rightbottom</position>
<position>bottom</position>
<position>footer</position>
</positions>


<config>
<fields name="params">
<fieldset name="basic">
<field
name="colorVariation"
type="list"
default="white"
label="Color Variation"
description="Base Color of template">
<option value="blue">blue</option>
<option value="red">red</option>
</field>
</fieldset>
</fields>
</config>

</install>

index.php

Terug naar de top

Inhoud
- Header en Body

De index pagina (index.php) is de eerste pagina van een Joomla template die wordt opgeroepen. Het is de motor van de site. Het wordt nu interessanter (en ingewikkelder…).

Header en Body
De basisopbouw van een HTML-pagina kent twee delen: een header en een body. (NB. Header kan gesplitst worden in Openingsstatements en het gedeelte tussen de <head>-tags.) In de openingsstatements staat een aantal algemene gegevens, waaronder een beveiliging. In de header staan de titel, metatags en links naar stylesheets en javascript bestanden. Als je in de broncode van de webpagina kijkt zul je deze nog wel zien staan. Bezoekers zien hier alleen de titel (boven in hun browser). De body bevat de inhoud die de bezoekers zien. We gaan de header en de body van deze pagina nu nader bekijken. Het geheel is sterk gekoppeld aan de css-file "layout.css".

index.php - Header

Terug naar de top

Inhoud
- Openingsstatements
- Head - statements
- Bestand ingesloten met een include
- Insluiten CSS bestanden
- Standaard aanwezig
- Voorwaardelijke css-files
- Parameter css-files
- Right to Left - css-files
- Resultaat: eigen_template - index.php - header

Openingsstatements
De index opent als een php pagina en start daarna met een stukje commentaar. In het commentaar staat dat het pakket valt onder een Open Source licentie. Deze code is met name bedoeld voor de programmeur en wordt niet meegenomen in de code van de website zelf. Je kan het zien als een beveiliging op inbreuk op de rechten van Joomla.
Vervolgens geeft Joomla een regel code die voorkomt dat gewone bezoekers rechtstreeks de pagina kunnen oproepen in de oorspronkelijke template folder. Hiermee test je of de _JEXEC variabele bestaat en gelijk is aan 1. Deze variabele wordt aangemaakt zodra je inlogt in de backend van Joomla. Als deze niet bestaat volgt het commando die(). Dit zorgt ervoor dat de rest van de code niet meer wordt uitgevoerd en de gebruiker hier ziet staan: ‘Restricted access’ - geen toegang! Vanaf hier begint de echte HTML pagina zelf.
Vervolgens worden een drietal variabelen toegevoegd
$app = JFactory::getApplication(); is een standaard variabele die het mogelijk maakt om diverse parameters op te vragen, als bijvoorbeeld de naam van de site, en deze in de template te gebruiken.
$leftcolgrid = "2"; en $rightcolgrid = "3"; zijn twee parameters die specifiek in deze template gebruikt worden. Waar deze exact voor nodig zijn, volgt later.

<?php
/**
* @copyright Copyright (C) 2011 Fred Jansen.
* @license GPL
*/

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >


$app = JFactory::getApplication();

$leftcolgrid = "2";
$rightcolgrid = "3";
?>

 

De eerste regel stopt ondeugende mensen om naar uw code te kijken en slechte dingen te doen.

De tweede regel is de Document Type Declaration (DOCTYPE), deze vertelt de browser en web crawlers welke versie van html de pagina gebruikt. Het "doctype" zoals hierboven beschreven is HTML5, een nieuwere versie van HTML welke grotendeels backwards compatibel is, maar is voorzien van veel nieuwe mogelijkheden. Houd er rekening mee dat dit niet goed werkt met Internet Explorer 8 (en ouder) zonder een hack. Onderzoek deze situatie en de wensen van je klant alvorens je besluit welk doctype je wilt gebruiken. Dit is echter wel de versie die in Joomla Joomla 3.0 en hoger wordt gebruikt.

Op de derde regel begint ons HTML document en beschrijft welke taal voor deze website wordt gebruikt. De variabele $this->language vult "en-gb" in, aangezien dat de standaard taal is van Joomla. De eerste twee letters komen uit de ISO 639 code lijst; de laatste twee van de ISO 3166 code list. Als je dit zou willen aanpassen naar Nederlands, gebruik dan de volgende code bovenin je pagina (net onder de beveiliging):
$this->setLanguage("nl");

Een html document is verdeeld in twee delen, een head en body deel. De head bevat de informatie over het document en de body zal website code bevatten waarmee u de lay-out definieert..

Hierna wordt de HTML pagina geopend:

 

Voorbeeld: Openingsstatements van "eigen_template":

<?php
/**
* @copyright Copyright (C) 2011 Fred Jansen.
* @license GPL
*/

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

$app = JFactory::getApplication();

$leftcolgrid = "2";
$rightcolgrid = "3";
?>

NB. De tussenruimtes zijn niet nodig. Die zijn hier geplaatst vanwege het overzicht.

Head - statements
Daarna wordt de head sectie zelf gestart. Die is binnen dit template heel eenvoudig:

  1. Eerst wordt een bestand ingesloten met een include.
  2. Vervolgens worden alle CSS bestanden ingesloten.

Bestand ingesloten met een include
Joomla 2.5 biedt de zeer handige mogelijkheid om de invulling van de <head>-tag over te nemen. Met deze eenvoudige opdracht sluit je in één keer het onderstaande blok code in (mits de gegevens door de administrator in Joomla via "Algemene instellingen" [global configuration] ingevoerd zijn). Via "bron weergeven" wordt deze zichtbaar in de <head>-tag als deze site geopend zou zijn. Bedoelde opdracht luidt:

<head>
<jdoc:include type="head" />
.....
</head>

Met deze opdracht wordt nu automatisch (indien ingevuld) het navolgende codeblok ingesloten en eventueel zichtbaar gemaakt:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla, Joomla!, Nederlands"/>
<meta name="description" content="Eigen website" />
<meta name="generator" content="Joomla! 1.6 - Open Source Content Management" />
<title>Welkom op de voorpagina</title>
<link href="/joomla15/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/joomla15/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/joomla15/templates/rhuk_milkyway/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script type="text/javascript" src="/joomla16/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/joomla16/media/system/js/caption.js"></script>

NB-1. De invulling is afhankelijk van de versie van Joomla en wat er ingevuld is bij de Algemene Instellingen.
NB-2. In index.php staat alleen de include-regel en dus niet deze tekst.

Je hebt nu je metatags geregeld (de inhoud komt uit het CMS), de titel van je pagina, je RSS feeds, een favicon, en twee javascriptbestanden die Joomla standaard gebruikt.

Insluiten CSS bestanden
Vervolgens worden alle CSS bestanden ingesloten.

De wijze van noteren, als er alleen beschikt wordt over templatee met de naam layout.css en typography.css, is als volgt:

<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/typography.css" type="text/css" />

Er zijn een paar dingen die opvallen:

  • Zoals je kunt zien neemt de $this->baseurlvariabele een belangrijke plek in. Dit is het pad naar je template toe.
  • Als hierboven reeds opgemerkt: De code $this->template kan je gebruiken als alternatief voor "rhuk_milkyway". Het op deze wijze weergeven maakt de code generieker; algemener.
  • Er is geen apart stylesheet voor een printversie van deze pagina. Hoe dat wel kan staat bij beez in een ander deel.

Standaard aanwezig
De eerste twee bestanden zitten standaard in Joomla. De notatie is vast. Het derde en het vierde bestand verwijzen naar bestanden waarin je zelf je css-gegevens opslaat. Bij deze bestanden wordt een php-statement gebruikt: <? php echo $this->template ?>. Er wordt gecontroleerd welke de actieve template is (dat is hier dus eigen_template) en vervolgens wordt die geladen. Bovenstaand statement is generiek en kan in elke template gebruikt worden. Hooguit zouden de namen van de css-files gewijzigd moeten worden.
Het is ook mogelijk hier een vaste notatie te gebruiken. In plaats van het php-statement komt er dan de filenaam van de template te staan. In geval van eigen_template wordt dat: <link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/eigen_template/css/layout.css" type="text/css" />.

Er kunnen nog meer bestanden aan toegevoegd worden. Te noemen zijn ondermeer:

Voorwaardelijke css-files
Dit zijn files die alleen onder bijzonder voorwaarden gebruikt worden. Voorbeeld: Files die gebruikt worden als de gehanteerde browser van een ouder soort is. 

Parameter css-files
Deze voorbeelden zijn deel van een techniek om een template parameter te gebruiken.

Allereerst de uitgebreide methode. Hierbij worden, naar keuze, aparte css-files geladen:
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/eigen_template/css/<?php echo $this->params->get("colorVariation"); ?>.css" type="text/css" />
De code $this->params->get("colorVariation") maakt dat de keuze die je hebt gemaakt toen je het template instelde, wordt opgepakt. Met $this->params->get() kan je dus alle variabelen uit je params.ini bestand gebruiken in je template!
De gegevens waarnaar gezocht wordt, zijn opgeslagen in de bestanden white.css, red.css en blue.css.

Vervolgens de korte methode. Hierbij wordt verwezen naar een specifiek item in een css-file:
<div id="kop_<?php echo $this->params->get('kleurVariatie'); ?>">
De mogelijke kleurvariaties (bijvoorbeeld groen en blauw) zijn als parameter genoemd in templateDetails.xml. De inhoud zelf staat in een standaard css file. Die is te vinden onder #kop_groen en #kop_blauw.

Right to Left - css-files
<?php if($this->direction == "rtl" : ?>
<link href="/algemeen/<?php echo $this->baseurl ?>/templates/eigen_template/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php endif; ?>

Niet ingevulde kolommen verwijderen.
Het middengedeelte van de pagina bevat onder andere menu's, en teksten. Het middengedeelte is verdeeld in drie kolommen. de linker- en de rechterkolom met bijvoorbeeld menu's en een agenda en een middenkolom met de artikelen.Het zou mooi zijn als de linkerkolom en/of de rechtkolom toegevoegd zouden worden aan de middenkolom als zij geen modules zou bevatten. Er is dan meer ruimte voor tekst. Hierover later meer.

Standaard Afbeeldingen
Als je afbeeldingen wilt toevoegen aan de template kan je het op deze manier doen:
<img src="/algemeen/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/myimage.png" alt="Custom image" class="customImage" />

Resultaat: eigen_template - index.php - header

<?php
/**
* @copyright Copyright (C) 2011 Fred Jansen.
* @license GPL
*/

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

$app = JFactory::getApplication();

$leftcolgrid = "2";
$rightcolgrid = "3";
?>

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/typography.css" type="text/css" />
<img src="/algemeen/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/myimage.png" alt="Custom image" class="customImage" />
</head>

index.php - de bodytag

Terug naar de top

Inhoud
- De bodytag

Nu we de header van het ontwerp helemaal onder de knie hebben, zijn we toegekomen aan de body van het template. Ook hier wordt begonnen met een bespreking van de body van eigen_template. Belangrijk om even op te merken is dat de hele pagina opgemaakt kan worden met CSS! Dit biedt enorme voordelen voor een ontwerper. Bij eigen_template is index.php niet los te zien van de css-files in de map css. In index.php staan de modules, in de css-files de opbouw en de opmaak.

Voordat we beginnen met opzet en opmaak kijken we eerst naar de body-tag zelf.

De bodytag
In de "eigen_template" staan geen opmaakgegevens of variablelen in de bodytag. Het is echter wel mogelijk dit te doen. Voorbeeld uit rukh_milkyway :

<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'); ?>">

In dit voorbeeld van een body-tag 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:

  • de kleur: color_variabele. de variabele komt uit params.ini en wordt getoond door <? php echo $this->params->get(’colorVariation’); ),
  • de achtergrond: idem ( $this->params->get(’backgroundVariation’); ) en
  • de breedte: idem ( $this->params->get(’widthStyle’); ).

Hier gaat het om parameters die de gehele site veranderen. Het is uiteraard ook mogelijk om parameters te hanteren voor een deel van de site; bijvooorbeeld voor de kop. Je kunt dan werken met een <div id="kop_ ....



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:

Deel uit: template.css behorend bij rukh_milkyway

body.width_medium div#wrapper{
width: 950px;
}

body.width_small div#wrapper{
width: 773px;
}

body.width_fmax div#wrapper{
min-width: 750px;
max-width: 1050px;
}

index.php - de body

Terug naar de top

Om zaken in de body op te nemen wordt onder andere gebruik gemaakt van de jdoc:include - instructie. Een jdoc:include wordt als volgt genoteerd:
<jdoc:iclude type="type" name="positie" style="stijl">
Voor type kunnen de navolgende waarden gebruikt worden:

  • module - genereert een enkele module. Welke module dat is wordt bepaald door de eigenschap "name". Kan gebruikt worden voor de "names" menu, submenu en breadcrumb. Kan voorzien worden van een "stijl".
  • modules - genereert alle modules die bij een specifieke template positie horen. Kan eveneens voorzien worden van een "stijl".
  • component - mag maar één keer gebruikt worden. Genereert de artikelen in de body. Kan NIET voorzien worden van een "stijl".
  • head - mag veneens maar één keer gebruikt worden. Genereert de <head> van de pagina
  • installation - niet interessant. Wordt gebruikt in de joomla installatie template
  • message - genereert systeem- en foutmeldingen. Mogelijk interessant bij ontwikkelen van een site.

In de body willen we het volgende opnemen:
de naam van de site.
de modules: top, lefttop, -middle en -bottom en righttop, -middle en -bottom en de module bottom.
de module: breadcrumbs.
de plaats van de artikelen: component.
een voettekst.
Het geheel ziet er in zijn meest eenvoudige vorm als volgt uit:

<body>
<?php echo $app->getCfg('sitename');?>
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="lefttop" />
<jdoc:include type="modules" name="leftmiddle" />
<jdoc:include type="modules" name="leftbottom" />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
<jdoc:include type="modules" name="righttop" />
<jdoc:include type="modules" name="rightmiddle" />
<jdoc:include type="modules" name="rightbottom" />
<jdoc:include type="modules" name="footer" />
</body>

Wat houdt bovenstaande in:

  • het php-statement <?php echo $mainframe->getCfg('sitename');?>laat een string zien uit de "configuration.php"-file en wel de naam van de site. Genoemde file bevindt zich in de root van Joomla en wordt ingevuld met behulp van "Algemene instellingen".
  • het JDOC-statement brengt de diverse soorten (X)HTML output van de diverse modules in.
    • <jdoc:include type="component" />voegt de output van een component toe. Welke component dat is, bepaalt het menu. Veelal is het een artikel.
    • <jdoc:include type="modules" name="top" /> genereert de output voor een module locatie; in dit voorbeeld "top".

Alle modules zijn gekoppeld aan locaties. In bovenstaand voorbeeld worden de modules die gekoppeld zijn aan bovenstaande locaties (kan meer dan één module per locatie zijn) opgeroepen. Als de body uitsluitend op deze informatie zou bevatten, zou men de inhoud van de site in zijn geheel te zien krijgen, maar wel alle modules onder elkaar. Zie voorbeeld hieronder.
NB. Ongeveer halverwege ziet men de informatie in twee kolommen. Dat is de plaats waar de artikelen staan (component). Blijkbaar is gekozen voor weergave in blog-layout. Vandaar dat het eerste artikel over de gehele breedte staat en de vervolgartikelen in twee kolommen.
Deze kale opzet is al installeerbaar en hiermee kan de opzet op fouten gecontroleerd worden. We willen echter een mooie layout hanteren. We willen daarbij een layout hebben zonder gebruik te maken van 'tables'. We gebruiken pure CSS en daarbij met name de <div>-tag. Daaraan kan CSS gekoppeld worden.
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.

Structuur aanbrengen.

Bij de indeling van de pagina maken we gebruik van het 960 grid system, ontwikkeld door Nathan Smith (http://960.gs/). Er zijn twee varianten: 12 en 16 koloms. De 12 koloms is verdeeld in porties die 60 pixels breed zijn; de 16 koloms kent 40 pixel brede porties. Elke kolom heeft links en rechts een 10 pixel brede marge. Tussen de kolommen zit dus 20 pixels ruimte.
Als je bij een 12 koloms grid op de site één kolom wil maken over de volle breedte van de pagina (container_12), is deze 12x60 + 11x2x10 = 940 pixels breed. De kolommen en de tussenliggende marges worden in dit systeem samengevoegd. Links en rechts zijn dan nog 10 pixels marge. Wil men een kolom van 3 kolommen breedte (container_3), dan is deze 3x60 + 2x2x10 = 220 pixels breed. Het systeem is zo opgezet, dat als in één rij de cijfers achter container_ opgeteld 12 oplevert, dit gelijk is aan container_12 ofwel de gehele breedte van de pagina (940 pixels). Dit systeeem maakt het heel eenvoudig om breedte toe te voegen aan de elementen van een pagina.
In dit voorbeeld werken we met het 12 koloms - 960 grid system. De benodigde stijlgegegevens liggen vastgelegd in de file layout.css.

Eén en ander kan ook handmatig geregeld worden. Bovenstaande methode is eenvoudiger daar daar gebruik gemaakt kan worden van een aangeleverde layout.css. Wil men het zelf doen, dan gaat dat als volgt:
Men geeft een stylesheet mee aan de pagina waarmee locaties vastgelegd worden. Dat kan door dit gewoon in de header van de pagina in te sluiten (dus binnen de head tags en nog niet in een apart bestand), maar ook in een apart bestand. Voor de body tag en de verschillende DIVs definieer ik voorlopig het volgende:
body{}
#pagina{width:920px; }
#logo{}
#kolom-1{float:left; width:20%; }
#content{float:left; width:60%; }
#kolom-2{float:left; width:20%; }
#voettekst{clear:both; }
De volgende zaken zijn hier van belang:
  1. De pagina krijgt hier voorlopig een breedte van 920 pixels;
  2. kolom-1, content en kolom-2 krijgen de eigenschap float:left mee en een relatieve breedte waardoor ze naast elkaar geplaatst worden. De breedte is opgeteld 100%. (Normaal gesproken worden div's - omdat het blocklevel elementen zijn - onder elkaar geplaatst);
  3. de voettekst is noodzakelijk, ook als daar verder niets mee gedaan wordt. Om kolom-1, content en kolom-2 evenlang te laten worden, krijgt de voettekst de eigenschap clear:both mee. Hierdoor wordt ook weer vanaf het begin begonnen en wordt de volledige breedte van de pagina weer gebruikt.
    NB. Kolommen lopen nu wel door tot het einde, maar niet de inhoud van de kolommen. Die kunnen verschillend zijn. Om deze ook op lengte te krijgen dient nog een andere actie te worden genomen. Veelal wordt dit opgelost met JavaScript.

We gaan verder met het grid-960 systeem. Allereerst delen we de pagina in in hoofdelementen. Het ziet er dan als volgt uit:

<body>
<div id="header" class="container_12">
	... Bovendeel
</div>
<div id="content" class="container_12">
	(Middendeel)
	<div id="sidebar-l" class="grid_3 ">
		... Midden links
	</div>
	<div id="maincolumn" class="grid_6">
		... Midden midden
	</div>
	<div id="sidebar-r" class="grid_3">
		... Midden rechts
	</div>
</div>
<div id="footer" class="container_12">
	... Benedendeel
</div>
</body>

Toelichting
Een paar opmerkingen:

  1. Om het geheelk te kunnen positioneren wordt gebruik gemaakt van div-codes. In de div-code is opgenomen een class; class="container_(getal)". Deze zorgt ervoor dat diverse kolommen voorzien worden van een breedte. container_(getal) heeft daarnaast een ingebouwde martge.
    Maakt men geen gebruik van het 960-grid systeem dan dient men één en ander handmatig te regelen. Daartoe wordt de div uitgebreid met een class; bijvoorbeeld <div class="inside"> en in de css-file komt te staan: .inside {padding:10px;}.
  2. Ieder onderdeel kan van commentaar worden voorzien, ook de afsluitende tags. Het voordeel hiervan is dat je later in de broncode beter kunt zien hoe de code is opgebouwd. Bij eenvoudige sites is dat niet nodig.
  3. Het middendeel is ingedeeld in een samenpakker (Eng: wrapper). Dit concept wordt gebruikt om de drie kolommen (sidebar-l, maincolumn, en sidebar-r) naast elkaar te laten zien.
  4. Binnen de maincolumn div komt de hoofdinhoud van de pagina.

Verdere invulling

1) Het bovendeel
In het bovendeel vindt men de positie "top". Daarnaast is het ook mogelijk hier de naam van de site weer te geven. De naam is opgegeven bij het installeren van de site en staat opgeslagen bij de algemene instellingen. Het bovendeel ziet er dan als volgt uit:

<div id="header" class="container_12">
	<?php echo $app->getCfg('sitename');?>
	<jdoc:include type="modules" name="top" />
</div>

NB. De pagina kan beginnen met een klein anker, dat we later gebruiken in de pagina om een linkje naar de bovenkant van de pagina te leggen:
<a name="up" id="up"></a>
In onze template is dit niet opgenomen.

2) het middendeel
Daarna komt het middendeel met drie kolommen. In het linkerdeel vindt men drie posities t.b.v. modules: lefttop, leftmiddle en leftbottom. Het middendeel heeft boven de positie breadcrumbs, in het midden wordt de content (de artikelen) geplaatst en onderaan een positie met de naam bottom. In het rechterdeel zijn eveneens drie posities; righttop, rightmiddle en rightbottom. In de meest eenvoudige vorm ziet die er als volgt uit:

<div id="content" class="container_12">
	<div id="sidebar-l" class="grid_3 ">
		<jdoc:include type="modules" name="lefttop" />
		<jdoc:include type="modules" name="leftmiddle" />
		<jdoc:include type="modules" name="leftbottom" />
	</div>
	<div id="maincolumn" class="grid_6">
		<jdoc:include type="modules" name="breadcrumbs" />
		<jdoc:include type="component" />
		<jdoc:include type="modules" name="bottom" /<
	</div>
	<div id="sidebar-r" class="grid_3">
		<jdoc:include type="modules" name="righttop" />
		<jdoc:include type="modules" name="rightmiddle" />
		<jdoc:include type="modules" name="rightbottom" />
	</div>
</div>

In deze opzet zijn er drie vaste kolommen onafhankelijk of die gevuld zijn of niet. Het zou mooi zijn dat, als er in een kolom geen modules actief zijn, deze bij de middenkolom wordt getrokken. Dit is mogelijk, maar vergt verdere verfijning. Verderop wordt daarop ingegaan.

3) het benedendeel

Het benedendeel bevat de footer. De code daarvan is als volgt:

<div id="footer" class="container_12">
	<jdoc:include type="modules" name="footer" />
</div>

Eronder kan (mits ook opgenomen in templateDetails.xml) eventueel een debug module geplaats worden. De code daarvan zou zijn: <jdoc:include type="modules" name="debug" />.

4) voorlopig resultaat.

<body>
<div id="header" class="container_12">
	<?php echo $app->getCfg('sitename');?>
	<jdoc:include type="modules" name="top" />
</div>
<div id="content" class="container_12">
	<div id="sidebar-l" class="grid_3 ">
		<jdoc:include type="modules" name="lefttop" />
		<jdoc:include type="modules" name="leftmiddle" />
		<jdoc:include type="modules" name="leftbottom" />
	</div>
	<div id="maincolumn" class="grid_6">
		<jdoc:include type="modules" name="breadcrumbs" />
		<jdoc:include type="component" />
		<jdoc:include type="modules" name="bottom" />
	</div>
	<div id="sidebar-r" class="grid_3">
		<jdoc:include type="modules" name="righttop" />
		<jdoc:include type="modules" name="rightmiddle" />
		<jdoc:include type="modules" name="rightbottom" />
	</div>
</div>
<div id="footer" class="container_12">
	<jdoc:include type="modules" name="footer" />
</div>
</body>

het geheel leidt tot het volgende, voorlopige resultaat:

Tot dit moment is alleen maar aandacht besteed aan de layout van de site. De opmaak is de standaard opmaak binnen Joomla. Alvorens de layout verder te verfijnen, gaan we eerst kijken naar de opmaak.

Opmaak

Terug naar de top

Inhoud
- Standaardisatie
- Modules in templates
- Invulling van index.php en typography.css

We hebben nu gewerkt aan inhoud en layout, maar nog niet aan de vormgeving. Daarover gaat het volgende deel. De resultaten worden vastgelegd in een nieuwe css-file genaamd typografie.css. (Denk eraan deze toe te voegen aan templateDetails.xml)

Van belang bij het maken van een css-file is om zoveel mogelijk shorthand te gebruiken. Hoe minder coderegels, des te beter. Voorbeeld:
Gebruik niet:
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
maar:
margin: 5px 10px;
Zie voor deze verkorte schrijfwijzen de cursus CSS.

Standaardisatie

We beginnen allereerst met een stuk standaardisatie door middel van een global reset.

  • Zet de margins en paddings op 0. De waarde van margin of padding verschilt per browser. Door deze op 0 in te stellen zijn ze overal gelijk, namelijk 0.
    * {margin:0;padding:0;}
  • Door margins en paddings op 0 te zetten, hebben ook blocklevel elementen als koppen en alinea's geen witruimten meer. Die moeten we vervolgens toevoegen.
    h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {margin:0.5em 0;}
    li,dd {margin-left: 1em;}
    fieldset {padding:.5em;}
  • Zet de font-size op 76%. Hiermee krijg je bij gebruik van verschillende browsers meer consistentie. Alle font-sizes worden dan weergegeven in em. Het toepassen van een lineheight:1.3 verbetert de leesbaarheid.
    body {font-size:76%; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:1.3;}

Modules in templates

Als een module door index.php wordt opgeroepen zijn er diverse mogelijkheden waarop zij wordt weergegeven. De syntax luidt:
<jdoc:include type="modules" name="LOCATION" style="OPTION">
De stijl is optioneel en ligt vastgelegd in templates/system/html/modules.php. Dze file bevat de volgende layouts:
1) table - dit is de standaard layout
2) xhtml
3) none
4) rounded
5) horz

table
Deze stijl zorgt ervoor dat Joomla een tabel genereert inclusief tabelkop. Voorbeeld van de output:

<table cellpadding="0" cellspacing="0" class="moduletable_menu">
	<tr>
		<th valign="top">inhoud</th>
	</tr>
</table>

xhtml
Deze zorgt ervoor dat Joomla een div genereert. Dit maakt een eenvoudige bewerking mogelijk. Tabellen worden vermeden en code beperkt. Voorbeeld van de output:

<div class="moduletable_menu"></div>

none
Deze stijl zorgt ervoor dat Joomla niets om de inhoud heen plaatst. De kale inhoud verschijnt zonder titel.

rounded
Maakt dat modules verschijnen in een format die het, bijvoorbeeld, mogelijk maakt een uitrekbare en van afgeronde hoeken voorziene kader om de module te plaatsen. Als deze stijl gebruikt wordt, verandert de name van de div van moduletable in module. Wordt onder andere gebruikt bij menu's. Voorbeeld van de output:

<div class="module_menu">
	<div>
		<div>
			<div>
				inhoud
			</;div>
		</div>
	</div>
</div>

horz
Toont de modules horizontaal door tabellen in tabellen te genereren. Interessant bij een horizontaal menu. Voorbeeld van de output:

<table cellpadding="0" cellspacing="1" border="0" width="100%">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
<tr>
<th valign="top">inhoud</th>
</td>
</tr>
</table>
</td>
</tr>
</table>

Als je de codes bekijkt, zie je dat die van xhtml en rounded magerder zijn en veel eenvoudiger te stileren. Bij voorkeur dienen daarom table en horz niet gebruikt te worden. In onze template zullen we xhtml gebruiken.

Invulling van index.php en typography.css

Bij index.php vullen we nu bij elke module de stijl "xhtml" in. Uitzondering: "component"; dat is immers geen module, en "breadcrump" deze krijgt de stijl "none".

nieuw resultaat.

<body>
<div id="header" class="container_12">
	<?php echo $app->getCfg('sitename');?>
	<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<div id="content" class="container_12">
	<div id="sidebar" class="grid_3 ">
		<jdoc:include type="modules" name="lefttop" style="xhtml" />
		<jdoc:include type="modules" name="leftmiddle" style="xhtml" />
		<jdoc:include type="modules" name="leftbottom" style="xhtml" />
	</div>
	<div id="maincolumn" class="grid_6">
		<jdoc:include type="modules" name="breadcrumbs" style="none" />
		<jdoc:include type="component" />
		<jdoc:include type="modules" name="bottom" style="xhtml" />
	</div>
	<div id="sidebar-2" class="grid_3">
		<jdoc:include type="modules" name="righttop" style="xhtml" />
		<jdoc:include type="modules" name="rightmiddle" style="xhtml" />
		<jdoc:include type="modules" name="rightbottom" style="xhtml" />
	</div>
</div>
<div id="footer" class="container_12">
	<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</body>

typography.css vullen we aan met wat stijlgegevens voor de modules met onder andere een rand en een achtergrond voor de diverse moduletitels. Het resultaat is als volgt:

Resultaat (typography.css-file versie 1):

* {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {margin:0.5em 0;}
li,dd {margin-left: 1em;}
fieldset {padding:.5em;}
body {font-size:76%; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:1.3; margin:1em 0; }

#header{font-size:2em;}
#footer{border-top: 1px solid #999;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
h1,.componentheading{font-size:1.7em;}
h2,.contentheading{font-size:1.5em;}
h3{font-size:1.3em;}
h4{font-size:1.2em;}
h5{font-size:1.1em;}
h6{font-size:1em;
	 font-weight:bold;}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
	font:0.8em Arial,Helvetica,sans-serif;
	color:#999;
	}
.moduletable{
	margin-bottom:1em;
	padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
	}
.moduletable h3{
	background:#666;
	color:#fff;
	padding:0.25em 0;
	text-align:center;
	font-size:1.1em;
	margin:0 -10px 0.5em -10px;}
	/*negative padding to pull h3 back out from .moduletable padding*/
ul.actions li{
	float:right;
	list-style:none;
	border:0;}
ul.actions li a img{
	border:0;}

Het resultaat hiervan is het volgende:

Diverse menu's in de standaardinstallatie hebben _menu als suffix. Om alles beter te kunnen laten lopen zou je die parameter kunnen schrappen.

Menu's in templates

Terug naar de top

Er zijn standaard een aantal mogelijkheden om een menu weer te geven:
List, Legacy Vertical, Legacy Horizontal en Flat List.
List is hiervan de beste, daar daarbij geen tabellen gebruikt worden. Dit vermindert de code zeer sterk en bovendien is het menu dan beter vindbaar voor zoekmachines, etc. Voordeel van het gebruik van css is ook, dat er veel voorbeeld-codes te vinden zijn op internet. Voorbeeld is css.maxdesign.com.au/listamatic. Daar zijn meer dan 30 menu's te vinden en ze worden nog aangevuld. Om ze te kunnen gebruiken binnen Joomla zijn wat aanpassingen nodig.
Een Nederlandse site waar veel over css en ook over menu's gevonden kan worden, is http://www.joomla-css.nl/index.php/nl/.

In het navolgende deel kijken we naar twee zaken:
1) Aanpassen en invoeren externe css-code;
2) Aanpassen bestaande code.

Aanpassen en invoeren externe css-code

We kijken naar een voorbeeld op bovengenoemde site. Deze lijsten gebruiken de volgende code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="/algemeen/ #" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a xhref="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Er is dus een omvattende <div> met de naam "navcontainer" en de <ul> heeft een id "navlist".

Als we dit ook in Joomla willen uitvoeren, hebben we een soort van allesomvattende <div> nodig. We doen dit door gebruik te maken van module suffixes. We wijzigen in de css-file de "navcontainer" - class style in een "moduletablesuffix" - class style.
Voor onze site gebruiken we "A List Apart's Taming lists" (http://css.maxdesign.com.au/listamatic/vertical10.htm) van Mark Newhouse. De code is:

.moduletablemenu{ padding:0; color: #333; margin-bottom:1em; }
.moduletablemenu h3 { background:#666; color:#fff; padding:0.25em 0; text-align:center; font-size:1.1em; margin:0; border-bottom:1px solid #fff; }
.moduletablemenu ul{ list-style: none; margin: 0; padding: 0; }
.moduletablemenu li{ border-bottom: 1px solid #ccc; margin: 0; }
.moduletablemenu li a{ display: block; padding: 3px 5px 3px 0.5em; border-left: 10px solid #333; border-right: 10px solid #9D9D9D; background-color:#666; color: #fff; text-decoration: none; }
html>body .moduletablemenu li a { width: auto; }
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{ border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

Nadat we dat gedaan hebben, moeten we aan een menu de suffix menu (ZONDER underscore) meegeven. Dit levert het menu in de gewenste stijl op; zie volgendde plaatje:

Tip - 1
We hebben nu gekeken naar de inhoud van het menu. Dit menu wordt geplaatst in een module met als class: .moduletable. moduletable en moduletablemenu dienen qua stijl wel op elkaar aangepast te zijn.

Tip - 2
Om te kijken of een menu werkt, kun je een standaard installatie van Joomla uitvoeren en vervolgens kijken naar de code die het hoofdmenu opmaakt. Kopieer dit geheel naar een editor en vervang alle koppelingen door #". Voeg vervolgens de css-stijl toe (in het head-deel) en kijk of het werkt. De testcode ziet er als volgt uit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<style type="text/css">
<!--
.astyle {
}

-->
</style>
</head>
<body>
<div class="moduletable">
<h3>Main Menu</h3>
<ul class="mainmenu">
<li id="current" class="item1 active"><a href="#">Home</a></li>
<li class="item2"><a href="#">Joomla! Overview</a></li>
<li class="item3"><a href="#">What's New in 1.5?</a></li>
<li class="item4"><a href="#">Joomla! License</a></li>
<li class="item5"><a href="#">More about Joomla!</a></li>
<li class="item6"><a href="#">FAQ</a></li>
<li class="item7"><a href="#">The News</a></li>
<li class="item8"><a href="#">Web Links</a></li>
<li class="item9"><a href="#">News Feeds</a></li>
</ul>
</div>
</body>
</html>
NB. Op de plaats van .astyle { } plaats je de ontwikkelde code (hierboven beginnend met .moduletable {..... De code is nu opgenomen in het document en gemakkelijker te testen en te wijzigen. Als de code werkt, kan die in een apart css-document worden geplaatst.

Verbergen van kolommen

In de pagina zoals wij die hier hebben opgezet, zitten naast de kolom met de artikelen nog twee kolommen; links en rechts daarvan. Er kunnen redenen zijn waarop het niet handig is deze te tonen, bijvoorbeeld: de kolom kan leeg zijn, of, in het artikel staat een formulier en het is handig in dit geval de hele breedte voor het artikel te gebruiken. Dit deel gaat over het onder voorwaarden verbergen van kolommen. Als een kolom altijd iets bevat, of als je van mening bent dat de middenkolom met de artikelen, ook als er kolommen leeg zijn, niet breder moet worden, dan kan dit hoofdstuk overgeslagen worden.

Joomla 1.6 kan eenvoudig het aantal modules tellen dat content aanlevert op een bepaalde positie. Dit kan met php getest worden en lege kolommen kunnen verborgen worden. Er wordt gewerkt met countModules. De basiscode ziet er als volgt uit:

<php if ($this->countModules ('condition')) : ?>
doe iets
<?php else : ?>
doe iets anders
<php endif; ?>

Vul in de eerste regel bij 'condition' (bijvoorbeeld 'left') in en tussen de twee )) de voorwaarde (bijvoorbeeld: > 0 )
dan wordt er gekeken of er in de linkerkolom ('left') enige inhoud is ( er zijn bijvoorbeeld 2 modules ). Als dat het geval is ( 2 is > 0 ) wordt de voorwaarde uitgevoerd.

Er zijn in dit geval vijf mogelijkheden:

  1. countModules ('left') - de modules in de linkerkolom worden geteld.
  2. countModules ('right') - de modules in de rechterkolom worden geteld.
  3. countModules ('left + right') - de modules in de linker- en rechterkolom worden geteld en opgeteld.
  4. countModules ('left and right') - er wordt gekeken of in beide kolommen modules staan. Als dat het geval is, is de uitkomst '1'.
  5. countModules ('left or right') - de modules in de linker- en rechterkolom worden bekeken. Is er in één kolom of in beide kolommen een modules, dan wordt de uitkomst '1' gegenereerd. Zijn er geen modules dan wordt het antwoord '0' weergegeven.

NB. 'left' en 'right' zijn hier posities. In het voorbeeld heeft de linkerkolom één posite; 'left'. Als er in een kolom meer posities zijn, krijg je, om te weten of de kolom leeg is: positie 1 andpositie 2 = voorwaarde.

In dit geval willen we kijken of een kolom leeg is, bijvoorbeeld de rechterkolom. Als die leeg is, willen we de ruimte toevoegen aan de middenkolom. Er zijn diverse manieren om dat te doen. Je kunt een voorwaarde opnemen in de body dat, als de kolom leeg is, er een andere stijl gebruikt moet worden. Wij maken echter gebruik van de mogelijkheden van het 960-grid systeem en passen daarbij de breedtes aan op grond van wat eenvoudige berekeningen.
Allereerst definiëren we in de header een paar variabelen:

$leftcolgrid=2
$rightcolgrid=3

In het <body>-deel gebruiken we vervolgens de variabelen om de grid-class te bepalen:

<div id="content" class="container_12">
	<div id="sidebar-l" class="grid_<?php echo $leftcolgrid;?>">
		<jdoc:include type="modules" name="left"style="xhtml" />
	</div>
	<div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>">
		<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
		<jdoc:include type="component" />
		<jdoc:include type="modules" name="bottom" style="xhtml" />
	</div>
	<div id="sidebar-r" class="grid_<?php echo $rightcolgrid;?>">
		<jdoc:include type="modules" name="right" style="xhtml" />
	</div>
</div>

NB. Hier is uitgegaan van één positie per kolom, genaamd 'left' en 'right'.

In bovenstaande codes wordt aan de hand van variabelen een berekening gemaakt van de breedte van kolommen. Met behulp van countModules gaan we de waarde van de variabelen vaststellen. Dat gebeurt in het <head>-deel:

<?php
if ($this->countModules('left') == 0):?>
<?php $leftcolgrid = "0";?>
<?php endif; ?>
<?php
if ($this->countModules('right') == 0):?>
<?php $rightcolgrid = "0";?>
<?php endif; ?>

NB. We controleren hier of de posities 'left' en 'right' nul modules hebben. Dan stellen we de grid grootte op 0. Standaard staat de grid grootte op 3.

Als we dit geheel nu vertalen naar de eigen_template met de drie posities links en drie posities rechts, dan ziet het er als volgt uit:

<?php
if (($this->countModules('lefttop') == 0 and $this->countModules('leftmiddle') == 0 and $this->countModules('leftbottom') == 0)):?>
<?php $leftcolgrid = "0";?>
<?php endif; ?>

<?php
if (($this->countModules('righttop') == 0 and $this->countModules('rightmiddle') == 0 and $this->countModules('rightbottom') == 0)):?>
<?php $rightcolgrid = "0";?>
<?php endif; ?>

In het eerste deel worden de modules geteld van de linkerposities. Als dat opgeteld nul is, wordt de linkerkolom op nul gesteld. In het tweede deel wordt hetzelfde gedaan voor de rechtermodules in de rechterkolom. Eronder wordt verwezen naar een javascript dat één en ander moet regelen. Voor de inhoud van dit script: Zie onderaan deze pagina.

Verbergen module codes

Als je inklapbare kolommen maakt, is het een goede gewoonte er voor te zorgen dat de moduiles niet gegenereerd eworden als er geen content is. Als je dat niet doet, bestaat de kans dat er pagina's komen met lege <div>'s erin. Dit kan problemen geven met de browser. Om te voorkomen dat er pagina's komen met lege <div>'s, erin, gebruik je het volgende statement:

<?php if($this->countModules('left')) : ?>
	<div id="sidebar-l" class="grid_<?php echo $leftcolgrid;?>">
		<jdoc:include type="modules" name="left"style="xhtml" />
	</div>
<?php endif; ?>

Deze code zorgt ervoor dat als er niets is gepubliceerd in de positie 'left' <div id="sidebar-l"< eveneens niet gepubliceerd wordt, noch alles wat erin zit wordt ook niet opgenomen in de gegenereerde pagina.

index.php is nu af. We hebben nu een eenvoudige, maar functionerende template die volledig uit css bestaat en beschikt over inklapbare kolommen.

index.php ziet er als volgt uit:
Om een duidelijker scheiding te maken tussen boven-, midden- en benedendeel is aan de code toegevoegd: <div class="clear">.

Resultaat: eigen_template - index.php

<?php
/**
* @copyright Copyright (C) 2011 Fred Jansen.
* @license GPL
*/
defined('_JEXEC') or die; // no direct access
$app = JFactory::getApplication();
$leftcolgrid = "2";
$rightcolgrid = "3";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">

<head>

<jdoc:include type="head" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" />
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/typography.css" type="text/css" />
<img src="/algemeen/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/myimage.png" alt="Custom image" class="customImage" />

<?php
if (($this->countModules('lefttop') == 0 and $this->countModules('leftmiddle') == 0 and $this->countModules('leftbottom') == 0)):?>
<?php $leftcolgrid = "0";?>
<?php endif; ?>
<?php
if (($this->countModules('righttop') == 0 and $this->countModules('rightmiddle') == 0 and $this->countModules('rightbottom') == 0)):?>
<?php $rightcolgrid = "0";?>
<?php endif; ?>
<script src="/algemeen/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/equalcolumns.js"
type="text/javascript"></script>

</head>

<body>

<div id="header" class="container_12">
<?php echo $app->getCfg('sitename');?>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>

<div class="clear"></div>

<div id="content" class="container_12">
<?php if($this->countModules('lefttop') or $this->countModules('leftmiddle') or $this->countModules('leftbottom')):?>
<div id="sidebar-l" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="lefttop" style="xhtml" />
<jdoc:include type="modules" name="leftmiddle" style="xhtml" />
<jdoc:include type="modules" name="leftbottom" style="xhtml" />
</div>
<div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>">>
<jdoc:include type="modules" name="breadcrumbs" style="none" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" style="xhtml" />
</div>
<?php if($this->countModules('righttop') or $this->countModules('rightmiddle') or $this->countModules('rightbottom')):?>
<div id="sidebar-r" class="grid_<?php echo $rightcolgrid;?>">
<jdoc:include type="modules" name="righttop" style="xhtml" />
<jdoc:include type="modules" name="rightmiddle" style="xhtml" />
<jdoc:include type="modules" name="rightbottom" style="xhtml" />
</div>
</div>

<div class="clear"></div>

<div id="footer" class="container_12">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>

</body>

Om het effect te kunnen bekijken is de log-in module rechts op 'niet gepubliceerd' gezet. De rechterkolom heeft dan geen modules. Het resultaat hiervan is dan het volgende:

Template Stijlen

Terug naar de top

Template stijlen is nieuw in Joomla 1.6 en verder. Het borduurt voort op het werken met parameters. Het verschil met Joomla 1.5 is, dat in Joomla 1.5 gekozen kon worden voor een parameter en deze dan gebruikt werd in de hele site. Wilde men dezelfde template maar met een andere actieve parameter gebruiken voor een ander deel van de site, dan moest men de template kopiëren. Bij Template Stijlen is dat niet nodig.

Stel we willen meer kleurvariaties gebruiken. We moeten dan vier zaken regelen:

  1. templateDetails.xml voorzien van een <config> ...</config> deel;
  2. een regel toevoegen in config.php
  3. de benodigde .css files aanmaken

Voorbeeld - de testsite van de Gereformeerde Kerk - Nijkerk:

Op deze site willen we een afwijkend logo en een afwijkende achtergrondkleur hebben voor het deel "Jeugd". Hetzelfde eventueel ook voor het deel "Info".

templateDetails.xml
<config>
<fields name="params">
<fieldset name="basic">
<field
name="siteVariatie"
type="list"
default="white"
label="Site Variatie"
description="Standaard kop van de template">
<option value="kerk">kerk</option>
<option value="jeugd">jeugd</option>
<option value="info">info</option>
</field>
</fieldset>
</fields>
</config>

index.php
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('siteVariatie'); ?>.css" type="text/css" />

css files
bij deze parameters horen drie css files te weten: kerk.css, jeugd.css en info.css. Als voorbeeld wordt de inhoud van kerk.css weergegeven:

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, sans-serif;
	font-size: small;
	background-color:orange;
	}

#hoofdmidden {
	height:141px;
	background-image:url(../images/gkn-k.jpg);
}

jeugd.css en info.css hebben een andere backgroundcolor en een andere background-image. Verder zijn ze volledig gelijk.

Het gebruik van stijlen

Klik in het administrator gedeelte op "Templates". Het volgende plaatje wordt dan zichtbaar:

Let hierbij op de toevoegingen bij de benamingen: - Default, respectievelijk - standaard. Als een nieuwe template geladen wordt, krijgt deze bovengenoemde toevoegingen mee.
De gkn template had ook de naam "gkn - standaard". Met behulp hiervan zijn drie "stijlen" aangemaakt. Allereerst de stijl "gkn - kerk - standaard". In feite is daar alleen de naam gewijzigd. De site variatie was ingesteld op "kerk" en daardoor werd gebruik gemaakt van de kerk.css file.
De andere stijlen; "gkn - info" en "gkn - jeugd" werden als volgt aangemaakt:

  • Vink "gkn - kerk - standaard" aan
  • Klik vervolgens op "Dupliceren".
    Er komt nu een nieuwe stijl met de naam "gkn - kerk - standaard (2)"
  • Open "gkn - kerk - standaard (2)"
  • Wijzig de naam in "gkn - jeugd"
  • Klik rechts bij Basis opties op Site Variatie.
  • Klik aldaar op jeugd.
  • Ga naar Menutoewijzing - menuselectie
  • Vink daar bij Hoofdmenu Jeugd aan en vink alle knoppen onder Jeugd aan.
  • Klik op "Opslaan

De nieuwe stijl is aangemaakt en tevens toegewezen aan de diverse menuknoppen.
NB. De afbeelding hieronder is die van "gkn - kerk - standaard". Deze is als standaard ingesteld.

Verfijningen

Terug naar de top

Inhoud
- Header
- Positie "top"
- Lengte van kolommen
- Achtergronden van kolommen
- Footer
- Flexibele modules
- Typografie

Header

Bij het aanmaken van het bovendeel van de site (veelal header genoemd) zijn er twee mogelijkheden:
1. Er wordt gebruik gemaakt van een plaatje (logo) met een vaste grootte.
2. Er wordt gebruik gemaakt van kleine afbeeldingen (slices) waarmee de grootte van de kop variable gemaakt kan worden.

Vaste grootte

Veelal wordt gewerkt met een vaste breedte van 960 pixels. Werken met slices is dan alleen interessant als men de mogelijkheid wil hebben in de hoogte te variëren. In het volgende voorbeeld wordt gewerkt met een logo met een vaste grootte.

index.php bevat dan:

<div id="header" class="container_12"> </div>

De inhoud van de css-file kan zijn:

#header {
	width: 960px;;
	height: 192px;
	vertical-align: bottom;
	border-bottom: 3px solid #87B825;
	background: #B4E637 url(../images/header.jpg) no-repeat top left;
	}

Opmerkingen
1. width is in feite niet nodig, omdat dit in index.php al gedefinieerd is (container_12)
2. logo heeft alhier de naam header.jpg. De grootte is 960x192px.
3. in dit voorbeeld is een onderrand aangemaakt.

Eén en ander is uit te breiden naarmate er meer aan de header wordt toegevoegd. Men kan daarbij denken aan het invoegen van de standaard naam van de site, aan extra modules en zelfs aan aanklikbare delen van het logo. Hierboven staat de standaardvorm met een kleine uitbreiding.

Variabele grootte

Bij het vormgeven van de header kan gebruikt worden van zogenaamde 'slices', van afbeeldingen, van logo's, enzovoort. Hier wordt gebruik gemaakt van een kleine afbeelding (bulls-eye.gif) en een slice (header-bg.gif):


bulls-eye.gif wordt links geplaatst en header-bg.gif wordt gebruikt als achtergrond, waarbij de repeatfunctie gebruikt wordt om deze paginabreed te krijgen.
De hiervoor benodigde css-code luidt als volgt:

#header {
	border-bottom: 3px solid #87B825;
	background: #B4E637 url(../images/header-bg.gif) repeat-x top left;
	}
#header h1 {
	margin: 0;
	padding: 25px;
	font-family: Georgia, serif;
	font-size: 150%;
	color: #374C0E;
	background: url(../images/bulls-eye.gif) no-repeat top left;
	}

In '#header' staat de achtergrond (gemaakt van een slice die bovenaan links geplaatst is en in de x-as herhaald wordt) en een scheidingslijn onder.
In '#header h1' staat het linker plaatje en staat aangegeven hoe de titel van de site moet worden getoond.

In index.php moet, om het voorgaande weer te kunnen geven, vervolgens het volgende staan:

<div id="header" class="container_12">
<h1><?php echo $app->getCfg('sitename');?></h1>
</div>

Het resultaat is als volgt:

NB. Er is hier voor gekozen om geen plaatje als logo te gebruiken, maar een tekst. De reden is dat search engines niet om kunnen gaan met plaatjes.

Stel we willen alhier ook een zoekmogelijkheid inbouwen. Deze moet een eigen achtergrond krijgen en de positie moet vastgekoppeld zijn aan de positie van de header. Bij #header zou dan toegevoegd kunnen worden position: relative;. Toegevoegd worden vervolgens aan de css-code:

#header input {
	background: url(../images/search.png) no-repeat;
	border:0;
	height:22px;
	width:168px;
	padding:2px;
	font: 1em Arial, Helvetica, sans-serif;
	}
#header .search {
	position: absolute;
	top: 20px;
	right: 20px;	
	}

Positie "top"

In de header was zowel de weergave van de sitenaam opgenomen als de positie "top". De positie "top" kan ook apart weergegeven worden. Header wordt dan gesplitsts in de hierboven vermelde header en er komt een onderdeel message bij.

<div id="message" class="container_12">
  <jdoc:include type="modules" name="top" style="xhtml" />
</div>

Op deze positie kan van alles worden weergegeven. Voorbeelden zijn: horizontaal menu, nieuwsfeed, berichten of een kruimelpad. We geven aan deze positie de navolgende stijl:

#message {
	font-size: 90%;
	color: #cc9;
	text-align: center;
	background: #404530 url(../images/message-bg.gif) repeat-x top left;
	}
#message .moduletable {
	padding:1px 10px;
	}

Het resultaat hiervan is als volgt:

Lengte van kolommen

Met eerder genoemde codes werd de achtergrond van een kolom getoond tot het einde van de daarin geplaatste module. Als in de diverse kolommen verschillende achtergronden getoond worden, is dit een lelijk gezicht. Zie voorbeeld:

De achtergronden van de diverse kolommen zouden moeten doorlopen tot de lengte van de langste kolom.

Om dit te realiseren is een script nodig dat de hoogte van de kolommen berekent en ze dan evenlang maakt. Er zijn velke scripts die dat kunnen. Wij gebruiken hier een script van Dynamic Drive: http://www.dynamicdrive.com/csslayouts/equalcolumns.js.
NB. In het script moeten de namen van de kolommen/elementen aangepast worden.

Achtergronden van kolommen

We voegen een nieuw blokelement toe; maincolback, voor het totale middendeel van de site. Hiermee kan de geelvervagende bovenkant over de gehele breedte worden aangebracht.

index.php wordt nu als volgt aangepast:

<div id="content" class="container_12">
<div id="maincolbck">
<?php if($this->countModules('lefttop') or $this->countModules('leftmiddle') or $this->countModules('leftbottom')):?>
<div id="sidebar-l" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="lefttop" style="xhtml" />
<jdoc:include type="modules" name="leftmiddle" style="xhtml" />
<jdoc:include type="modules" name="leftbottom" style="xhtml" />
</div>
<div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>">>
<jdoc:include type="modules" name="breadcrumbs" style="none" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" style="xhtml" />
</div>
<?php if($this->countModules('righttop') or $this->countModules('rightmiddle') or $this->countModules('rightbottom')):?>
<div id="sidebar-r" class="grid_<?php echo $rightcolgrid;?>">
<jdoc:include type="modules" name="righttop" style="xhtml" />
<jdoc:include type="modules" name="rightmiddle" style="xhtml" />
<jdoc:include type="modules" name="rightbottom" style="xhtml" />
</div>
</div>

<div class="clear"></div>

we geven aan content en maincolback de navolgende stijl:

#content {
	font-size: 95%;
	color: #333;
	line-height: 1.5em;
	background: url(../images/content-bg.gif) repeat-x top left;
	}
#maincolbck {
	background: url(../images/wrap-bg.gif) repeat-y top right;
	}

content geeft (met repeat-x) over de gehele breedte van het middendeel een geelvervagende achtergrond. Deze is 66 pixels hoog. Eronder wordt de standaardkleur wit getoond. Vanaf de rechterkant wordt (met repeat-y), tot onder aan toe een grijze kolom getoond met een vaste breedte van 240 pixels.
NB-1. Op dezelfde wijze als er rechts een kolom aangemaakt is, zou dit ook voor links kunnen. De stijlen kunnen dan gekoppeld worden aan sidebar-l, maincolumn en sidebar-r. NB-2. De grijze kolom heeft een breedte van 220 pixels. Dat is gelijk aan grid_3 (3x60 + 2x2x10). Als men de breedte van de kolom verandert, zou ook de breedte van wrap-bg.gif moeten veranderen.
NB-3. De grijze kolom is altijd zichtbaar, ook als er geen modules in de rechterkolom geplaatst zijn. Ook hier is het mogelijk een voorwaardelijke <div> te schrijven.

De bijbehorende afbeeldingen zijn de volgende:

Het resultaat is daarbij als volgt:

Footer

Tenslotte geven we ook wat stijlelementen aan de footer:

#footer {
	background: #828377 url(../images/footer-bg.gif) repeat-x top left;
	padding:1px 0;
	}

Flexibele modules

Als je modules ontwikkeld, moet je in ogenschouw nemen of je wilt dat deze de mogelijkheid hebben om horizontaal of verticaal uitgerekt te worden. In het volgende deel gebruiken we een aantal eenvoudige achtergrondplaatjes om meen module aan te maken die zowel horizontaal als verticaal uitgerekt kan worden. We plaatsen daartoe één achtergrondplaatje in de omvattende <div> en de andere voor de er tegenover liggende hoek op de <h3> header.
Bij dit ontwerp wordt niet voorzien in een horizontaal menu. Daarom voegen we meteen wat menustijlen toe.
De css codes zien er als volgt uit:

#sidebar-l .moduletable,#sidebar-r .moduletable {
	margin: 10px 0 10px 0;
	padding: 0 0 12px 0;
	font-size: 85%;
	line-height: 1.5em;
	color: #666;
	background: #fff url(../images/box-b.gif) no-repeat bottom right;
	}
#sidebar-l h3,#sidebar-r h3 {
	margin: 0;
	padding: 12px;
	font-family: Georgia, serif;
	font-size: 140%;
	font-weight: normal;
	color: #693;
	background: url(../images/box-t.gif) no-repeat top left;
	}
#sidebar-l p,#sidebar-r p,sidebar-l ul,#sidebar-r ul {
	margin: 0;
	padding: 0 12px;
	}
sidebar-l ul li,#sidebar-r ul li {
	margin: 0 0 0 12px;
	padding: 0 0 0 18px;
	list-style: none;
	background: url(../images/li-bullet.gif) no-repeat 0 3px;
	}

We gebruiken de navolgende achtergrondplaatjes: box-b.gif, box-t.gif, li-bullet.gif

bx-b en box-t hebben afgeronde hoekjes in de kleur van de grijze achtergrondbalk.

Het resultaat is als volgt:

Typografie

Oudere versies van Joomla hadden unieke classes voor diverse delen van de output, zoals bijvoorbeeld "contentheading". Joomla 1.6 maakt veel meer gebruik van bestaande classes als "H1", "H2", enzovoort en gebruikt daarnaast geen tabellen ten behoeve van stileren.
We geven de diverse elementen nu een eigen stijl:

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, serif;
	font-size: 150%;
	color: #663;
	font-weight: normal;
	}
h1 {font-size:2em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:1.5em;margin-bottom:0.75em;}
h3 {font-size:1.25em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.1em;line-height:1.25;margin-bottom:1.25em;}

Daarna voegen we nog wat bijzondere classes toe:

p.info {
	background: #F8FAFC url(../images/info.png) center no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #B5D4FE;
	border-bottom: 2px solid #B5D4FE;
	}
p.warn {
	background: #FFF7C0 url(../images/warn.png) center no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #F7D229;
	border-bottom: 2px solid #F7D229;
	}
p.alert {
	background: #FBEEF1 url(../images/exc.png) center no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #FEABB9;
	border-bottom: 2px solid #FEABB9;
	}
ul.checklist li {
	list-style:none;
	background: url(../images/tick.png) no-repeat 0 4px;
	line-height: 24px;
  padding-left: 20px;
	}

Bijbehorende plaatjes zijn: info.png, warn.png, exc.png en tick.png

Extra's

Terug naar de top

Inhoud
- Een print stylesheet
- Het aanpassen van de fontgrootte / Stylechanger Javascript
- centreren van de pagina
- variëren van de breedte van de pagina
- overflow:hidden
- Joomla specifieke css-classes
- Aanpassen bestaande code
- Wijzigen menukaders
- Kopjes boven de menu's
- Een alternatief voor verbergen van kolommen
- Wijzigen van core-files
- Aanklikbare achtergronden

In dit deel staan allerhande zaken, die gebruikt kunnen worden bij het opmaken van templates. Ze zijn meestal ontworpen voor Joomla 1.5 en niet getest voor Joomla 1.6.

Sommige zaken zijn alleen backside te wijzigen; dus niet door de bezoeker. Denk daarbij aan kleurvariaties. Andere zaken zijn ook door bezoekers aan te passen. Denk daarbij aan de fontgrootte. In de (beez) standaard templates van Joomla 1.6 zijn bijvoorbeeld de volgende zaken opgenomen:
- instellen kleine en grote wrapper
- wijzigen logo
- wijzigen website titel
- wijzigen website beschrijving
- wijzigen positie van de navigatie
- wijzigen gebruikte html-versie
- wijzigen template kleur
- een aparte print css-file
- een javascript voor wijzigen van de fontgrootte
Om deze mogelijkheden zelf te gebruiken: Bestudeer Beez.

Een print stylesheet

Het is mogelijk een aparte stylesheet te maken voor het afdrukken van een pagina.

Het volgende moet dan opgenomen worden in index.php:
<link rel="stylesheet" href="/algemeen/<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" /> Door bij media Print in te vullen wordt het print.css stylesheet gebruikt als je de pagina wilt printen. Dit heeft het volgende effect...

In de map css dient dan vervolgens het bestand print.css te worden opgenomen.

Het aanpassen van de fontgrootte / Stylechanger Javascript

Rechts bovenin het template heeft beez een paar knopje om de fontgrootte van de pagina aan te passen.

In het head-gedeelte staat daartoe een verwijzing naar één extra javascript:
<script type="text/javascript" src="/algemeen/<?php echo $this->baseurl ?>/templates/beez/javascript/md_stylechanger.js"></script>
Met dit script kan een bezoeker de lettergrootte van de pagina wijzigen.

In het body gedeelte van index.php dienen dan (op de juiste plek) de volgende coderegels opgenomen te worden:
<div id="fontsize">
<script type="text/javascript">
//<![CDATA[
document.write('<h3><?php echo JText::_('FONTSIZE'); ?></h3><p class="fontsize">');
document.write('<a href="/algemeen/index.php" title="<?php echo JText::_('Increase size'); ?>" onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('bigger'); ?></a><span class="unseen"> </span>');
document.write('<a href="/algemeen/index.php" title="<?php echo JText::_('Decrease size'); ?>" onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('smaller'); ?></a><span class="unseen"> </span>');
document.write('<a href="/algemeen/index.php" title="<?php echo JText::_('Revert styles to default'); ?>" onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('reset'); ?></a></p>');
//]]>
</script>
</div>

Het stukje code maakt gebruik van twee javascript functies: changeFontSize() en revertStyles().
1) Aan changeFontSize() kan je een positieve of negatieve waarde meegeven. Bij een positieve waarde van 2 wordt de lettergrootte van de pagina 10% groter, bij een negatieve van -2 10% kleiner.
2) Met revertStyles() kan een bezoeker de oorspronkelijke instelling terughalen (terug naar 100%).
Het is zo geschreven dat je maximaal kunt vergroten naar 220% en minimaal kunt verkleinen naar 60% en dat je voorkeuren onthouden worden met behulp van een cookie. De precieze werking hiervan valt wat buiten de scope van deze serie. Wil je zelf weten hoe het werkt, bekijk dan de werking van deze functies via het javascript bestand javascript/md_stylechanger.js.

centreren van de pagina

Centreren van de pagina vergt enig kunstwerk, omdat met name oudere versies van Internet Explorer niet goed om kunnen gaan met css. Het centreren gebeurt nu in twee slagen:

  1. body geven we mee: {text-align:center;}- hiermee wordt alles in het centrum geplaatst.
  2. pagina krijgt vervolgens: {margin:0 auto; text-align:left;} - hiermee worden de teksten in de rijen en kolommen vervolgens naar links gejusteerd.

variëren van de breedte van de pagina

We willen een pagina hebben met een minimum ingestelde breedte van 760 pixels (sommige computers gebruiken nog steeds een resolutie van 800x600 pixels) en een maximum ingestelde breedte van 960 pixels (breder is niet verstandig omdat in de praktijk is gebleken dat de ogen dan een te grote afstand van links naar rechts moeten afleggen om één regel te lezen. Dit blijkt onplezierig lezen te zijn. Daartoe wordt de vaste breedte gewijzigd in:
min-width:760px;
max-width:960px;
width: auto !important /* IE6 hack */
width:960px; /* IE6 hack */

overflow:hidden

Aan de kolommen is een nieuwe stijl toegevoegd: overflow:hidden. Dit maakt het afbreken van de pagina consistenter als we de breedte wijzigen.

Resultaat (css-file versie 2):

body
{
text-align:center; /*center hack */
}
#pagina
{
min-width:760px;
max-width:960px;
width: auto !important /* IE6 hack */
width:960px; /* IE6 hack */
margin:0 auto; /*center hack */
text-align:left; /*center hack */
}
#logo{}
#kolom-1{float:left; width:20%;overflow:hidden }
#content{float:left; width:60%;overflow:hidden }
#kolom-2{float:left; width:20%;overflow:hidden }
#voettekst{clear:both; }
.inside {:padding:10px;}

Joomla specifieke css-classes

adminform
article_separator
author
bannerfooter
bannergroup
bannerheader
banneritem
blog
blog_more
blogsection
breadcrumbs
button - Instellen van de stijl van een button in een formulier
buttonheading
clr
componentheading - opmaken van de kop van een componentpagina; bijvoorbeeld de voorpagina
content_email
content_rating
content_vote
contentdescription
contentheading - opmaken van de kop van een artikel
contentpagetitle
contentpane / contentpaneopen - worden gebruikt voor tabelcellen in de mainbody. class.contentpaneopen vindt men bijvoorbeeld op blog- en artikelpagina's, terwijl men class.contentpane terugvindt op een listpagina.
contenttoc - opmaken van tabellen, cellen en headers van een table of content (inhoudsopgave). Wordt gemaakt bij indeling van een artikel in hoofdstukken.
createdate - aanpassen opmaak datum van maken artikel
created-date
#current - ID dat wordt toegevoegd aan het actieve menu-item
date
input
inputbox - instellen van de stijl van een invoerveld in een formulier
intro
highlight - accentueren tekst, bijvoorbeeld bij zoekwoorden
latestnews - opmaken overzicht laatste nieuws
loclink
mainlevel / a.mainlevel:link / a.mainlevel:visited / a.mainlevel:hover - opmaken menu-items
message
metadata
modifydate - aanpassen opmaak datum van aanpassen van artikel
module
moduletable - wordt toegewezen aan het element (table of div) waarin een module geplaatst is. Meer hierover later.
mosimage
mosimage_caption
mostread - opmaak overzicht meest gelezen / populairste artikelen
newsfeed
outline
pagenav
pagenav_next
pagenav_prev
pagenavbar
pagenavcounter
pathway
poll / pollstableborder td - mogelijkheid tot opmaak van de volledige enquête of de tabel voor de keuzeopties.
read
readon - aanpssen read more / lees meer ...
search
searchintro - bepaalt samen met het ID #searchForm hoe het volledige zoekformulier en de tekst boven de zoekresultaten opgemaakt moeten worden.
sections
sectiontable_footer
sectiontableentry / sectiontableentry1 / sectiontableentry2 - worden gebruikt om een onderscheid te maken tussen de afzonderlijke regels in een tabel. Om een tabel overzichtelijkk te houden worden achtereenvolgens sectiontableentry1 en sectiontableentry2 gebruikt. Om de andere regel heeft de achtergrond een andere kleur. Kan ook worden gebruikt bij enquêtes.
sectiontablefooter
sectiontableheader - wordt gebruikt voor de kop van een list-pagina
small - omzetten van de tekst naar een kleiner lettertype. Wordt standaard gebruikt bij "Geschreven door ... ". Door hier extra kenmerken aan toe te voegen (bijvoorbeeld kleur en lettergrootte) kan men deze nog verder opmaken. (.small {color:#CCCCCC; font-size:75%;}
smalldark
sublevel
title
wrapper

HTML

Men kan ook de andere html-codes voorzien van een opmaak. Voorbeeld:
a:link {}
a:visited {}
a:hover {}

Standaardlinkstijlen die op alle links worden toegepast waaraan geen class wordt toegewezen door Joomla.

Aanpassen bestaande code

De standaard list - code van Joomla ziet er in html ongeveer als volgt uit:
<div class="moduletable"><ul class="memu">>li class="parent active item8">
<a><Link>/a<>/li<>/ul<>/div<

Opmaken van ongeordende lijsten kan vervolgens op twee manieren:
.modetable ul.menu li a {} of;
ul.menu li a {}
De vraag daarbij is hoe algemeen je de stijlen wilt houden. Wij kiezen voor de laatste variant.

We gaan wijzigingen in het navigatiemenu aanbrengen. We willen dat het menu eruit ziet alsof het fysieke knoppen bevat. Allereerst verwijderen we de opsommingstekens en daarna stellen we de opmaak in van a:link en a:visited. Deze zijn gelijk. a:hover krijgt een andere achtergrondkleur, tekstkleur en randkleur.
ul.menu {list-style:none;}
ul.menu li {}
ul.menu li a:link, ul.menu li a:visited (display:block; width:100%; height:25px; border-top:1px dashed #333; color:#000000; font-weight:bold; text-decoration:none;}
ul.menu li a:hover {background-color:#333; color:#ffffff; border-top:1px dashed #fff;}

Deze code heeft effect op alle menu's; immers alle menu's krijgen de class .menu toegewezen

We willen niet dat alle menu's er hetzelfde uitzien. Dit is als volgt te regelen:

  1. ken aan een menu een menu class suffix toe (bijvoorbeeld menuclass). Willen we het menu alsnog opmaken, dan zullen we ul.menumenuclass in plaats van ul.menumoeten invullen.
  2. gebruik geen suffixes, maar verleng het codepad; maak het meer specifiek. Dit kan door nog verder naar buiten te gaan. We komen er dan achter dat alles valt onder <div id="links">. Als we willen dat uitsluitend de menu-items in de linkerkolom gwijzigd worden, kunnen we dat op de volgende manier organiseren:
    #links ul.menu {}
    #links ul.menu li {}
    #links ul.menu li a {}

Wijzigen menukaders

Als je het menu de stijl "xhtml" hebt meegegeven, is elk menu voorzien van een omhullende div waaraan de class .menutable wordt toegevoegd (eventueel voorzien van een suffix). Hieronder de wijze waarop de opmaak van het menukader wordt bepaald:
.moduletable,
.moduletable_menu,
.moduletablemoduleclass
{ width:100%; backgroundcolor:#f1f1f1; border:1px solid #666666; margin-bottom:10px; padding:0; }

Kopjes boven de menu's

Hiervoor wordt de tag heading 3 gebruikt. Dit gaat vervolgens met de volgende code:
.moduletable h3,
.moduletable_menu h3,
.moduletablemoduleclass h3
{font-family:Verdana Arial; font-weight:bold; background-color:#333333; color:#FFFFFF; text-align:center; height:20px; padding: 5px 0 0 0; font-size:82%; margin:0 0 0 0; }

Een alternatief voor verbergen van kolommen.

We willen dat als een kolom leeg is, deze gebruikt wordt in de artikelbreedte. 100% wordt als er niets in de kolommen staat, 80% als er in één kolom iets staat en 60% als er in beide kolommen iets staat. We noemen die breedte $contentwidth. Het statement, dat in het head-deel van index.php geplaatst wordt, luidt nu als volgt:
<?php
if(&this->countmodules('left and right') == 0) $contentwidth = "100%";
if(&this->countmodules('left or right') == 1) $contentwidth = "80%";
if(&this->countmodules('left and right') == 1) $contentwidth = "60%";
?>

Om dit te effectueren moet in index.php in het body-deel de content div gewijzigd worden in:
<div id="content<?php echo$contentwidth; />">
Uiteraard moet dit statement verschijnen na de koppeling met de betreffende css-file.
De layout css wordt vervolgens veranderd in:
#content60 {float:left; width:60%; overflow:hidden;}
#content80 {float:left; width:80%; overflow:hidden;}
#content100 {float:left; width:100%; overflow:hidden;}

Na deze acties zijn de kolommen verdwenen, maar hebben we nog wel lege div-containers daarvoor in de plaats. Deze moeten ook verborgen worden. Om een lege div-container te verbergen is het volgende statement nodig:
<? php if($this->countModules('left')) : ?>
<div id="kolom-1">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>

Als er nu geen modules in de linkerkolom staan, zal <div id="kolom-1"> niet getoond worden.

Voorbeeld van index.php met inklapbare kolommen:

<?php
/**
* @copyright Copyright (C) 2007 Compass Design.
* GPL license
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

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

<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

</head>

<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg('sitename');?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php if($this->countModules('left')) : ?>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>

<div id="content<?php echo $contentwidth; ?>">
<div class="inside">
<jdoc:include type="module" name="breadcrumbs" style="none" />
<jdoc:include type="component" />
</div>
</div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules('footer')) : ?>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="bottom" style="xhtml" />
</div>
</div>
<?php endif; ?>
</div>
<!--end of wrap-->
</body>

</html>

NB. In dit voorbeeld is ook een 'kruimelpad' opgenomen. Daarnaast is de module 'footer' vervangen door 'bottom'. Dit maakt het eenvoudiger de tekst in de voettekst te veranderen. In plaats van het opnemen van een tekst in index.php wordt op deze plaats een 'custom' module getoond, die eenvoudiger te wijzigen is.

Wijzigen van core-files

Joomla beschikt over een aantal standaard files om componenten en modules weer te geven. Deze zitten binnen de folders components en modules in tmpl-folders.De wegen naar deze folders zijn verschillend omdat bij componenten er meerdere 'views' zijn. com_content heeft bijvoorbeeld als views: archive, article, category, frontpage en section. Voorbeelden van wegen zijn:
/modules/mod_newsflash/tmpl/
/modules/mod_poll/tmpl/
/components/com_content/views/article/tmpl
/components/com_login/views/login/tmpl

De basisstructuur van alle componenten en modules is: View -> Layout -> Templates. Kijken we in /components/com_content/views/category/tmpl/ dan zien we daar een layout-file: blog.php en template-files: blog_item.php en blog_links.php. Kijken we naar /modules/mod_newsflash/tmpl/ dan zien we daar drie files die geactiveerd worden afhankelijk van de module optie die gekozen is (default.php, horiz.php en vert.php en één file die door alle drie gebruikt wordt (_item.php).
Als je de opmaak in deze core-file zou willen wijzigingen kan dat door een nieuwe file aan te maken en deze op te slaan in:
/templates/'naam van de template'/html/com_content/category/ of
/templates/'naam van de template'/html/mod_newsflash/

Voorbeeld van wijziging van een core-file: mod_newsflash/_item.php. In deze file worden de tables vervangen door css-codes. NB. Bij componenten gaat het op dezelfde wijze. ER zijn dan vaak meerdere files die gewijzigd moeten worden.

Oorspronkelijk
<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>

<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<tr>
<td class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>" width="100%">
<?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
<a href="/algemeen/<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php echo $item->title;?>
</a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</td>
</tr>
</table>
<?php endif; ?>
<?php if (!$params->get('intro_only')) :
echo $item->afterDisplayTitle;
endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<tr>
<td valign="top" colspan="2"><?php echo $item->text; ?></td>
</tr>
</table>

<?php if (isset($item->linkOn) && $item->readmore) :
echo '<a href="'.$item->linkOn.'">'.JText::_('Read more').'</a>';
endif; ?>

Gewijzigd
<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>

<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<div class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
<a href="/algemeen/<?php echo $item->linkOn;?>"
class="contentpagetitle<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php echo $item->title;?>
</a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php if (!$params->get('intro_only')) :
echo $item->afterDisplayTitle;
endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php echo $item->text; ?>
</div>

<?php if (isset($item->linkOn) && $item->readmore) :
echo '<a href="'.$item->linkOn.'">'.JText::_('Read more').'</a>';
endif; ?>

Door deze file op de juiste plek op te slaan, zal deze de oorspronkelijke file overrulen. De override mogelijkheid is een krachtig middel van Joomla, ook in standaardtemplates wordt dit soms zeer uitgebreid toegepast.

Maken van aanklikbare achtergronden

Stel je hebt een template gemaakt en in die template zit een kop met een achtergrondplaatje (800x172px.). Je wilt nu een deel van het plaatje (200x172px) aanklikbaar maken. Mogelijkheden daarvoor zijn:

  1. Maak een position en stop daar dat plaatje in. De position wordt gebruikt als menu. Dit betekent dat dat plaatjers beschikbaar moet zijn (uitgesneden). Is dat niet het geval en het is deel van het achtegrondplaatje, dan kost dat extra veel werk.
  2. Maak een anker-tag als inline block en gebruik die in de koppeling. Dit kost minder energie dan het omwerken van het plaatje; eruitnemen van het aanklikbare deel, enzovoort.

Werkwijze

in index.php staat ongeveer het volgende:

<div id="site">
	<div id="header-content">
		<div id="full-width-header">We houden van Joomla!</div>
	</div>
	<div id="body-content">FJ redt de wereld!</div>
	<div id="footer-content">De echte coole webdesigner!</div>

De css file ziet er ongeveer als volgt uit:

#full-width-header {
	background: url(header-logo.jpg);
	width: 800px;
	height: 172px;
	}
#header-content {
	position: relative;
	float: right;
	width: 400px;
	height: 172px;
	vertical-align: bottom;
	text-align: right;
	}

We gaan nu een aanklikbare achtergrond maken. We maken een anker in een inline-block. Dit inline block wordt gevuld met een transparante één-pixel.gif. De navolgende wijzigingen dienen nu te worden aangebracht (weergegeven in schuinschrift):

In index.php:

<div id="site">
	<div id="header-content">
		<a href="/" id="home-link"> <img src="/algemeen/één-pixel.gif"></a>
		<div id="full-width-header">We houden van Joomla!</div>
	</div>
	<div id="body-content">FJ redt de wereld!</div>
	<div id="footer-content">De echte coole webdesigner!</div>

NB-1. Op de plaats van de / in de href dient de koppeling te staan. Dit kan een koppelking zijn naar een andere website, maar ook naar een pagina in de eigen site. Die pagina moet dan wel zichtbaar zijn (publiek). Wil men hier een koppeling maken naar een inlogpagina zonder dat die op een ander wijze zichtbaar is, dan kan dat als volgt:

  1. Maak een apart menu aan met menu-item inlogpagina
  2. Maak een aparte menumodule aan voor dit menu
  3. Ga naar de site en klik op de menuknop. Kopieer vervolgens de url in bovengenoemde href
  4. Ga naar de menumodule en maak deze onzichtbaar op elke pagina (moduletoewijzing: Geen pagina's).

 

NB-2. Als er een koppeling naar de eigen site gemaakt wordt, hoeft alleen het deel na de naam van de map van de site ingevuld te worden. Voorbeeld: index.php/login

In de css file:

#full-width-header {
	position: relative; /* het is noodzakelijk om de absolute-position van het child-element #home-link 
relatief te maken t.o.v. de header */ background: url(header-logo.jpg); width: 800px; height: 172px; } #home-link { position: absolute; display: inline-block; width: 200px; /* breedte van het logo */ height: 172px;
/* hoogte van het logo */ top: 0px; left:0px; /* linkerbovenhoek logo */ border: 0px; float: left; }
#header-content { position: relative; float: right; width: 400px; height: 172px; vertical-align: bottom; text-align: right; }

Links

Terug naar de top

 

Terug naar de top