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.

Weitere Informationen

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

Overrides

Die Änderungen, die man im Code durchführt, sollten möglichst gut kommentiert werden.

Hat man von einer Komponente ein Override im Template angelegt, so wird das nicht überschrieben bei einem Update der Core Komponenten, was ja der Sinn von Overrides ist. Das hat aber auch zur Folge, dass Verbesserungen im Core nicht wirksam werden im Override.

Falls man einmal Overrides nach Core-Updates ändern muss, ist es hilfreich, wenn man das Override sauber mit Kommentaren versehen hat.