Theming mit Cassiopeia

Template, Child Template und Stile

Umsetzung: die Auswahl eines Stils wählt dynamisch eine entsprechende CSS-Datei mit den entsprechenden Farbzuweisungen.

Später sollen hierzu weitere Anpassungen erfolgen:

• eigene Menütechnik mit Megamenu (erledigt)
• Farb-Stile für Website (erledigt)
• Layoutausgaben der Website: spezielle eigene Module und Plugins
• ...wie gesagt: schauen wir mal.

Für die Umsetzung will ich mich auf das Standard-Template Cassiopeia beziehen. Also beginnt meine Anpassung - wie immer - über ein Child Template und darauf zugreifende Stile.

Es ist gut sich die Verdrahtung noch einmal in Erinnerung zu rufen!

Template

Ein Template muss in Joomla (aktuelle Versionen bzw. spätestens seit J!4.1) immer als Erweiterung (ZIP-Archiv) installiert werden. Hierbei werden für das Template die nötigen Basis-Ordner erstellt und mit den mitgelieferten Dateien befüllt.

Templates Standardverzeichnis: ./templates/cassiopeia
Hier liegen wichtigen Standard-Dateien und Ordner für die Template-Integration in Joomla und die Auslieferungen von Code mit diesem Template.

• templateDetails.xml - Konfigurationsdatei - siehe Installation und Backendinfos für Stile
• index.php - das eigentliche Joomla Template 

Medienordner für Template: ./media/templates/site/cassiopeia  
Hier werden die Mediendateien für die Auslieferung des Templates technisch sauber von der obigen Technik getrennt.

• Ordner für ./css, ./images, ./js oder auch ./scss (CSS Precompile Technik) 

Wichtig: wir sollten niemals die Ordnerstrukturen und Inhalte des Templates - hier Standard-Joomla-Template Cassiopeia - manuell ändern. Bei Aktualisierungen der Joomla Technik (Updates) riskieren wir unsere Anpassungen zu verlieren!

Diese Grundidee niemals die Originaldateien der Joomla Technik zu verändern verlangt nach Lösungen. Allgemein werden diese Lösungen als Override bezeichnet. In Templates werden wir diese Override noch mit der Idee der Child Templates erweiteren, um uns für die Overrides auch noch unabhängig von dem Original-Template machen zu können!

Wir werden also als nächste Technik die Child-Templates nutzen.

Child Template

Die Child Templates versetzen und technisch in die Lage die gesamte (Original-) Template-Technik zu nutzen und gleichzeitig einen technischen Ansprachepartner zu erhalten, den wir wie das Original nutzen können.

Wir erhalten neue Basisstrukturen für die Nutzung mit eigenen Techniken: neue Dateien oder Overrides für Dateien/Ordner im Original-Template.

• Child Templates Verzeichnis: ./templates/cassiopeia_childname  
  hier. eigene templateDetails.xml, ...
• Medienordner für Template: ./media/templates/site/cassiopeia_childname  
  hier: eigene ./css/user.css  oder ./css/global/colors_alternative.css , ...  
  Anm.: die user.css ist für alle Templates sinnvoll, die colors_alternative.css speziell vom Cassiopeia Template integriert als "Alternative Farbe"

Wir können an diesen Stellen mit den vorbereiteten Basisstrukturen und Dateien sauber getrennt vom Original Template unsere Anpassungen vornehmen.

Stile

Es ist Joomla egal welche der Template Techniken man umsetzt. Wir nutzen ein Template über einen zugewiesenen Stil. Der Stil ist quasi die Auswahl des Templates in Kombination mit den im Template integrierten Zusatztechniken.

• Stile werden bei der Installation von Templates oder dem Erzeugen von Child Templates automatisch erzeugt - siehe Bezeichner default. Sie können auf eigene Bezeichner umbenannt werden.
• Wir können über den Stil die - im Template integrierten (siehe templateDetails.xml) - Konfigurationen vornehmen.
• Man kann weitere Stile von einem Template erzeugen und nutzen. Die Stile können über Menüzugehörigkeit für die Ausgabe bestimmter Seiten konfiguriert werden.

