Kategorien
Content Management Systeme Shared Hosting Webdesign

Cassiopeia Template in Joomla 4

Nachdem die Joomla Installation in den letzten Wochen schon aktualisiert und mit Erweiterungen versehen wurde, ist es an der Zeit, das Core Template Cassiopeia ein wenig genauer anzuschauen.

Auf der Testsite j4.seafolly.ch sind wir ja von einer leeren Joomla-Installation ausgegangen und haben uns zunächst auf die Erstellung von Inhalten und Kategorien konzentriert.

In diesem Beitrag soll es nun das Template gehen.

Ich zeige, wie man das Menü im oberen Bereich horizontal mit aufklappbaren Elementen strukturiert, auf der Startseite einen Hero Bereich einrichtet und individuelle Farben definiert.

Spezialistin auf diesem Gebiet ist Viviana Menzel und so entstand die Idee zu diesem Beitrag auf dem Joomlatag 2021.

Was steckt hinter Cassiopeia?

Cassiopeia ist das Standard Joomla Core Template für das Frontend der Website. Es basiert auf dem Bootstrap 5 Framework, benutzt ausser Icons von Font Awesome auch die eigenen Joomla Icons (icomoon). Es nutzt auch ein eigenes CSS Grid. Ein interessanter Artikel dazu findet sich bei Astrid Günther (Ein Tutorial zur Verwendung des Cassiopeia-Templates für Joomla 4 – CSS Grid).

Die lokal mit dem Joomla Core installierte Schriftart heisst Roboto. Sie liegt im Verzeichnis /media/vendome/roboto-fontface. Lokal installierte Schriften sind gut im Sinne der Datenschutzgrundverordnung (DSVGO) weil dann eben nichts von anderen Server geladen werden muss. Roboto hat die meisten Zeichen in allen Sprachen und sieht gut aus. Ausser dieser lokalen Schrift lassen sich auch Fira Sans und Roboto + Noto Sans als Web-Variante auswählen.

Cassiopeia benutzt KEIN jQuery!

Dieser letzte Punkt ist für Anfänger nicht so wichtig, für die Zukunft von Joomla ist es aber ein sehr wichtiges Feature, da die jQuery Bibliothek in die Jahre gekommen ist. Eine hilfreiche Website in diesem Zusammenhang ist youmightnotneedjquery.com (Danke and David Jardin für den Tip).

Cassiopeia benutzt ein veränderbares Farbschema und besitzt ein Dropdown-Menü. Es bringt eine Darstellungsart für das Blog-Layout und CSS-Klassen für die Darstellung von Bildern.

Ein Web Asset Manager ermöglicht die Verwaltung unterschiedlicher Stylesheet- und JavaScript-Dateien (Joomla Dokumentation Web Assert Manager). Damit lässt sich beispielsweise eine user.css Datei einbinden, in der die Farben des Templates verändert werden.

Damit haben wir eine gute Basis um die gewünschten Änderungen einzubauen.

Hauptmenü horizontal oben mit Dropdown

Die Links im Hauptmenü (Main Menu) werden unter Menüs -> Main Menu verwaltet. Zu jedem Menü gehört ein Modul. Die Module werden unter Inhalt -> Site Module verwaltet und können an beliebige Stellen im Template positioniert werden. Die Positionen von Cassiopeia sind im Screenshot dargestellt.

Positionen in Cassiopeia – Quelle Viviana Menzel – Slides

In meinem Fall muss das Main-Menu Modul von der Position sidebar-right auf die Position menu verschoben werden.

Positionierung des Menü-Moduls an der Position Menü

Ausserdem muss das Layout Cassiopeia Collapsible Dropdown ausgewählt werden.

Jedes Template kann alternative Layouts zur Verfügung stellen, collapsible Dropdown ist so ein Layout (Wir werden das Thema Layout-Overrides zu einem späteren Zeitpunkt noch ansprechen).

