Ein erstes Joomla Child-Template

In diesem Tutorial beschreibe ich die ersten Schritte auf dem Weg zur Geburt meines ersten Child-Templates. Diesen Anfang habe ich auf der Grundlage des Standard-Template Cassiopeia gemacht.

Seit Joomla 4.1 ist es ermöglicht, mit der Child-Template Funktion unkompliziert das eigene Template zu erstellen. Wie eine Katze an ein Mauseloch kannst du dich ganz langsam in die Template-Entwicklung vortasten. Es ist lediglich erforderlich, die selbst hinzugefügten Elemente zu warten. Also ist auch nur zwingend erforderlich, dass du dich mit diesen auskennst. Alles andere wird weiterhin vom Joomla-Projekt auf dem neuesten Stand gehalten.

Child-Template erstellen

Ich baue auf einer frischen Joomla 4.1 Installation auf.

1. Öffne den Template Manager, in dem du links auf System und dann rechts auf Site Templates klickst.

Du erkennst unter dem Namen des Templates einen neuen Eintrag parent. Hier ist gekennzeichnet, ob ein Template die Voraussetzungen dazu verfügt, ein Kindtemplate zu erzeugen. Hier beginnt der Zauber!

2. Öffne als nächstes das Template Cassiopeia per Klick auf den Eintrag Cassiopeia Details and Files.

Auch hier findest du etwas Neues vor: Die Schaltfläche Create Child-Template. Außerdem hat sich die Dateistruktur verändert, die du im linken Bereich siehst.

Die Schaltfläche Copy template ist nicht mehr verfügbar. Diese kennst du vielleicht aus vorhergehenden Joomla Versionen?

3. Klicke nun auf die Schaltfläche Create Child-Template und erstelle so dein erstes Joomla Child Template.

Vollziehe die zwei Schritte nach, welche in den nachfolgenden Bildern gezeigt sind. Du wirst sehen, es ist tatsächlich unkompliziert.

Voila! Das war es schon! Du hast ein Child Template erstellt. Anhand der Dateien im linken Bereich erkennst du, dass du dich noch in der Ansicht von Cassiopeia befindest. Um das neue Child Template zu bearbeiten, wechselst du im nächsten Schritt die Ansicht.

4. Schließe die Anzeige der Cassiopeia-Dateien und öffne dein Child Template.

Klicke also im Dashboard auf den Namen deines Child Templates.

5. Sieh dir die Dateien an, die für dein Child Template automatisch angelegt wurden. Hierbei handelt es sich um eine minimale Struktur.

Die folgenden Ansichten, zeigen dir den Inhalt deines Child-Templates, nachdem du im Dashboard auf den Namen deines Child Templates geklickt hast.

Wenn du dieses Template als Standardtemplate aktivierst, ändert sich die Anzeige im Frontend noch nicht, da alles vom Elterntempalte Cassiopeia geerbet und verwendet wird.

6. Öffne die Frontend Ansicht der Website und überzeuge dich davon, dass Cassiopeia und dein Child Template bisher die gleiche Anzeige bewirken.

Sieh dir dazu zunächst die Anzeige von Cassiopeia unmittelbar nach der Installation von Joomla an.

Aktiviere dein Child Template

Sieh dir die Anzeige erneut im Frontend an

7. Erstelle ein Override

Nach einer ganz frischen Joomla Installation ist standardmäßig die Ansicht Featured aktiv. Deshalb erstellen wir ein Override dieser Ansicht.

Klicke auf den Eintrag featured.

Füge einen einfachen Text im Override ein.

Überzeuge dich davon, dass die Änderung im Frontend übernommen wird.

Hier geht es nicht um Programmierung, sondern ums Prinzip. Du bist nun in der Lage deine eigenen Overrides erstellen!

8. Lege ein user.css an und ändere CSS-Stile

In der Regel möchte man auf der Website seinen Stil ausgeben. Dies geschieht meist per CSS. Mithilfe der Datei user.css ist es dir möglich, alles von Cassiopeia zu verwenden, und nur deinen eigenen Änderungswünsche hinzuzufügen oder abzuändern.

Klicke also auf die Schaltfläche New File in der Werkzeugleiste, um eine neue Datei anzulegen.

Erstelle die Datei user.css im Verzeichnis media/css, den hier wird sie als erstes gesucht, wenn dein Child Template aktiv ist.

Stelle sicher, dass die Datei korrekt gespeichert wird.

Lege neue Stile an. Möchtest du beispielsweise die Hintergrundfarbe der Navigation ändern?

Verwende in diesem Fall folgenden Code:

:root {
  --cassiopeia-color-primary: red;
}

.container-header {
  background-image: none;
}

Die Angabe

.container-header {
  background-image: none;
}

ist wichtig, weil Cassiopeia im Header per CSS einen Verlauf als Image einfügt. Sie dir dazu den nachfolgenden Codeauszug aus der template.css von Cassiopeia an.

/* Codeauszug aus der template.css von Cassiopeia*/
.container-header {
  background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary) 0,var(--cassiopeia-color-hover) 100%);
  box-shadow: inset 0 5px 5px rgba(0,0,0,.03);
  position: relative;
  z-index: 10;
}

Es ist zwingend diesen Code zu überschreiben.

Überzeuge dich davon, dass die Änderung im Frontend übernommen wird.