Historie

Diese Webseite wurde anfangs mit dem CMS Joomla in der Version 2.5 erstellt. Die Seite ist über 10 Jahre gewachsen, wurde mehrfach auf neuere Joomla Versionen migriert und musste letztlich gründlich aufgeräumt werden.

Im Oktober 2021 habe ich ich mich entschlossen, diese Seite mit Jooma Version 4 neu zu gestalten. Vorangegangen waren mehrere erfolglose Versuche, die Seite in einer lokalen XAMPP Umgebung von Joomla 3 zu Joomla 4 zu portieren. Joomla 4 ist relativ frisch und dadurch sind nicht alle Komponenten kompatible. Mein Problem war, dass die alte Version der Webseite viele inkompatible Komponenten enthielt, insbesondere das verwendete Template und die Slider Komponente. 

Vorbereitung

Auf der Suche nach einem kostenlosen Template für Joomla 4 habe ich einige Versuche mit dem Template Nature von Dr. Menzel IT unternommen. Die Erfahrungen waren wenig zufriedenstellend, deshalb habe ich dann doch mit dem Standard Template Cassiopeia experimentiert. Das Ergebnis hat mich überzeugt, auch wenn einige Funktionen sich mir nicht erschließen. Ich habe zwar ein einigermaßen solides IT Wissen, bin allerdings kein Experte für HTML und CSS. Wenn man ein paar hübsche Features einbauen möchte, kommt man an CSS nicht vorbei. Man muss ja nicht alles verstehen, aber das Internet ist voll mit Artikel, die mir bei der Gestaltung geholfen haben. Man kann endlos viel Zeit bei solchen Dingen vertrödeln. 

Los ging es in einer lokalen XAMPP Umgebung mit PHP 8. Mein Webhoster stellt für meinen Tarif ebenfalls PHP 8 zur Verfügung, also wenn schon Großreinemachen, dann auch richtig. Auch wollte ich die vorhandenen Beiträge und Bilder übernehmen. Das Bildformate der Slider Bilder ist 1260x560.

Nach der XAMPP Installation habe ich Joomla 4 installiert und eine neue Datenbank angelegt. In diese Umgebung habe ich sämtliche Fotos in das Image Verzeichnis kopiert. Dabei habe ich Verzeichnisstruktur bereinigt. Jeder einzelne Slider bekommt einen sprechenden Namen. Für Fotos innerhalb der Beiträge habe ich einen eigenen Ordner angelegt, der wiederum einzelne Ordner für die Beträge enthält. Die Bildergalerien sind den Beiträgen zugeordnet, also gibt es in jedem Beitragsverzeichnis einen Galerieordner.

Komponenten

Als Erweiterungen installiere ich folgende Komponenten: Akeeba Backup, Smart Slider 3, Sigplus Galerie, Cookiehints und das Kontaktformular von Rapid Contact. Alle Komponenten sind kostenlos. Zur Installation lade ich die Paketdateien lokal herunter. Bei Akeeba Backup ist im Web Katalog die Version 8, man benötigt für Joomla 4 leider die Version 9. Deshalb gehe ich über die Entwicklerwebseiten und lade die Erweiterungen herunter.

Nachtrag von Januar 22: Die Smart Slider 3 Komponente macht aus irgendwelchen Gründen auf alten IOS Geräten Probleme. Die Webseite stürzt auf meinem IPad  mit IOS 12 beim Wechseln der Bilder ab. Ich kann den Fehler nicht lokalisieren und entschließe mich, die Komponente von der Webseite zu entfernen und durch den DJ-ImageSlider zu ersetzen. Bei 40 verschiedenen Slidern ist das eine größere Aktion. Will man nur Fotos aus einem Ordner anzeigen, genügt ein Slider Modul. Möchte man Titel und  / oder Beschreibung im Bild haben, werden diese im Backend eingetragen. Jeder Sider benötigt dann eine Kategorie. Zu dieser Kategorie werden dann die Slides hinzugefügt. Hier können Titel und Beschreibung eingegeben werden. Auch das Aussehen und die Steuerung lassen sich hier einstellen.

