Door: Viviana Menzel.Categorie: Magazine.

Cassiopeia’s child template leert zichzelf aankleden: kleuren en lettergroottes

Cassiopeia’s leert zichzelf aankleden met een child-template: kleuren en lettergroottes in Joomla’s core-template

Joomla 6 is uitgebracht en brengt een uitstekend voorbeeld van een child template met nieuwe opties voor kleuren en lettergroottes.

Met Joomla 4.0 kregen we Cassiopeia als standaardtemplate en sinds 4.1 kunnen we child templates maken: een kopie van het template waarin je zoveel wijzigingen kunt aanbrengen als je wilt, terwijl het nog steeds alle functionaliteit van het parent template erft.

Een van de belangrijkste doelen voor Joomla 6 was het verbeteren van het Cassiopeia-template en het vereenvoudigen van de aanpasbaarheid. Om compatibiliteit met bestaande websites te waarborgen, introduceert Joomla 6 een child template gebaseerd op Cassiopeia, met nieuwe configuratieopties.

Wat is er nieuw?

Wanneer je installeert of update naar Joomla 6, vind je een nieuw template: Cassiopeia Extended.

 



 

 

In de template-instellingen zijn er twee nieuwe tabbladen beschikbaar: Colour Settings en Font Settings.

In de Colour Settings kun je aanpassen:

  • Header Background

  • Header Text

  • Body Background

  • Body Text

  • Links

  • Links Hover

  • Button Primary Background

  • Button Primary Hover Background

  • Button Primary Text

  • Button Primary Hover Text

  • Footer Background

  • Footer Text

 

In de Font Settings kun je kiezen:

  • Het Font Scheme (in Cassiopeia stond dit in het tabblad "Advanced")

  • De lettergrootte voor:

    • Body

    • H1

    • H2

    • H3

 

Hoe werkt het?

Ga naar:
Systeem → Templates → Site Templates
en klik op “Cassiopeia_extended Details and Files”.

Je ziet dat dit child template niet alleen een templateDetails.xml bevat, maar ook meerdere PHP-bestanden:
index.php, error.php, offline.php en component.php.

 

Deze bestanden zijn geen volledige overrides van Cassiopeia; ze breiden het parent template uit met de nieuwe opties.

Voorbeeld van index.php:

(De tekst toont een volledige index.php, die hetzelfde blijft in de vertaling, dus ik laat de code staan zoals in het origineel.)

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia_extended
 *
 * @copyright   (C) 2025 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

/** @var Joomla\CMS\Document\HtmlDocument $this */

require JPATH_THEMES . '/cassiopeia/index.php';

$wa = $this->getWebAssetManager();

// Advanced Color Settings
$wa->registerAndUseStyle('colors_custom', 'global/colors.css')
    ->addInlineStyle(':root {
        --body-bg: ' . $this->params->get('bodybg') . ';
        --body-color: ' . $this->params->get('bodycolor') . ';
        --btnbg: ' . $this->params->get('btnbg') . ';
        --btnbgh: ' . $this->params->get('btnbgh') . ';
        --btncolor: ' . $this->params->get('btncolor') . ';
        --btncolorh: ' . $this->params->get('btncolorh') . ';
        --footerbg: ' . $this->params->get('footerbg') . ';
        --footercolor: ' . $this->params->get('footercolor') . ';
        --headerbg: ' . $this->params->get('headerbg') . ';
        --headercolor: ' . $this->params->get('headercolor') . ';
        --link-color: ' . $this->params->get('linkcolor') . ';
        --link-hover-color: ' . $this->params->get('linkcolorh') . ';
    }')

    // Advanced Font Settings
    ->registerAndUseStyle('font_advanced', 'global/fonts.css')
    ->addInlineStyle(':root {
        --body-font-size: ' . $this->params->get('bodysize') . 'rem;
        --h1size: ' . $this->params->get('h1size') . 'rem;
        --h2size: ' . $this->params->get('h2size') . 'rem;
        --h3size: ' . $this->params->get('h3size') . 'rem;
    }');

Het bestand laadt eerst Cassiopeia’s originele index.php:

require JPATH_THEMES . '/cassiopeia/index.php';

Daarna voegt het nieuwe CSS-bestanden toe (colors.css en fonts.css) plus inline CSS-variabelen op basis van jouw instellingen.

Voorbeeld uit colors.css:

.container-header {
  background-color: var(--headerbg);
  background-image: none;
}

Deze CSS verandert de achtergrondkleur van de header op basis van wat je kiest in de Colour Settings.
Alle kleuren en lettergroottes worden ingesteld als CSS-variabelen (bijv. --body-color, --btnbg), zodat je ze ook in je eigen user.css kunt gebruiken.

Bijvoorbeeld, om de linkkleur te gebruiken als achtergrond van een card header:

.card-header {
  color: #fff;
  background-color: var(--link-color);
}


Wat komt er aan?

Child templates zijn een krachtige manier om een template uit te breiden zonder vanaf nul te hoeven beginnen. Cassiopeia Extended is een compact voorbeeld van wat mogelijk is.

Wil je het child template verder uitbreiden met meer opties? Op dit moment moet je het handmatig dupliceren.
Maar: Joomla 6.1 zal een ingebouwde kopieerfunctie introduceren, waardoor maatwerk nog eenvoudiger wordt.

Blijf op de hoogte!

Verder lezen

https://magazine.joomla.org/all-issues/january-2021/joomla-4-cassiopeia-template
https://magazine.joomla.org/all-issues/may-2022/a-deep-dive-into-joomla-child-templates

 


Dit artikel werd oorspronkelijk gepubliceerd in het Joomla Community Magazine.
Lees alle artikelen in het magazine via deze link
Joomla! bestaat al 20 jaar als Open Source project. Dat is een lange tijd in technologiejaren! 19 jaar geleden kon je niet eens een iPhone bezitten, of X gebruiken en waarschijnlijk had je geen Facebook-account maar een Hyves-account 😊.
Er is veel gebeurd, maar Joomla! is al die tijd een duurzame keuze gebleken als CMS voor miljoenen websites wereldwijd, ondersteund door een betrokken community.

 

1000 Resterende tekens

Deze site wordt beschermd door reCAPTCHA en Google Privacybeleid en Servicevoorwaarden zijn van toepassing.

© Copyright 2025