Layout Collapsible Dropdown aus dem Cassiopeia Template zuordnen

Nach diesen Änderungen ist das Ziel erreicht. Auf der Website befindet sich nun ein horizontales Menü mit Dropdown-Möglichkeit.

Drop-Down Menü auf der Website

user.css für die Farben und andere CSS Anpassungen

Im Bereich System -> Site-Templates befinden sich die installierten Templates. Standardmässig ist das Cassiopeia.

Site-Templates Übersicht

Ein Klick auf den Namen öffnet eine Art Datei-Manager.

Dort können die existierenden Template-Dateien bearbeitet und neue Dateien hinzugefügt werden.

CSS-Änderungen sollten NIEMALS in den Core-Dateien stattfinden, da diese bei einem Update überschrieben werden. Wenn du dir eine Datei mit dem Namen user.css anlegst, kannst du in dieser Datei deine gewünschten CSS-Anweisungen schreiben.

Erstellen der user.css Datei

Die drei Basisfarben werden mit diesem Code verändert:

:root {
--cassiopeia-color-primary: #{$alternative-color-primary}; --cassiopeia-color-link: #{$alternative-color-link}; 
--cassiopeia-color-hover: #{$alternative-color-hover};
}
Individuelle CSS-Anpassungen

Das Ergebnis ist ein wenig übertrieben, aber es wird deutlich, wie sich die Farben verändert haben.

Angepasste Farben im Cassiopeia Template

Hero-Bereich mit Bild

Der Hero-Bereich ist der Bereich, den die Besucher der Website als Erstes zu sehen bekommen. Oft ist das ein Bild, das sich über die gesamte Breite des Bildschirms erstreckt. Über dem Bild sind meist aussagekräftige Texte mit grossen Überschriften und einem Call-to-Action Button.

Wenn du die Blog-Beispieldaten in Joomla einspielst, wird dir so ein Hero-Bereich erstellt. Da ich das bei meiner Installation nicht gemacht habe, erstelle ich es eben manuell.

Inhalt -> Site Module -> NeuEigenes Modul

Du kannst nun über den Editor den gewünschten Text eingeben oder den Editor ausschalten und diesen Beispieltext kopieren.

Die verwendeten CSS-Klassen stammen aus dem Bootstrap 5 Framework und verdeutlichen ein wenig die Möglichkeiten des Frameworks (Bootstrap 5 Komponenten)

<h1 class="display-4 text-thin">WIllkommen bei Joomla mit Cassiopeia!</h1>
<p class="lead"><strong>Die Formatierungsklassen stammen aus Bootstrap 5.</strong></p>
<p class="lead">Cassiopeia ist wirklich gut.</p>
<p><a class="btn btn-primary btn-lg" href="index.php/blog">Klick den Button »</a></p>
Text im eigenen Modul

Anschliessend musst du in den Optionen ein Hintergrund-Bild zuordnen.

Bild auswählen in den Optionen

Dann musst du das banner Layout aus Cassiopeia im Erweitert-Tab wählen …

… und als letzte Tat dafür sorgen, dass dieses Modul nur auf der Home Seite angezeigt wird.

Das machst du im Reiter Menüzuweisung.

Menüzuordnung

Der Hero Bereich ist fertig und sieht durchaus beeindruckend aus 🙂

Hero-Bereich

Fazit

Mit dem Joomla 4 Template Cassiopeia lässt sich sehr gut arbeiten und nach den ersten Versuchen merkt man auch schnell an welchen Ecken man „drehen“ und „schrauben“ kann. Alle Veränderungen sind im Browser in einer durchaus verständlichen Benutzeroberfläche möglich.

Links


tl;dr: Joomla 4 kommt mit einem sehr flexiblem Template – Cassiopeia

Von hagengraf

Ich erstelle bequeme und benutzerfreundliche Orte in virtuellen und physischen Umgebungen.

2 Antworten auf „Cassiopeia Template in Joomla 4“

Erwähnungen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert