In Gantry 5 Templates kann man unter dem Menü-Button Styles grundsätzliche Einstellungen und Parameter für seine Templates vornehmen. Dort werden z.B. die CI-Farben hinterlegt, die Hauptschriften, Sectionsfarben oder Hintergrundbilder etc.
Dieser Artikel beschreibt, wie Sie das Set an Konfigurationsparametern in Ihrem Gantry-5-Template projektabhängig verändern oder erweitern können am zwei Beispielen:
- Sie wollen weitere CI-Farben hinzufügen
- Sie wollen für eine selbst erstellte Section Hauptfarben und Hintergrundbilder definieren.
Beispiel A: Hinzufügen und bereitstellen weiterer CI-Farben
Entscheidend für alle Erweiterungen und Änderungen im Set der Styles-Konfigurationsformulare ist das Verzeichnis templates/g5_helium/blueprints/styles. Hier gilt die Regel, jede dort abgelegt YAML-Datei erzeugt eine neue Formulargruppe. Die accent.yaml ist z.B. für die Konfigurationsparameter der Akzent-Farben veranwortlich. Diese hat typischerweise folgenden Aufbau:
name: Accent Colors description: Accent colors for the Helium theme type: core form: fields: color-1: type: input.colorpicker label: Accent Color 1 default: "#4db2b3" color-2: type: input.colorpicker label: Accent Color 2 default: "#8f4dae"
Der Aufbau ist schnell erkennbar. Es werden zwei Felder für die Ablage von Farben mit dem Formluarelementtype Color-Picker erzeugt. Das Ergebnis dieser Formularfelder wird bereitgestellt in den Variablen $accent-color-1 und $accent-color-2. Die automatische Erzeugung der Variablennamen erfolgt dabei nach der Regel: Name der YAML-Datei (also: accent) plus Name der Felder (also: color-1 bzw. color-2).
Damit ist selbsterklärend wie weitere Farben hinzugefügt werden können.
Evtl. ist es jedoch sinnvoll, nicht diese Datei zu verändern, sondern eine eigene hinzuzufügen die nicht bei Gantry5-Updates überschrieben würde.
Wie sich eine solche Formulargruppe verhält und wie Sie auf der Style-Seite eingeordnet wird, wird definiert über den type: im Kopfheader. Hier gibt es z.B. die Typen core, configuration oder section.
So z.B. kann das Ergebnis aussehen:
Idealerweise sollte man seine neue Datei nichteinmal in das gleiche o.g. Verzeichnis legen, sondern sauber ein Override-Verzeichnis anlegen. Als passendes custom-Pendant zu o.g. styles-Verzeichnis müsste man folgenden Ordner anlegen:
templates/G5_THEME/custom/engine/blueprints/styles/. Hier wird jeden neue hineingelegt yaml-Datei gelesen erscheint dann wie oben als Formular-Gruppe in den Style-Settings.
Beispiel B: Hinzufügen einer eigenen Sections-Konfigurationsgruppe
Wenn man in seinem Layout eine eigene Section angelegt hat, möchte man diese evtl. über den Styles-Manager konfigurierbar machen. Dazu legt man einfach eine neue Styles-Datei an: z.B: slideshow.yaml und füllt diese mit Konfigurationsdaten - wie im Beispiel unten. Als Ablageort für diese Datei kommen zwei Verzeichnisse in Frage. Wenn man eine neue Section erstellt hat, braucht es auch eine neue adäquat benannte YAML-Datei. Diese könnte dann in o.g. templates/TEMPLATE_DIR/blueprints/styles abgelegt werden ohne dass man Angst haben müsste, dass diese mit einem Template-Update überschrieben werden würde. Allerdings wäre das nur der bequemere Weg. Der bessere Weg wäre, genau so korrekt zu verfahren, wie wenn man eine bestehende Sections-YAML mit eigenen weitere Parametern erweitern will (z.B: einen Hintergrundbild) ohne Gefahr zu laufen, dass diese Modifikation durch Updates überschrieben würde. Hierzu muss man sich dann einfach nur an das saubere Override-Konzept halten, welches für die Styles bedeutet, ein Verzeichnis templates/TEMPLATE_DIR/custom/blueprints/styles/ anzulegen und die neue Sections-Konfigurationsdatei dort hinein abzulegen. Das Override-Prinzip ist hier noch mal beschrieben: http://docs.gantry.org/gantry5/advanced/file-overrides.
Diese Beispiel verändert den Parametersatz für die Slideshow-Section:
name: Slideshow Styles description: Slideshow styles for the Salient theme type: section form: fields: background: type: input.colorpicker label: Background default: "#ffffff" text-color: type: input.colorpicker label: Text default: "#212121" background-image: type: input.imagepicker label: Background Image default: "gantry-media://rocketlauncher/home/slideshow/bg.jpg"
Wichtig, wie oben schon genannt, ist die Verwendung des Typ section wesentlich für die Einordnung.
Das Ergebnis sieht dann z.B. so aus:
In den scss-Scripten kann man dann die Variablen $slideshow-background, $slideshow-text-color oder $slideshow-background-image verwenden.
Beachten: Wenn es im Template schon eine slideshow.scss in templates/g-meintemplate/scss/sections/ gibt, dann kann man dafür zwar eine gleichnamige unter templates/g-meintemplate/custom/scss aberlegen, aber hier greift keine automatisches Override. Statt dessen muss, damit diese Datei geladen wird, in der custom.scss eine Import-Zeile eingetragen werden: @import "utility";.