Das Template bestimmt, wie Deine Joomla-Website aussieht und wie ihre Inhalte angeordnet werden. In dieser fünften Folge zeige ich Dir, wo Du die Template-Einstellungen findest, wie Du Cassiopeia anpasst und wie Du ein anderes Template installierst. Auch wenn Du hauptsächlich Beiträge bearbeitest, hilft Dir dieses Wissen dabei, Inhalt und Gestaltung auseinanderzuhalten.
Was übernimmt das Template?
Zu einem Template gehören Dateien, die unter anderem das Seitenlayout, die Schriftgestaltung, Farben und die Ausgabe bestimmter Inhalte festlegen. Deine Beiträge bleiben in Joomla gespeichert. Das Template sorgt dafür, wie sie im Browser erscheinen. Deshalb können zwei Websites mit denselben Grundfunktionen völlig unterschiedlich aussehen.
Für die tägliche Redaktionsarbeit musst Du diese Dateien normalerweise nicht bearbeiten. Texte, Bilder und Kategorien pflegst Du in den dafür vorgesehenen Bereichen. Die grundlegende Gestaltung wird bei der Einrichtung der Website festgelegt und bei Bedarf mit der Person abgestimmt, die sie technisch betreut.
Template und Template-Stil unterscheiden
Öffne im Backend System → Site Template Stile. Hier siehst Du die verfügbaren Stile Deiner Website. Ein Stil enthält eine bestimmte Zusammenstellung von Einstellungen für ein Template. Auf diese Weise lässt sich dasselbe Template mit unterschiedlichen Einstellungen verwenden.
Im Video arbeiten wir mit Cassiopeia und dem dort verfügbaren erweiterten Stil. Je nach installierter Joomla-Version und Template-Ausführung können die Bezeichnungen und Einstellmöglichkeiten abweichen. Orientiere Dich deshalb auch daran, welche Felder Deine eigene Installation tatsächlich anbietet.
Der Stern kennzeichnet den Standardstil. Dieser kommt dort zum Einsatz, wo kein anderer Stil ausdrücklich zugewiesen wurde. Über die Menüzuweisung kannst Du einen Stil gezielt für einzelne Seiten verwenden. Im Beispiel lässt sich so die Startseite anders darstellen als der übrige Auftritt.
Wenn eine Änderung auf einer bestimmten Seite nicht sichtbar wird, prüfe zuerst deren Menüzuweisung. Möglicherweise bearbeitest Du den Standardstil, während die aufgerufene Seite einen ausdrücklich zugewiesenen anderen Stil verwendet. Nach dem Test solltest Du eine nur vorübergehend eingerichtete Zuweisung wieder entfernen.
Logo, Website-Titel und Untertitel festlegen
Öffne den gewünschten Stil. Bei den im Video gezeigten Optionen kannst Du ein Logo als Bild auswählen oder einen Text als Markenbezeichnung verwenden. Ein hinterlegtes Bild kann die Textdarstellung ersetzen. Der Untertitel ergänzt den Namen und kann je nach Einstellung auch zusammen mit dem Bildlogo erscheinen.
Speichere die Änderung und kontrolliere das Ergebnis im Frontend. Achte darauf, ob das Logo zum verfügbaren Platz passt und auch auf einem schmalen Bildschirm gut lesbar bleibt. Ein sehr breites Logo kann im Kopfbereich viel Raum beanspruchen. Verwende deshalb eine für die Darstellung geeignete Datei und prüfe auch deren transparente Ränder.
Seitenbreite und Verhalten des Kopfbereichs
Bei der Layoutbreite zeigt das Video den Unterschied zwischen einer begrenzten, statischen Breite und einer flüssigen Darstellung. Ein begrenzter Inhaltsbereich lässt auf grossen Bildschirmen seitliche Ränder frei. Eine flüssige Darstellung nutzt mehr von der verfügbaren Breite.
Welche Variante passt, hängt vom Inhalt ab. Für längere Lesetexte sind sehr lange Zeilen oft unpraktisch. Eine breite Bildübersicht kann den zusätzlichen Raum dagegen gut nutzen. Entscheide deshalb anhand echter Seiten Deiner Website und nicht nur anhand einer leeren Startseite.
Ein fixierter Kopfbereich bleibt beim Scrollen sichtbar. Das kann hilfreich sein, wenn dort die Navigation liegt. Prüfe allerdings, wie viel Platz er auf kleinen Bildschirmen einnimmt. Die zusätzliche Nach-oben-Schaltfläche erleichtert bei langen Seiten den Rückweg zum Anfang. Beide Funktionen sind im Video direkt in den Template-Optionen einstellbar.
Farben zusammenhängend anpassen
Der erweiterte Cassiopeia-Stil bietet im Beispiel Felder für Hintergrund, Text, Links und weitere Bereiche wie Schaltflächen oder Fusszeile. Damit kannst Du bereits ohne eigene Programmierung einen deutlich anderen Eindruck erzeugen.
Ändere die Farben schrittweise und prüfe jeweils eine Seite mit möglichst vielen typischen Elementen. Ein Link benötigt sowohl im normalen Zustand als auch beim Darüberfahren mit der Maus eine erkennbare Darstellung. Bei Schaltflächen müssen Beschriftung und Hintergrund ausreichend unterscheidbar bleiben. Eine Farbe, die als dekorativer Akzent funktioniert, ist deshalb nicht automatisch eine gute Textfarbe.
Im Video entsteht durch die geänderten Farben und die neu platzierten Module ein anderer Auftritt. Diese Kombination ist entscheidend: Die Farbwahl beeinflusst das Erscheinungsbild, während die Positionen der Module die Aufteilung der Seite verändern.
Warum nach einem Template-Wechsel Module fehlen können
Templates stellen bestimmte Modulpositionen bereit. In Cassiopeia begegnen Dir beispielsweise Positionen für das Menü, Seitenleisten und die Fusszeile. Das Video verschiebt das Menü und das Anmeldemodul, damit sie an den gewünschten Stellen erscheinen.
Ein anderes Template kann andere Positionsnamen oder eine andere Anordnung verwenden. Wenn nach einem Wechsel ein Menü oder ein Zusatzbereich fehlt, ist der Inhalt deshalb nicht zwangsläufig verloren. Kontrolliere das betreffende Modul und weise ihm eine Position zu, die das neue Template tatsächlich ausgibt. Die nächste Kursfolge behandelt diese Zusammenhänge ausführlich.
Wann eigene CSS-Anpassungen sinnvoll sind
Unter System → Site Templates erreichst Du die Template-Dateien. Dieser Bereich geht weiter als die normale Einstellung eines Stils. Eigene CSS-Regeln können dort zusätzliche Anpassungen ermöglichen, beispielsweise über eine dafür vorgesehene Datei wie user.css.
Solche Eingriffe gehören in die technische Betreuung. Nutze zunächst die vorhandenen Einstellungen und halte individuelle Änderungen getrennt von den gelieferten Kerndateien. Sonst können spätere Updates Anpassungen überschreiben oder die Wartung unnötig erschweren.
Helix Ultimate als Alternative installieren
Im letzten Teil zeige ich Helix Ultimate von JoomShaper. Das kostenlose Template bietet eine eigene Oberfläche mit umfangreicheren Gestaltungsmöglichkeiten. Auf der Downloadseite von JoomShaper werden das Template für bestehende Websites und ein Quickstart-Paket unterschieden.
- Prüfe vor dem Download die Kompatibilität mit Deiner Joomla-Version und sichere eine bestehende Website.
- Wähle für die vorhandene Joomla-Installation das passende Template-Paket. Das Quickstart-Paket ist für eine neue Website mit Beispieldaten gedacht.
- Installiere das Paket im Backend über System → Installieren → Erweiterungen.
- Öffne anschliessend die Site Template Stile und wähle den gewünschten Stil als Standard oder für einzelne Menüpunkte.
- Kontrolliere Navigation, Modulpositionen und wichtige Inhaltsseiten im Frontend.
Ein Template-Wechsel ist damit mehr als die Auswahl eines neuen Farbschemas. Teste ihn bei einer bereits veröffentlichten Website zuerst in einer geeigneten Testumgebung. Die im Video gezeigten Beispiele machen deutlich, wie unterschiedlich Websites mit derselben Template-Grundlage gestaltet werden können.
Zum selbst Ausprobieren
Öffne auf Deiner Übungswebsite den aktiven Stil und ändere zunächst nur den Untertitel oder eine gut erkennbare Farbe. Speichere, kontrolliere die Änderung im Frontend und stelle den ursprünglichen Wert wieder her. Prüfe danach, welcher Stil für die Startseite gilt. So lernst Du den Zusammenhang zwischen Stil, Menüzuweisung und sichtbarer Seite kennen, bevor Du grössere Anpassungen vornimmst.
Diese Anleitung gehört zum Joomla 6 Videogrundkurs. Dort findest Du die weiteren Folgen in der passenden Reihenfolge.
