Contao Theme erstellen

Grundlagen

Woraus besteht ein Theme?

Wird ein Theme exportiert, erhält man eine komprimierte Datei mit der Endung .cto. Diese lässt sich, ähnlich wie eine Zip-Datei, mit jedem Packprogramm öffnen (z.B. WinRar).

Die Datei enthält folgendes:

• Datei theme.xml mit Informationen zu
  • Autor, Name des Themes, Vorschaubild, etc.
  • eingebettete Ordner
  • verwendete Module
  • angelegte Layouts
  • angelegte Stylesheets
• Ordner mit Dateien aus files/Dateisystem
• Ordner mit Templates

Schritt für Schritt zum eigenen Theme

1. Templates-Ordner erstellen

Im Backend-Modul Themes im Abschnitt Layout muss zunächst ein neuer Ordner angelegt werden.

Dieser Ordner sollte die gleiche Benennung erhalten, wie das Theme. Dabei ist darauf zu achten, dass der Ordner keine Leerzeichen, Umlaute oder Sonderzeichen enthält. Außerdem wird Kleinschreibung empfohlen.

In dem Ordner werden künftig alle angepassten Templates abgelegt.

2. Ordner-Struktur in der Dateiverwaltung anlegen

Als nächstes empfielt es sich, die Ordnerstruktur in der Dateiverwaltung anzulegen. Hierbei sollten mindestens 2 neue Ordner angelegt werden:

• Ordner, der dem Theme zugehörige Dateien enthalten soll
• Ordner, der Dateien für den Content enthalten soll

In dem Theme-Ordner werden künftig alle Dateien, die zum Theme gehören, abgelegt. Dazu zählen beispielsweise:

• CSS-Dateien
• JavaScript-Dateien
• Fonts
• Hintergrundbilder
• Icons

Der Content-Order enthält Dateien, wie

• Content-Bilder
• PDF-Dateien
• Logo

Der Übersichtlichkeit halber, sollten gleiche Dateitypen in entsprechende Unterordner gelegt werden. Das bedeutet, alle CSS-Dateien werden im Theme-Unterordner css gespeichert, Content-Bilder werden im Content-Unterordner images gespeichert usw.

3. Theme erstellen

Erst jetzt wird das Theme erstellt. Neben den obligatorischen Angaben Theme-Titel und Autor wird im Feld Ordner der zuvor in der Dateiverwaltung angelegte Theme-Ordner sowie im Feld Templates-Ordner der über das BE-Module Templates angelegte Templates-Ordner ausgewählt.

Möchte man die Stylesheets über das Backend-Modul Stylesheets bearbeiten, sollten im Feld Globale Variablen die im Design verwendeten Farben eingetragen werden. Im Stylesheet-Modul kann anschließend auf die einzelnen Variablen zugegriffen werden.

Achtung: Der Schlüssel muss mit dem Zeichen $ beginnen und darf im Fall einer Farbe insgesamt nicht länger als 6 Zeichen sein. Als der hexadezimale RGB-Farbwert wird in das Feld Wert ohne # eingetragen.

4. Frontend-Module anlegen

Nun werden die benötigten Frontend-Module im Theme angelegt. Um die Liste der angelegten Module möglichst übersichtlich zu halten, sollte über eine sinnvolle Benennung der Module nachgedacht werden. Navgations-Module können bspw. so zusammengefasst werden, indem den Namen immer "nav -" vorangestellt wird. Die Hauptnavigation heißt dann "nav - main", die Meta-Navigation "nav - meta" usw.

5. Stylesheets anlegen

Wenn die CSS-Regeln über das Contao Stylesheet-Modul festgelegt werden sollen, müssen in nächsten Schritt die Stylesheets angelegt werden.

Möchte man stattdessen CSS-Dateien aus dem Theme-Ordner in der Dateiverwaltung einbinden, kann man diesen Schritt überspringen.

6. Seitenlayouts erstellen

Zu guter Letzt werden die Seitenlayouts angelegt. Auch hier ist eine sinnvolle Benennung z.B. nach Gültigkeit oder Spaltenanzahl vorteilhaft.

Im Seitenlayout werden jetzt die angelegten Frontend-Module und Stylesheets eingebettet.

Tipp: Wenn man in das Feld Body-Klasse den Insert-Tag {{page::alias}} einträgt, hat man für jede Seite eine eindeutige CSS-Klasse für jede Seite, über die spezifische CSS-Regeln nur für eine bestimmte Seite festgelegt werden können.

Das fertige Theme exportieren

Hat man nun das Theme vollständig umgesetzt, kann man es exportieren und in andere Contao-Installationen importieren.