Contao Theme erstellen - Versionsgeschichte

Saskia Barre am 11. August 2015 um 14:21 Uhr

2015-08-11T14:21:28Z

Saskia Barre: /* Das fertige Theme exportieren */

2015-08-11T14:16:44Z

‎Das fertige Theme exportieren

Saskia Barre am 11. August 2015 um 14:15 Uhr

2015-08-11T14:15:08Z

Saskia Barre am 11. August 2015 um 14:05 Uhr

2015-08-11T14:05:13Z

Saskia Barre am 11. August 2015 um 12:08 Uhr

2015-08-11T12:08:00Z

Saskia Barre am 11. August 2015 um 10:50 Uhr

2015-08-11T10:50:37Z

Saskia Barre: Die Seite wurde neu angelegt: „ == Grundlagen == === Woraus besteht ein Theme? === Wird ein Theme exportiert, erhält man eine komprimierte Datei mit der Endung '''.cto'''. Diese lässt si…“

2015-08-11T08:07:55Z

Die Seite wurde neu angelegt: „ == Grundlagen == === Woraus besteht ein Theme? === Wird ein Theme exportiert, erhält man eine komprimierte Datei mit der Endung '''.cto'''. Diese lässt si…“

Neue Seite

== 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. [http://www.winrar.de/ 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-Anleitung ==

=== 1. Templates-Ordner erstellen ===

=== 2. Ordner-Struktur in der Dateiverwaltung anlegen ===

=== 3. Theme erstellen ===

=== 4. Frontend-Module anlegen ===

=== 5. Stylesheets anlegen ===

=== 6. Seitenlayouts erstellen ===

[[Kategorie:Tutorials_(Contao)]]

← Nächstältere Version		Version vom 11. August 2015, 14:21 Uhr
Zeile 95:		Zeile 95:

	[[Datei:Theme-exportieren.jpg]]		[[Datei:Theme-exportieren.jpg]]
		+
		+
		+	== Hinweise zum Tutorial ==
		+
		+	Dieses Tutorial wurde nach Vorlage des Vortrages '''Best Practice: Contao Theme Erstellung''' von Sascha Müller auf der Contao-Konferenz 2015 erstellt.
		+
		+	=== Weiterführende Links ===
		+
		+	Original Vortragsfolien: [http://vortraege.bytepuzzle.de/ck2015-contao-themes-erstellen/#/step-1]<br />
		+	Video-Mitschnitt zum Vortrag: [https://www.youtube.com/watch?v=B2a9V09gj5Q]
		+
		+	--[[Benutzer:Saskia Barre\|Saskia Barre]] ([[Benutzer Diskussion:Saskia Barre\|Diskussion]]) 16:21, 11. Aug. 2015 (CEST)


	[[Kategorie:Tutorials_(Contao)]]		[[Kategorie:Tutorials_(Contao)]]

← Nächstältere Version		Version vom 11. August 2015, 14:16 Uhr
Zeile 90:		Zeile 90:


−	== Das fertige Theme exportieren ==	+	== Das fertige Theme exportieren/importieren ==

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

@@ Zeile 87: / Zeile 87: @@
 Im Seitenlayout werden jetzt die angelegten Frontend-Module und Stylesheets eingebettet.
-<blockquote>'''Tipp:''' Wenn man in das Feld '''Body-Klasse''' den Insert-Tag <code>{{page::alias}}</code> 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.</blockquote>
+<blockquote>'''Tipp:''' Wenn man in das Feld '''Body-Klasse''' den Insert-Tag <code><nowiki>{{page::alias}}</nowiki></code> 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.</blockquote>
 [[Kategorie:Tutorials_(Contao)]]

@@ Zeile 55: / Zeile 55: @@
 [[Datei:Themes-erstellen-dateiverwaltung.jpg]]
@@ Zeile 61: / Zeile 63: @@
 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 />
+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.<br />
-'''Achtung:'''
+<blockquote>'''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.
+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.</blockquote>
 [[Datei:Theme-erstellen.jpg]]
 === 4. Frontend-Module anlegen ===
 === 5. Stylesheets anlegen ===
 === 6. Seitenlayouts erstellen ===
 [[Kategorie:Tutorials_(Contao)]]

@@ Zeile 32: / Zeile 32: @@
 In dem Ordner werden künftig alle angepassten Templates abgelegt.
 === 2. Ordner-Struktur in der Dateiverwaltung anlegen ===
@@ Zeile 38: / Zeile 39: @@
 * 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:
@@ Zeile 45: / Zeile 47: @@
 * Hintergrundbilder
 * Icons
 Der Content-Order enthält Dateien, wie
@@ Zeile 50: / Zeile 53: @@
 * PDF-Dateien
 * Logo
 === 3. Theme erstellen ===
 === 4. Frontend-Module anlegen ===

@@ Zeile 17: / Zeile 17: @@
-== Schritt-für-Schritt-Anleitung ==
+== Schritt für Schritt zum eigenen Theme ==
 === 1. Templates-Ordner erstellen ===
 === 2. Ordner-Struktur in der Dateiverwaltung anlegen ===
 === 3. Theme erstellen ===