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

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.
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.