Zur Startseite

Cassiopeias Kind lernt, sich selbst anzuziehen: Farben und Schriftgrößen im Joomla Standardtemplate

Joomla 6 ist raus und bringt ein großartiges Beispiel für ein Child-Template mit neuen Optionen für Farben und Schriftgrößen.

Mit Joomla 4.0 wurde Cassiopeia als Standardtemplate geliefert und seit 4.1 können wir untergeordnete Templates (Child-Templates) erstellen: eine Kopie des Templates, in der sich Änderungen hinzufügen lassen, während sie immer noch alle Funktionen des Elternteils erben.

Eines der Hauptziele für Joomla 6 war es, Cassiopeia zu verbessern und ihre Anpassung zu vereinfachen. Um die Kompatibilität mit bestehenden Websites zu gewährleisten, führt Joomla 6 ein Child-Template ein, die auf Cassiopeia basiert und neue Konfigurationsoptionen enthält.

Was ist neu?

Wenn Joomla 6 installiert oder aktualisiert wird, findest du ein neues Template: Cassiopeia Extended

Guided Tour Joomla 6
Templates in Backend
Template Stile in Backend

Im Template-Stil stehen zwei neue Tabs zur Verfügung: Farbeinstellungen und Schrifteinstellungen

Neue Tabs im Template

In den Farbeinstellungen können folgende Farben geändert werden:

  • Header-Hintergrundfarbe
  • Farbe des Kopfzeilentextes
  • Haupttext Hintergrundfarbe
  • Farbe des Haupttextes
  • Farbe der Links
  • Farbe der Links im Hover-Zustand
  • Hintergrundfarbe der primären Schaltfläche
  • Hintergrundfarbe der primären Schaltfläche im Hover-Zustand
  • Farbe des primären Textes der Schaltfläche
  • Farbe des primären Textes der Schaltfläche im Hover-Zustand
  • Footer-Hintergrundfarbe, Farbe des Fußzeilentextes
Farbeinstellungen

In den Schrifteinstellungen können Sie das Schriftartschema auswählen (in Cassiopeia finden Sie diese Einstellung auf der Registerkarte Erweitert) und die Schriftgröße ändern

  • Schriftgröße Haupttext
  • H1
  • H2
  • H3
Schrifteinstellungen

Wie funktionieren die neuen Optionen?

Wenn wir zu System -> Templates -> Site Templates gehen und auf "Cassiopeia_extended Details und Dateien" klicken, werden wir feststellen, dass das untergeordnete Template nicht nur eine templateDetails.xml-Datei hat, sondern auch mehrere PHP-Dateien: index.php, error.php, offline.php und component.php.

Ordner- und Filestruktur

Diese Dateien sind keine vollständigen Overrides der original Dateien in Cassiopeia, sie erweitern sie mit den neuen Optionen.

Zum Beispiel sieht die index.php so aus:

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

Die Datei lädt die ursprüngliche index.php von Cassiopeia (das bedeutet "require"):

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

und fügt danach neue CSS-Dateien (colors.css und fonts.css) und Inline-Stile hinzu, um die neuen Optionen zu verwenden.

Die Datei colors.css enthält Definitionen wie diese:

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

Diese beiden CSS-Zeilen ändern die Hintergrundfarbe des Headers mit der Farbe, die in den Farbeinstellungen auswählt wurde. Alle diese Farben und Schriftgrößen sind als CSS-Variablen (--body-color, --btnbg, etc.) definiert, sodass sie auch in der user.css-Datei verwendet werden können. Wenn beispielsweise die Linkfarbe als Hintergrundfarbe für ein Card verwendet werden soll:

Login-Modul als Card mit grauem Headerbereich

In der user.css können wir hinzufügen:

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

Und das Modul wird so aussehen:

Login-Modul mit grünem Headerbereich

Was kommt noch?

Child-Templates bieten eine leistungsstarke Möglichkeit, ein vorhandenes Template zu verbessern, ohne bei Null anzufangen. Cassiopeia Extended ist ein kompaktes Beispiel, das zeigt, was mit diesem Ansatz möglich ist. Wenn du das Child-Template um zusätzliche Optionen erweitern möchtest, müsst du sie derzeit manuell duplizieren. Joomla 6.1 wird jedoch eine integrierte Kopierfunktion einführen. Wenn du noch ein bisschen durchhältst, ist eine einfachere Anpassung gleich um die Ecke. Bleibt dran!

Weiterführende Informationen

Dieser Artikel basiert auf einem im Joomla Magazine bereits erschienenen Beitrag: Cassiopeia’s Child Learns to Dress Itself: Colors and Font Sizes in Joomla’s core template

Mastodon