Ich habe die Slider eins zu eins ausgetauscht. DJ-ImageSlider bietet aber auch die Möglichkeit, mehrere Bilder in einem Fenster darzustellen. Ich werde mich mehr mit der Komponente beschäftigen und meine Erfahrungen hier ergänzen.

Umsetzung

Ich erzeuge zuerst die Kategorien für die Beiträge. Dann erstelle ich kategorieweise die Beträge, indem ich die Inhalte von der online Webseite kopiere. Jeder Beitrag bekommt einen Eintrag im Hauptmenü. Dann erstelle ich im Slider Dashboard die einzelnen Slider, füge die Bilder hinzu und ggf. auch Texte zur Beschreibung. Die Slider lassen sich kopieren, deshalb habe ich einen leeren Slider, ohne Fotos, aber mit den Grundeinstellungen für die Darstellung angelegt, den ich immer wieder kopiere, einen neuen Namen vergebe und Fotos zuweise. Jeder Slider benötigt ein zugeordnetes Modul, in dem dann die Position und die Menüzugehörigkeit eingestellt wird. Diese Module lassen sich einfach aus dem Smart Slider Dashboard generieren. Man kann die Module aber auch im Modulmanager kopieren. Dann erstelle ich noch die Sigplus Module für die Galerien. 

Cassiopeia Erfahrungen 

Meine Erfahrungen mit dem Cassiopeia Template sind durchweg positiv. Zwar sind Informationen zum Template schwer zu finden, aber ein paar Hinweise findet man schon. Das Template kommt mit zwei konfigurierten  eingestellten Farben daher, blau-lila und rot. Wem das nicht gefällt, muss sich mit CSS beschäftigen. Nach einigem Suchen habe ich dann auch die entscheidenden Hinweise gefunden. Die wichtigsten Links habe ich unten angegeben. 

Im Wesentlichen packt man seine eigenen Designs in eine Datei user.css im Verzeichnis CSS des Templates. Ich habe mir zu diesem Zweck eine Kopie des Templates angelegt, um nicht beim nächsten Joomla Update alle Einstellungen zu verlieren. Das funktioniert ganz simpel im Template Manager. In der user.css habe ich die Farbe für den Header und den Footer gesetzt. Dann bin ich über einen Artikel gestolpert, der sich mit der Verschönerung des Hauptmenüs beschäftigt hat.

Und zu guter Letzt habe ich eine eine Möglichkeit gefunden, wie ich, durch eine eigene CSS Klasse, einen Abstand zwischen ein Artikelfoto und den Text bekomme. Wie gesagt, ich bin in solchen Sachen eher Anfänger und vermutlich gibt es 100 bessere Methoden, aber für mich funktioniert das so ganz gut.  Wenn ich also ein Foto auf dem Reiter Bilder und Links in den Bereich komplettes Erscheinungsbild geladen habe, kann ich im darunter liegenden Feld CSS Klasse, meine eigene CSS Kasse angeben und so den gewünschten Effekt erzielen. Das Bild links habe ich übrigens mit Sigplus eingebunden

Das Hauptmenü hat mir am Anfang etwas Mühe bereitet. Ohne entsprechende Eingabe, werden nämlich die Unterpunkte nicht angezeigt. Erst wenn man im Modul des Hauptmenüs auf dem Reiter Erweitert im Feld Layout Dropdown auswählt, werden die Unterpunkte angezeigt. Mit dem Kategorieblog habe ich mich auch beschäftigt. Zu den einzelnen Menüpunkten, z.B. Reisen oder Rezepte, gibt es einen Menüpunkt, der alle Berichte in einem Blog darstellt. Dazu müssen die Beiträge der gleichen Kategorie angehören. Den Menüpunkt erstellt man dann als Kategorieblog, findet sich unter Beiträge. Der neuste Beitrag steht oben und nimmt die gesamte Breite ein. Darunter folgen die weiteren Beiträge im Bloglayout in Spalten und Zeilen, je nachdem, wie man es mag, lassen sich die Anzahl der Zeilen und Spalten gestalten. 

