Stap 14 - De vormgeving van je site aanpassen

Gepubliceerd: 6 november 2026.

De content staat op zijn plek, de modules ook. Tijd om de kooksite een eigen gezicht te geven. De mogelijkheden zijn eindeloos: je kunt een template van een andere maker installeren, een paginabouwer gebruiken of zelf een template bouwen. Voor deze serie houden we het bij wat Joomla zelf meelevert. Daarmee kom je verder dan je misschien denkt.

Templates en stijlen

Ga naar Systeem en klik in het blok Templates op Website templatestijlen. Je ziet hier twee stijlen staan.

Een template bepaalt de opbouw en de vormgeving van je site. Een stijl is een set instellingen voor een template, zoals kleuren en een logo. Je kunt van één template meerdere stijlen maken en die aan verschillende pagina's toewijzen. Zo kun je bijvoorbeeld de nagerechten een andere kopkleur geven dan de rest van de site.

1 Standaard

Het gele sterretje laat zien welke stijl op de site actief is. Op een schone installatie is dat Cassiopeia - Default, het standaardtemplate van Joomla.

2 Cassiopeia Extended

Sinds Joomla 6 zit er een tweede template bij: Cassiopeia Extended. Het is een uitgebreide versie van Cassiopeia met dezelfde opbouw en moduleposities, maar met veel meer instellingen voor kleuren en lettertypen. Je modules blijven dus gewoon op hun plek staan als je overstapt. Klik op Cassiopeia Extended - Default om de stijl te openen.

Sitenaam en logo

Open het tabblad Geavanceerd. Hier bepaal je wat er linksboven in de header komt te staan.

1 Merk

Staat deze optie op Ja, dan toont het template een logo of de naam van je site in de header.

2 Titel (alternatief voor logo)

Heb je (nog) geen logo, vul dan hier de naam van je site in. Wij kiezen voor Koken met Joomla. Kies je wel een logo via Logo, dan gebruikt Joomla deze titel als alternatieve tekst voor de afbeelding. Vul hem dus altijd in, ook als je een logo hebt.

3 Tag lijn

Een korte ondertitel onder de naam van je site, zoals Eenvoudige recepten voor iedere dag. Optioneel, maar het vertelt bezoekers in één oogopslag waar je site over gaat.

Gebruik voor je logo bij voorkeur een SVG-bestand. Dat blijft op ieder scherm scherp en is meestal heel klein. Heb je alleen een PNG, zorg dan dat hij ongeveer twee keer zo breed is als hij op de site wordt getoond.

Onderaan dit tabblad zetten we Terug naar boven link nog op Ja. Bij lange recepten verschijnt dan rechtsonder een knop waarmee bezoekers snel terug naar boven gaan.

Kleuren kiezen

Op het tabblad Kleurinstellingen stel je de kleuren van je site in: de header, de tekst, de links, de knoppen en de footer. Klik op het gekleurde vakje voor een kleurkiezer, of typ een waarde in het veld. Voor de kooksite kiezen we een warme, donkerrode kleur voor de header en de footer, met een iets lichtere tint voor de links en knoppen.

De kleurinstellingen van Cassiopeia Extended

Let goed op het contrast tussen tekst en achtergrond. Lichtgrijze tekst op een witte achtergrond ziet er strak uit, maar is voor veel mensen slecht leesbaar. Controleer je kleuren met een gratis contrastchecker, zoals die van WebAIM. Een contrastverhouding van minimaal 4,5:1 is de norm. Voor sommige organisaties is dat zelfs wettelijk verplicht.

Lettertypen

Op het tabblad Lettertype instellingen kies je bij Lettertypes schema welke lettertypen je site gebruikt. Daarnaast kun je de grootte van de tekst en de koppen aanpassen.

De lettertype-instellingen met het schema Roboto (local)

Je hebt een paar keuzes:

Selecteer systeemlettertypen: de site gebruikt de lettertypen die al op het apparaat van de bezoeker staan. Dat is het snelst.
Roboto (local): een strak lettertype dat vanaf je eigen server wordt geladen.
Fira Sans (web) en Roboto + Noto Sans (web): deze worden bij Google Fonts opgehaald.

Wij kiezen voor Roboto (local).

Kies liever niet voor de opties met (web). Bij ieder bezoek stuurt de browser van je bezoeker dan zijn IP-adres naar Google. Een Duitse rechter heeft een site-eigenaar daar in 2022 een boete voor gegeven, omdat dat zonder toestemming in strijd is met de AVG. Joomla waarschuwt er zelf ook voor in de gele melding. Met een lokaal lettertype of de systeemlettertypen loop je dat risico niet.

Stijl als standaard instellen

Ga terug naar het tabblad Details en zet Standaard op Alle. Deze stijl wordt dan voor de hele site gebruikt. Klik daarna op Opslaan & sluiten. In het overzicht staat het gele sterretje nu bij Cassiopeia Extended.

Het resultaat

Bekijk de site. De kooksite heeft nu een eigen naam in de header, warme kleuren en een rustig lettertype. En dat allemaal zonder één regel code.

Verder aanpassen met user.css

Niet alles is via de instellingen aan te passen. De tags onder de recepten zijn bijvoorbeeld nog blauw. Dat los je op met een eigen CSS-bestand met de naam user.css. Joomla laadt dat bestand automatisch als het bestaat, en het blijft bewaard als je Joomla bijwerkt.

Ga naar Systeem > Website templates en klik op Cassiopeia_extended gegevens en bestanden. Klik in de werkbalk op Nieuw bestand.

1 Map css

Klik links op de map css onder /media/templates/site/cassiopeia_extended. Let op dat je de goede map kiest: in een andere map wordt het bestand niet geladen.

2 Bestandsnaam

Vul user in, zonder extensie.

3 Bestandstype

Kies .css.

4 Maken

Klik op Maken. Het lege bestand opent direct in de tekstverwerker.

Zet daar de volgende CSS in en klik op Opslaan & sluiten. De tags krijgen nu dezelfde kleur als de knoppen.

.tags .btn-info {
  background-color: #a63d22;
  border-color: #a63d22;
}

Het bestand user.css in de tekstverwerker van het template

Pas nooit de bestaande bestanden van een template aan, zoals template.css of index.php. Die worden bij de volgende update van Joomla overschreven, en dan ben je je wijzigingen kwijt. Met user.css heb je daar geen last van.