Das Zusammenspiel der hier dargestellten Techniken ist sehr effizient und mächtig. Allerdings wäre es nicht normal, wenn wir dadurch nicht auch kleinere Einbußen hätten.

Zum Beispiel muss ein Entwickler für ein neues "frisches" Template die beteiligten Ordnerstrukturen passend zusammenstellen und neu packen. Für das Austesten benötigt man möglichst separate Joomla Installationen ohne unsere Entwicklungsumgebung. Aber das sind Überlegungen für später.

Override für Hauptmenü

Eine der Hauptbaustellen für meine Beschäftigungen mit der Umrüstung und Nutzung von Cassiopeia bezieht sich auf das Hauptmenü bzw. die Layoutnutzung für das Menü-Modul.

Das Menü kann in der Joomla-Standard-Technik durch das Modul mod_menu von Joomla oder alternativ über ein Layout von Cassiopeia genutzt werden. Die Menü-Layouts unterstützen dann jeweils in einer der Layout-Varianten die kollabierbare Variante in der bei verringertem Viewport das Menü zusammgeklappt wird.

Layouts:

• Joomla:  Bootstrap Menü ohne Untermenü-Technik in einklappbarer und einfacher Variante
• Cassiopeia Template: Override Ordner (mit Menü Layout-Technik) ./templates/cassiopeia/html/mod_menu/... 
  erweiterte Menütechnik (metismenu) inklusive Untermenüs in einklappbarer und einfacher Variante
• Cassiopeia Child Template: Ordner mit Cassiopeia Kopien ./templates/cassiopeia_child/html/mod_menu/...  
  Der Ordner muss manuell erstellt und mit Kopien von Cassiopeia befüllt werden und stehen dann als Layout-Auswahl zur Verfügung. Im Bild sieht man die Platzhalter-Bezeichner ohne zugehörige englische - oder gar deutsche - Bezeichner.

In dieser Konfiguration haben wir also jetzt drei Layouts für Menü-Module zur Verfügung. 

Ordner und Dateien

Wir wollen die beweglichen Teile für die nötigen Techniken zusammenfassen.

Tipp: einfach ein neues Child-Template in einer Joomla Website erzeugen und die neu erzeugten Strukturen nutzen! Dadurch kann man auch immer wieder auf die Template-Standards oder eigene bereits erstellte Child-Template-Techniken zurückgrefen.

• ./templates/cassiopeia_childname - Ordner: XML, PHP Technik für die nutzenden Template Stile
• ./media/templates/site/cassiopeia_childname - Ordner: Styles (Ordner: css, scss, js, images)
• ./administrator/language/overrides/de-DE.override.ini - Datei: Deutsche Texte für neue Joomla Sprachplatzhalter

Bestenfalls organisiert man sich diese Dateien in einer Testumgebung und sichert sich die Ergebnisse als Git-Repo.

Metismenu Megamenu

Das verbesserte Menu Layout des Cassiopeia Templates wollen wir auf eigene Megamenu Wünsche anpassen. Hierfür muss man die entsprechenden Dateien im Arbeits-Template (hier siehe: Cassiopeia Child Template). Es entsteht durch die kopierten Dateien ein vollständig neues Layout, dass für ein Menü Modul zur Auswahl steht.

Hier die Struktur aus dem Child Template:

templates/cassiopeia_pcsys2023/
├── html
│   └── mod_menu
│       ├── collapse-metismenu.php
│       ├── dropdown-metismenu.php
│       ├── dropdown-metismenu_component.php
│       ├── dropdown-metismenu_heading.php
│       ├── dropdown-metismenu_separator.php
│       └── dropdown-metismenu_url.php
└── templateDetails.xml

