Contao Theme erstellen: Unterschied zwischen den Versionen
| Zeile 32: | Zeile 32: | ||
In dem Ordner werden künftig alle angepassten Templates abgelegt. | In dem Ordner werden künftig alle angepassten Templates abgelegt. | ||
| + | |||
=== 2. Ordner-Struktur in der Dateiverwaltung anlegen === | === 2. Ordner-Struktur in der Dateiverwaltung anlegen === | ||
| Zeile 38: | Zeile 39: | ||
* Ordner, der dem Theme zugehörige Dateien enthalten soll | * Ordner, der dem Theme zugehörige Dateien enthalten soll | ||
* Ordner, der Dateien für den Content 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: | In dem Theme-Ordner werden künftig alle Dateien, die zum Theme gehören, abgelegt. Dazu zählen beispielsweise: | ||
| Zeile 45: | Zeile 47: | ||
* Hintergrundbilder | * Hintergrundbilder | ||
* Icons | * Icons | ||
| + | |||
Der Content-Order enthält Dateien, wie | Der Content-Order enthält Dateien, wie | ||
| Zeile 50: | Zeile 53: | ||
* PDF-Dateien | * PDF-Dateien | ||
* Logo | * Logo | ||
| + | |||
| + | [[Datei:Themes-erstellen-dateiverwaltung.jpg]] | ||
| + | |||
=== 3. Theme erstellen === | === 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.<br /> | ||
| + | '''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. | ||
| + | |||
| + | [[Datei:Theme-erstellen.jpg]] | ||
=== 4. Frontend-Module anlegen === | === 4. Frontend-Module anlegen === | ||
Version vom 11. August 2015, 13:08 Uhr
Inhaltsverzeichnis
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.
