Templates steuern, wie eine Joomla-Website aussieht: Das Layout, die Farben, die Modulpositionen und alle anderen visuellen Elemente werden durch das Template festgelegt, das ihr zugewiesen ist. Joomla wird mit zwei Templates ausgeliefert, Atum für den Administrator und Cassiopeia für die Website, und beide können angepasst oder ersetzt werden.
Dieser Abschnitt behandelt die Grundlagen der Funktionsweise von Templates, Möglichkeiten zur Anpassung von Cassiopeia und zum sicheren Aufbau darauf, das Ersetzen seines Standard-Brandings sowie einige praktische Tipps, um das Erscheinungsbild einer Website von Seite zu Seite zu variieren.
Erste Schritte mit Templates
Was ein Template ist und wie man beginnt, das Erscheinungsbild von Cassiopeia mit dessen integrierten Optionen zu gestalten.
- Template-Grundlagen – Was ein Joomla-Template ist, die beiden Templates, mit denen jede Website startet (Atum für den Administrator, Cassiopeia für die Website), und die Anpassungsmöglichkeiten, die an anderer Stelle in diesem Abschnitt behandelt werden.
- Cassiopeia-Anpassung – Verwendung der integrierten Stiloptionen von Cassiopeia und einer benutzerdefinierten CSS-Datei, um Branding, Farben und Layout zu ändern, ohne den Template-Code direkt zu bearbeiten.
Templates anpassen
Möglichkeiten, die Ausgabe und Struktur eines Templates über dessen integrierte Optionen hinaus zu ändern, vom Überschreiben der Darstellung einer Erweiterung bis hin zum Erstellen eines Templates, das Updates übersteht.
- Template-Overrides – Kopieren und Bearbeiten der Ausgabedateien einer Erweiterung, um deren Markup zu ändern, anhand eines Login-Modul-Overrides als Beispiel.
- Template-Layouts – Erstellen alternativer Layouts für Module, Komponenten, Kategorien und Menüeinträge, damit verschiedene Instanzen unterschiedlich aussehen können.
- Child-Templates – Erstellen eines Templates, das von Cassiopeia erbt und nur die geänderten Dateien überschreibt, sodass Template-Updates die eigenen Anpassungen nicht überschreiben.
- Cassiopeia templateDetails.xml – Die XML-Datei, die die Metadaten, Modulpositionen, Sprachunterstützung und konfigurierbaren Optionen eines Templates definiert.
Branding und Symbole
Ersetzen der mit Joomla ausgelieferten Standardsymbole und des Logos, um sie an die eigene Marke anzupassen.
- Favicons – Erstellen und Installieren des kleinen Symbols, das in Browser-Tabs angezeigt wird, in den von Joomla erwarteten Formaten SVG und ICO.
- Template-SVG-Logos – Entwerfen eines benutzerdefinierten Vektorlogos in Inkscape und Konfigurieren von Joomla zur Verwendung einer SVG-Datei als Markengrafik der Website.
- Standardsymbole – Verwendung des in Cassiopeia und Atum integrierten Font-Awesome-Symbolsatzes und Auffinden des Namens eines Symbols aus der vollständigen Bibliothek.
Template-Tipps
Praktische Techniken, um das Erscheinungsbild einer Website von Seite zu Seite statt websiteweit zu variieren.
- Templates wechseln – Festlegen des Standard-Template-Stils einer Website und Zuweisen eines anderen Stils zu bestimmten Seiten über Menüeinträge.
- Startseite in anderem Stil – Der Startseite ein eigenes Erscheinungsbild geben mithilfe von Modulzuweisungen, benutzerdefinierten Stilen, Overrides oder einem Child-Template.
- Modul- und Menüstile – Hinzufügen benutzerdefinierter CSS-Klassen zu einzelnen Modulen oder Menüeinträgen und deren Gestaltung in der Datei user.css.