Die Dateien sind als Kopien des Original Template Cassiopeia (leider) nicht über die Override Technik von Joomla versionsverfolgbar.

Kurzanalyse der Dateien:

• collapse-metismenu.php - Layout Basisdatei 1
  mit Unterstützung kollabierbares Menü; erzeugt Struktur und ruft dann Basisdatei 2 (Hauptskript) auf
• dropdown-metismenu.php - Hauptskript bzw. Basisdatei 2
  mit Schleifenmechanismus für Ausgabe der unterschiedlichen Linkeintragstypen
• dropdown-metismenu_* - die Spezial-Teilskripte zur Behandlung von Komponenten (Popups/Druck/...), Überschriften, Trennern und URLs

Diese verschachtelten Techniken wollen wir uns mit Anpassungen für die Ausgabe eines eigenen Megamenu nutzbar machen.

Für die Planung und Umsetzung erstelle ich mir eine funktionsfähige statische Version der Website und manipuliere den Code manuell, sodass er einem Ergebnis entspricht. 

Der Quellcode zeigt somit die komplette Struktur des HTML-/CSS-Gerüst, das man für das Menü benötigt. Und natürlich befinden sich nicht individualisierte Infos im Mockup, die in den PHP-Skripten mit den Inhalten der Menüs zugeordnet werden müssen.

Theme Farben

Farbauswahl / Theme: für die gewünschten Farben sollten wir uns den Markt mit passenden Themes nach eigenem Geschmack durchsehen. Im  Enterprise Bereich greift man einfach auf das Corporate Design (CD) - bzw. Corporate Identity (CI) - zurück.

Ich will an dieser Stelle mal eine persönliche Übersicht einstellen. Die folgenden Themes nutze ich ich gerne - häufig auch im Wechsel - als Umsetzungen für meine Window Manager und Terminals. Die folgende Liste enthält Themes mit eigener Webpräsenz und Dokumenationen.

• Nord 
• Catppuccin 
• Dracula  

Für eine schnelle Recherche gerne auch das Netz nach "Best Color Themes" für einen Editor eigener Wahl fragen - z. B.:  Gitkraken - 10 Popular VS Code Color Themes in 2025 Gitkraken - 10 Popular VS Code Color Themes in 2025.

Aktuelle Farben in Site

Der folgende Block enthält die mit den entsprechenden Bootstrap "Standards" kombinierten Farben in der aktuellen Ausgabe der Seite. Die Farbe Primary kann über Stile auf verschiedene Hauptfarben konfiguriert werden.

Hier folgen die Bootstrap Standards:

Die Website enthält dann noch die Farbpaletten für die Grundfarben ($blue, $indigo,...) mit den gemappten Abstufungen von z.B. $blue-100 bis $blue-900. Diese Bootstrap Mappings nutzt Cassiopeia Bootstrap CSS nicht. 

Im Folgenden kommen die einfachen Farbvariablen --blue bis --black zur Darstellung. Diese wurden in eigener user.css manuell auf text-bg-* Klassen gemappt. Diese Farben sind in - aktuell noch - in allen meinen Templatestilen identisch. Sie werden aber nicht aktiv genutzt.

Das war eine kleine Übersicht zu den genutzten Grundfarben und Bootstrap-Hervorhebungen.

Als erste Umsetzung orientiere ich mich im folgenden am Nord Theme.

Die Themen sind natürlich immer eine Geschmacksfrage und die Frage nach Einsatz und Umgebung. Und vielleicht ist ja auch ein Design vorgegeben?! Ich starte hier mal mit dem Nord Theme und orientiere mich nach ersten Umsetzungen strukturell an der Logik und Logistik, damit ich das einfache Umstellen von bis zu vier Farbstylen für eine Website zeigen kann.

Nord

Nord Theme

Ich mag dieses Theme und setze es auch gerne bei Übungen in Seminaren zum "Ricing" und Linux-Desktop-Themen ein.

