Joomla Templates
Templates
Standard Stil definieren
Erweiterungen / Templates / Stile
Beez3 - default als Standardstil setzen
Modulpositionen anpassen
position-7
Im Template Manager kann man einstellen, dass die Module links oder rechts vom Content positioniert werden.
Position of Navigation: before content
CSS Definitionen
In der Datei user.css kann man Stile definierten, die bei einem Update des Templates nicht überschrieben werden
templates/beez3/css/user.css
- Hintergrundbild im Header ändern
Das gewünschte Hintergrundbild speichern
templates/beez3/images/header.png
CSS Definitionen:
#header { padding-top: 0;
.logoheader {
background: #FFFFFF URL(../images/header.png) no-repeat
min-height: ... (wegen Hintergrundbild)
...
}
CSS Styles im Editor
Die Erweiterung JCE Editor downloaden und installieren
Komponenten / JCE Editor / Global Configuration
Pfad zur user.css angeben
Editor Styles / Custom CSS File # Joomla 3 templates/$template/css/user.css # Joomla 4 media/templates/site/$template/css/user.css
Overrides
Will man Komponenten und Module ändern, sollte man einen Output Override erstellen, damit die Änderungen nicht beim nächsten Update überschrieben werden.
- Im Backend
Erweiterungen / Templates / Templates / Beez3 Details und Dateien Overrides erstellen
Die erstellten Overrides befinden sich dann im Verzeichnis
templates/beez3/html
Man kann die Dateien mit einem beliebigen Editor oder gleich im Joomla Backend bearbeiten.
Eigene CSS Klassen
Globale CSS Styles definieren
- Eigene CSS Datei
Eigene Klassen können in jeder CSS Datei des Templates definiert werden. Am besten aber in folgender Datei definieren
css/user.css
CSS Klassen für eine bestimmte Seite
- Eine neue CSS Klasse definieren
In der CSS Datei des Templates eine eigene Klasse für ein bestimmtes Element definieren
# Beispiel für einen Tabellenstil
table.content_table {
border-collapse:collapse;
width:100%;
}
.content_table td {
border:1px solid #CCC;
padding: 4px;
}
- Die CSS Klasse im Backend zuweisen
Im Backend einen Menülink bearbeiten, der den Artikel aufruft, in dem die neue CSS Klasse angewendet werden soll.
In das Feld Seitenklasse den Namen der Klasse mit einem führenden Leerzeichen eingeben.
Einstellungen der Seitenanzeige / Seitenklasse Seitenklasse: content_table