Wie gesagt, das Ganze ist ein Hobby, ich bin kein professioneller Webdesigner. Meine ersten Erfahrungen mit Joomla 4 habe ich in einem neuen Projekt gesammelt. Ich habe eine neue Webseite für unsere Wohnmobilreisen erstellt. Das war ein eng begrenzter Rahmen, in dem ich mich austoben konnte. Die Seite ist online unter https://bommelreisen.de zu finden. Auch da gibt es eine Technikecke, wo mehr die Details beschreibe. Dort sind auch ein paar Screenshots vom Backend zu finden.

Die Entwicklung der Webseite geht ständig weiter. Für die Bommelreisen habe ich mittlerweile ein eigenes Template entwickelt - natürlich nicht ohne Unterstützung. Die Entwicklung wird im Blog von Astrid Günther erklärt und wurde von mir entsprechend meiner eigenen Vorstellungen angepasst. Die Beschreibung gibt es auf den Bommelreisen -  Das Snickers Projekt...

Ich denke, das selbst angepasste Template eignet sich nicht für diese umfassende Webpräsenz. Deshalb bleibe ich dem Cassiopeia Template, zumindest vorläufig, treu. Die Farbgebung wurde geändert und das Banner der Homepage neu gestaltet. Dazu erscheint nun auch die Homepage im Blogformat. Die drei neusten Artikel werden als Haupteintrag markiert. Erscheinen neuere Beiträge, nehme ich die Haupteintrag Markierung zurück. Dann erscheinen diese Beträge unter den entsprechenden Menüpunkten im Hauptmenü. Durch die Änderung des Banners empfand ich dann den Slider auf der Homepage als etwas "too much" und habe ihn deaktiviert. 

Die Entwicklung geht weiter. Mittlerweile benutze ich das freie Joomla 4 Template Nature von Dr. Menzel IT. Ich hatte ganz zu Anfang schon einmal damit experimentiert, war jedoch nicht zufrieden. Mittlerweile läuft das Template sehr gut und bietet einige Weiterentwicklungen zum Standard Cassiopeia Template. So lassen sich z. B. die Farben frei wählen. Aber auch sonst bietet dieses Template eine Menge Features. Die Darstellung von Bildern im Text wird durch modifizierte CSS Klassen deutlich einfacher. Einfach mal die Demoseite angucken. 

Dann habe ich endlich eine Möglichkeit gefunden, wie ich verhindere, dass mit einem Joomla Update meine Fußzeile überschrieben wird. Mit einem Language Override lässt sich der Text für die Konstante MOD_FOOTER_LINE2 konservieren. Bisher hat jedes Joomla Update den Standard Verweis auf Joomla wiederhergestellt. Mit dem Override ist dies nun Geschichte. Es muss für jede installierte Sprache durchgeführt werden.

Hier sind die Links:

Joomla 4: Tweak Cassiopeia with a top banner and horizontal navigation - The Joomla Community Magazine

Posts tagged: Cassiopeia | Astrid Günther (astrid-guenther.de)

Erstellen dieser Webseite mit Joomla 4 (bommelreisen.de)

Das Snickers Projekt - ein eigenes Template für die bommelreisen.de 

Hier ist ein Muster meiner users.css Datei:

/* Farbe für den Header und Footer setzen */
.container-header {
   background-color: #87CeFa;
   background-image: none;
}

.container-footer {
   background-color: #87CeFa;
   background-image: none;
}

/* CSS Klasse Myborder - setzt einen weißen Rand um ein Bild - benutze ich bei Fotos im Text - Bild links */
.myborder {
   border-right: 10px solid white;
   border-bottom: 10px solid white;
   float: left;
}

/* Legt einen grauen abgerundeten Rahmenhintergrund um die Menüpunkte im Hauptmenü */
.container-header .mod-menu a {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 3px 15px;
}

.container-header .mod-menu a:hover {
  background-color: silver;
}