Arbeiten mit der Vorlage

Die aktuelle Vorlage ist zu finden unter http://framework.vicon-intern.de/

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

• 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

1. Upload sämtlicher Dateien auf dem Server
2. Import des SQL-Dumps in die Datenbank
3. 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.