• Adresse: https://www.nordtheme.com/
• Farbpalette: https://www.nordtheme.com/docs/colors-and-palettes 
• Github: https://github.com/nordtheme/nord 

Eine Vorschau auf die aktive Nutzung des Themes auf dieser Website mit den aktuellen Farben.

Das Nord Theme hat vier Farbkategorien und Anmerkungen / Vorschläge für den jeweiligen Einsatz der Farben.

Nord - Copy and Paste Boxen

Ich habe die Dokumentation des Themes hier eingefügt, damit ich Anmerkungen hinterlegen und schnell verfügbare Copy and Paste Boxen haben für die wichtigsten Farbcodes.

Das Nord-Theme unterscheidet die folgenden Farbakzente und Abschnitte, die noch jeweils mit Extra-Bezeichner ausgeschmückt wurden.

Polar Night - O-Ton: Polar Night is made up of four darker colors that are commonly used for base elements like backgrounds or text color in bright ambiance designs.

nord0
Hex: #2e3440
RGB: 46, 52, 64

nord1
Hex: #3b4252
RGB: 59, 66, 82

nord2
Hex: #434c5e
RGB: 67, 76, 94

nord3
Hex: #4c566a
RGB: 76, 86, 106
Secondary - Hover, Grad

Die Farben sind auch mit nord0 bis nord3 bezeichnet.

Snow Storm - O-Ton: Snow Storm is made up of three bright colors that are commonly used for text colors or base UI elements in bright ambiance designs.

nord4
Hex: #d8dee9
RGB: 216, 222, 233

nord5
Hex: #e5e9f0
RGB: 229, 233, 240

nord6
Hex: #eceff4
RGB: 236, 239, 244

Die Farben sind auch mit nord4 bis nord6 bezeichnet.

Frost - O-Ton: Frost can be described as the heart palette of Nord, a group of four bluish colors that are commonly used for primary UI component and text highlighting and essential code syntax elements.

nord7
Hex: #8fbcbb
RGB: 143, 188, 187

Subsite: ITDIV

nord8
Hex: #88c0d0
RGB: 136, 192, 208

nord9
Hex: #81a1c1
RGB: 129, 161, 193

nord10
Hex: #5e81ac
RGB: 94, 129, 172
Primary
Main Site

Die Farben sind auch mit nord7 bis nord10 bezeichnet.

Aurora - O-Ton: Used for tertiary UI elements that require more visual attention than default elements. In the context of syntax highlighting it is used for pragmas, comment keywords and pre-processor statements

nord11
Hex: #bf616a
RGB: 191, 97, 106
Danger
Subsite: TIPPS

nord12
Hex: #d08770
RGB: 208, 135, 112
Warning

nord13
Hex: #ebcb8b
RGB: 235, 203, 139
Info

nord14
Hex: #a3be8c
RGB: 163, 190, 140
Success

nord15
Hex: #b48ead
RGB: 180, 142, 173

Subsite: CMSOD

Die Farben sind auch mit nord11 bis nord15 bezeichnet. Die Farben sind natürlich auch immer frei vom Nutzer kombinierbar und mit RGBA CSS Styles lassen sich leicht farbliche Nuancierungen für Hover oder andere Effekte erzeugen.

Beispielhafte Override CSS-Datei für Standard-Farbe Nord10:

@charset "UTF-8";

:root {
    --cassiopeia-color-primary: #81a1c1;
    /* Nord10  bluish - Main Color FITSN */
    --primary: #81a1c1;
    --primary-rgb: 129, 161, 193;
    --cassiopeia-color-link: #81a1c1;
    --link-color: #81a1c1;
    --link-color-rgb: 129, 161, 193;
}

Für die Farbpalette sind diverse Downloads für den Einsatz in Grafikprogrammen verfügbar: Nord Theme Color Swatches.

Dracula

Catppuccin Frappé

Das hier dargestellte Grundsystem - in Kombination mit den entstandenen CSS Overrides - kann man auf weitere Farbthemen anwenden.