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:

  1. Sie wollen weitere CI-Farben hinzufügen
  2. 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";.