Arbeiten mit der Vorlage: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „Die aktuelle Vorlage ist zu finden unter '''''[http://www.example.com Link-Text]''''' == Installation der Vorlage == # Upload sämtlicher Dateien auf dem Ser…“) |
|||
| Zeile 1: | Zeile 1: | ||
Die aktuelle Vorlage ist zu finden unter '''''[http://www.example.com Link-Text]''''' | Die aktuelle Vorlage ist zu finden unter '''''[http://www.example.com Link-Text]''''' | ||
| + | == Aufbau der Vorlage == | ||
| + | |||
| + | === Enthaltene Erweiterungen === | ||
| + | * [https://contao.org/de/erweiterungsliste/view/dlh_googlemaps.de.html dlh_googlemaps] | ||
| + | * [https://contao.org/de/erweiterungsliste/view/BackupDB.de.html BackupDB] | ||
| + | * [https://contao.org/de/erweiterungsliste/view/easyupdate3.de.html easyUpdate3] | ||
| + | * [https://contao.org/de/erweiterungsliste/view/easy_themes.de.html EasyThemes] | ||
| + | * [http://contao-bootstrap.netzmacht.de/ Bootstrap für Contao] | ||
| + | * [https://github.com/netzmacht/contao-theme-plus ThemePlus] | ||
| + | * [https://contao.org/de/erweiterungsliste/view/rocksolid-custom-elements.html RockSolid Custom Elements] | ||
| + | |||
| + | === Enthaltene Plugins === | ||
| + | * | ||
| + | Die Plugins liegen im Ordner /files/theme/plugins/ | ||
| + | |||
| + | === Ordnerstruktur im Dateisystem === | ||
| + | * files | ||
| + | ** content | ||
| + | *** images | ||
| + | *** download | ||
| + | *** ... | ||
| + | * theme | ||
| + | ** css | ||
| + | ** fonts | ||
| + | ** images | ||
| + | ** js | ||
| + | ** plugins | ||
| + | |||
| + | Weiterführende Informationen: [[Contao Theme erstellen]] | ||
== Installation der Vorlage == | == Installation der Vorlage == | ||
| Zeile 7: | Zeile 36: | ||
# Anpassung der Datei system/config/localconfig.php - hier müssen die neuen Datenbank-Zugangsdaten eingetragen werden | # Anpassung der Datei system/config/localconfig.php - hier müssen die neuen Datenbank-Zugangsdaten eingetragen werden | ||
| + | == Arbeiten mit der Vorlage (Richtlinien) == | ||
| + | |||
| + | === Variablen === | ||
| + | Im Theme sind mehrere Variablen angelegt, z.B. für Farbwerte und Schriftarten. Farbwerte werden als RGB-Wert (nicht HEX!) hinterlegt, damit diese auch für RGBA verwendet werden können. | ||
| + | |||
| + | Folgende Variablen sind bereits angelegt: | ||
| + | |||
| + | $font (Hauptschriftart) | ||
| + | $fontHeadline (für Überschrift o.ä.) | ||
| + | $textColor (Farbe für Fließtexte o.ä.) | ||
| + | $mainColor (Hauptfarbe) | ||
| + | $secondaryColor (2. Farbe) | ||
| + | $borderColor (Rahmenfarbe) | ||
| + | $highlightColor (Farbe für hervorgehobene Dinge o.ä.) | ||
| + | |||
| + | Bei Bedarf können eigene Variablen ergänzt werden. | ||
| + | '''Achtung:''' Vollausgeschriebene Variablen können nur in Stylesheets verwendet werden, die im Dateisystem liegen. Wenn lieber der Contao-eigene CSS-Editor verwendet werden soll, müssen die Variablen auf eine maximale Länge von 6 Zeichen gekürzt werden. Aus $mainColor wird so beispielsweise $mainC. Außerdem müssen dann die Farbwerte in HEX angegeben werden. | ||
| + | |||
| + | === CSS (Stylesheets) === | ||
| + | Eigene Stylesheets werden im Ordner /files/theme/css/ abgelegt. In den Stylesheets können die Variablen aus dem Theme verwendet werden. | ||
| + | |||
| + | Für eine bessere Übersichtlichkeit empfiehlt es sich, die Selektoren nach Wertigkeit/Spezifität geordnet in das Stylesheet zu schreiben. Oben stehen die Tag-Selektoren, darunter die Klassen-Selektoren und am Schluss die ID-Selektoren. | ||
| + | |||
| + | [https://erdmann-freunde.de/css-kurs/teil-2-css-einfach-halten.html Weitere Tipps für besseres CSS] | ||
[[Kategorie:Contao]] | [[Kategorie:Contao]] | ||
Version vom 23. Februar 2017, 10:27 Uhr
Die aktuelle Vorlage ist zu finden unter Link-Text
Inhaltsverzeichnis
Aufbau der Vorlage
Enthaltene Erweiterungen
- dlh_googlemaps
- BackupDB
- easyUpdate3
- EasyThemes
- Bootstrap für Contao
- ThemePlus
- RockSolid Custom Elements
Enthaltene Plugins
Die Plugins liegen im Ordner /files/theme/plugins/
Ordnerstruktur im Dateisystem
- files
- content
- images
- download
- ...
- content
- theme
- css
- fonts
- images
- js
- plugins
Weiterführende Informationen: Contao Theme erstellen
Installation der Vorlage
- Upload sämtlicher Dateien auf dem Server
- Import des SQL-Dumps in die Datenbank
- Anpassung der Datei system/config/localconfig.php - hier müssen die neuen Datenbank-Zugangsdaten eingetragen werden
Arbeiten mit der Vorlage (Richtlinien)
Variablen
Im Theme sind mehrere Variablen angelegt, z.B. für Farbwerte und Schriftarten. Farbwerte werden als RGB-Wert (nicht HEX!) hinterlegt, damit diese auch für RGBA verwendet werden können.
Folgende Variablen sind bereits angelegt:
$font (Hauptschriftart) $fontHeadline (für Überschrift o.ä.) $textColor (Farbe für Fließtexte o.ä.) $mainColor (Hauptfarbe) $secondaryColor (2. Farbe) $borderColor (Rahmenfarbe) $highlightColor (Farbe für hervorgehobene Dinge o.ä.)
Bei Bedarf können eigene Variablen ergänzt werden. Achtung: Vollausgeschriebene Variablen können nur in Stylesheets verwendet werden, die im Dateisystem liegen. Wenn lieber der Contao-eigene CSS-Editor verwendet werden soll, müssen die Variablen auf eine maximale Länge von 6 Zeichen gekürzt werden. Aus $mainColor wird so beispielsweise $mainC. Außerdem müssen dann die Farbwerte in HEX angegeben werden.
CSS (Stylesheets)
Eigene Stylesheets werden im Ordner /files/theme/css/ abgelegt. In den Stylesheets können die Variablen aus dem Theme verwendet werden.
Für eine bessere Übersichtlichkeit empfiehlt es sich, die Selektoren nach Wertigkeit/Spezifität geordnet in das Stylesheet zu schreiben. Oben stehen die Tag-Selektoren, darunter die Klassen-Selektoren und am Schluss die ID-Selektoren.
