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…“) |
|||
| (9 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | Die aktuelle Vorlage ist zu finden unter '''''[http:// | + | Die aktuelle Vorlage ist zu finden unter '''''[http://framework.vicon-intern.de/ http://framework.vicon-intern.de/]''''' |
| + | == Aufbau der Vorlage == | ||
| + | |||
| + | === Enthaltene Erweiterungen === | ||
| + | * [https://contao.org/de/erweiterungsliste/view/dlh_googlemaps.html dlh_googlemaps] | ||
| + | * [https://contao.org/de/erweiterungsliste/view/BackupDB.html BackupDB] | ||
| + | * [https://contao.org/de/erweiterungsliste/view/easyupdate3.html easyUpdate3] | ||
| + | * [https://contao.org/de/erweiterungsliste/view/easy_themes.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] | ||
| + | * [https://contao.org/de/erweiterungsliste/view/smart_backend_theme.html Smart Backend Theme] | ||
| + | * [https://contao.org/de/erweiterungsliste/view/coverpicture.html Titelbild (Seitenbild)] | ||
| + | |||
| + | === Enthaltene Plugins === | ||
| + | * [https://owlcarousel2.github.io/OwlCarousel2/ Owl Carousel] | ||
| + | Die Plugins liegen im Ordner /files/theme/plugins/ | ||
| + | |||
| + | === Ordnerstruktur im Dateisystem === | ||
| + | * files | ||
| + | ** content | ||
| + | *** images | ||
| + | *** download | ||
| + | *** ... | ||
| + | ** custom-elements | ||
| + | ** theme | ||
| + | *** css | ||
| + | *** fonts | ||
| + | *** images | ||
| + | *** js | ||
| + | *** plugins | ||
| + | **** owl-carousel | ||
== Installation der Vorlage == | == Installation der Vorlage == | ||
| Zeile 7: | Zeile 38: | ||
# 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) == | ||
| + | |||
| + | === Theme === | ||
| + | Bei der Erstellung des Themes sollte sich an diese Vorgehensweise gehalten werden: [[Contao Theme erstellen]] | ||
| + | |||
| + | Das Theme und die Ordner-Struktur sind bereits in der Vorlage angelegt. Das Theme muss jedoch an das Projekt angepasst werden. | ||
| + | |||
| + | === 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)<br> | ||
| + | $fontHeadline (für Überschrift o.ä.)<br> | ||
| + | $textColor (Farbe für Fließtexte o.ä.)<br> | ||
| + | $mainColor (Hauptfarbe)<br> | ||
| + | $secondaryColor (2. Farbe)<br> | ||
| + | $borderColor (Rahmenfarbe)<br> | ||
| + | $highlightColor (Farbe für hervorgehobene Dinge o.ä.) | ||
| + | $mainHColor (Hauptfarbe für Hover-Effekte) | ||
| + | $secondaryHColor (2. Farbe für Hover-Effekte) | ||
| + | |||
| + | Bei Bedarf können eigene Variablen ergänzt werden.<br> | ||
| + | '''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] | ||
| + | |||
| + | === Templates === | ||
| + | Der Vorlage liegen mehrere Templates bei, z.B. für Elemente/Module, die mit der Erweiterung Rocksolid Custom Elements angelegt wurden. Diese Templates sind direkt im Ordner /templates/ zu finden. Wenn eines dieser Templates angepasst werden muss, sollte eine Kopie des Templates in den eigenen Template-Unterordner gelegt werden. Diese kann dann bearbeitet werden. | ||
| + | |||
| + | === Einstellungen === | ||
| + | Zu Beginn sind alle Caches deaktiviert und die Anzeige von Fehlermeldungen aktiviert. Es wird empfohlen, diese Einstellungen während der Entwicklung beizubehatlen.<br> | ||
| + | Bei der Freigabe der Webseite sollten die Caches allerdings aktiviert und die Anzeige von Fehlermeldungen deaktiviert werden. | ||
| + | |||
| + | === Seitenstruktur === | ||
| + | Damit die Webseite nicht vorzeitig von Google indeziert wird, sollten zunächst der Robots-Tag aller Seiten auf noindex,nofollow gestellt werden. Sobald die Webseite online gehen soll, müssen die Robots-Tags geändert werden. | ||
[[Kategorie:Contao]] | [[Kategorie:Contao]] | ||
Aktuelle Version vom 23. Februar 2017, 12:52 Uhr
Die aktuelle Vorlage ist zu finden unter http://framework.vicon-intern.de/
Inhaltsverzeichnis
Aufbau der Vorlage
Enthaltene Erweiterungen
- dlh_googlemaps
- BackupDB
- easyUpdate3
- EasyThemes
- Bootstrap für Contao
- ThemePlus
- RockSolid Custom Elements
- Smart Backend Theme
- Titelbild (Seitenbild)
Enthaltene Plugins
Die Plugins liegen im Ordner /files/theme/plugins/
Ordnerstruktur im Dateisystem
- files
- content
- images
- download
- ...
- custom-elements
- theme
- css
- fonts
- images
- js
- plugins
- owl-carousel
- content
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)
Theme
Bei der Erstellung des Themes sollte sich an diese Vorgehensweise gehalten werden: Contao Theme erstellen
Das Theme und die Ordner-Struktur sind bereits in der Vorlage angelegt. Das Theme muss jedoch an das Projekt angepasst werden.
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.ä.)
$mainHColor (Hauptfarbe für Hover-Effekte)
$secondaryHColor (2. Farbe für Hover-Effekte)
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.
Weitere Tipps für besseres CSS
Templates
Der Vorlage liegen mehrere Templates bei, z.B. für Elemente/Module, die mit der Erweiterung Rocksolid Custom Elements angelegt wurden. Diese Templates sind direkt im Ordner /templates/ zu finden. Wenn eines dieser Templates angepasst werden muss, sollte eine Kopie des Templates in den eigenen Template-Unterordner gelegt werden. Diese kann dann bearbeitet werden.
Einstellungen
Zu Beginn sind alle Caches deaktiviert und die Anzeige von Fehlermeldungen aktiviert. Es wird empfohlen, diese Einstellungen während der Entwicklung beizubehatlen.
Bei der Freigabe der Webseite sollten die Caches allerdings aktiviert und die Anzeige von Fehlermeldungen deaktiviert werden.
Seitenstruktur
Damit die Webseite nicht vorzeitig von Google indeziert wird, sollten zunächst der Robots-Tag aller Seiten auf noindex,nofollow gestellt werden. Sobald die Webseite online gehen soll, müssen die Robots-Tags geändert werden.
