Knowledgebase

Eigene Gantry 5 Style-Formulare anlegen

Bewertung:  / 1
SchwachSuper 

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 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:

 

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";.

 

 

  • Keine Kommentare gefunden

Einen Kommentar verfassen

Als Gast kommentieren

0
Deine Kommentare erfordern die Moderation durch den Administrator
Nutzungsbedingungen.
Suche - Kategorien
Suche - Inhalt
plg_search_attachments
VM - Search, Virtuemart Product

Ihr Warenkorb

 x 
Ihr Warenkorb ist noch leer.