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.

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

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).

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

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.

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.

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};
}

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

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 -> Neu – Eigenes 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>

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

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.

Der Hero Bereich ist fertig und sieht durchaus beeindruckend aus 🙂

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
- Vortrags-Slides von Viviana Menzel https://www.dr-menzel-it.de/engagement
- Astrid Günther – Ein Tutorial zur Verwendung des Cassiopeia-Templates für Joomla 4 – CSS Grid
- 23.8.2021 Joomla 4 ist erschienen
- 6.9.2021 Joomla 4 besonders einfach bei Novatrend installieren und verwalten
- 13.9.2021 Joomla 4 – Erste Schritte
- 20.9.2021 Joomla 4 – Zusammenhänge von Inhalt, Menüs und Kategorien
- 27.9.2021 Joomla 4 – Update einspielen
- 4.10.2021 Joomla 4 – Erweiterungen direkt aus dem Webkatalog installieren
- 11.10.2021 Cassiopeia Template in Joomla 4
- 18.10.2021 Joomla 4 – Woraus besteht ein Beitrag?
- 25.10.2021 Joomladay 2021 – Die Videos zum Abenteuer
- 1.11.2021 Joomla 4 – Custom Fields
tl;dr: Joomla 4 kommt mit einem sehr flexiblem Template – Cassiopeia
Schreibe einen Kommentar