Gantry Template Framework (Joomla/Wordpress/Gravity) Know-How / Tutorials

Gantry ist eine Template-Framework von RocketTheme. Es liegt aktuell vor in der Version 5. Auch die Version 4 war schon sehr beliebt und verbreitet und wird genau wie Version 5 von RocketTheme in Ihren Templates eingesetzt. Gantry 5 ist als Template-Framework sowohl in Joomla und Wordpress nutzbar und nun auch in dem von RocketTheme entwickelten CMS GRAV bzw. gravity.

Das Framework nutzt viele neue moderne Technologien wie YAML, TWIG, SCSS, Mark Down und auch ein sauberes Override.

Stern inaktivStern inaktivStern inaktivStern inaktivStern inaktiv

Zielstellung dieses Beitrages

Dieser Beitrag richtet sich speziell an Nutzer des Gantry5-Template-Frameworks unter Joomla.

Wer mit dem Ganty5-Template unter Joomla arbeitet, weiss, dass man zum einen Inhalte im Template-Layout über Gantry5-Particle einpflegen kann. Andererseits ist es aber auch möglich Particle als Module anzulegen und diese Module auf dem Joomla-üblichen Weg Modulpositionen des Templates zuzuweisen. Ein dritter Weg wäre über eine Paticle-Instanz im Template-Layout sich ein existierendes Modul einzuladen.

Rein theoretische kann man fast ganz ohne Joomla-Module auskommen und Inhalte nur über Particle im Gantry-Layout-Manager einpflegen. Z.B. bei sogenannten One-Pager-Projekten mache ich persönlich das ganz gern so, da sowieso jeder Particle-Inhalt immer nur an einer Position auf nur einer Startseite veröffentlicht wird. Bei komplexeren Webprojekten praktiziere ich meist eine Mischform. Inhalte die ich mehrfach auf Seiten veröffentliche und diverse weitere Einstellmöglichkeiten benötige (z.B. Sprachabhängigkeiten) kreiere ich als Modul-Particle und wirklich statische Inhalte, die immer und überall unverändert angezeigt werden, hänge ich meist sofort fest als Particle in das Gantry5-Layout - entweder schon in das Basic-Outline oder nur in eines der Sub-Layouts.

Bewertung: 5 / 5

Stern aktivStern aktivStern aktivStern aktivStern aktiv

Sie haben es sicher schon gesehen, dass es bei SASS (scss) manche Style-Scripte mit einem Unterstrich im Dateinamen beginnen, andere wiederum nicht. Bei der Import-Einbindung dieser Scripte aber scheint die Schreibweise egal. Was hat das damit aussich?

 

Der Sinn der Underscore-Syntax

...ist, daß hierüber dem SASS-Compiler mitgeteilt werden kann, ob man eine importierte Scriptdatei wirklich mit ihrem Inhalt in eine aufrufende Scriptdatei einbetten will, es also am Ende nur eine einzige Scriptdatei entsteht in der alle so importierten Unterscripte mit ihrem Inhalt enthalten sind. Ohne Unterstrich demgegenüber sagt man jedoch dem Compiler, dass diese so importierte scss-Datei als eine eigenständige css-Datei compiliert erhalten bleibt und klassisch per @import in der fertigen css-Hauptscript aufgerufen wird. D.h., in diesem Fall entstehen ggf. nicht eine einzige CSS-Datei, sondern sehr viele einzelne.

Bewertung: 3 / 5

Stern aktivStern aktivStern aktivStern inaktivStern inaktiv

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:

Bewertung: 4 / 5

Stern aktivStern aktivStern aktivStern aktivStern inaktiv

Zielstellung:

Über den Template-Manager von Gantry 5 ist es sehr einfach Fonts in das Template einzubinden, ganz besonders dann, wenn man einfach nur einen Font vom Google-Font-Server einbinden möchte. Hierfür wird von Gantry 5 im Template-Manager ein Font-Selector-Tool angeboten Base-Outline > Register Styles > Gruppe Font Families. Das wäre ein Methode.

Eine weitere Methode, aber ein klein wenig komplizierter, wäre es, wenn man z.B. für Kundenprojekte eine CI-Schrift einbinden soll, die nicht aus dem Google-Fundus kommt. Zunächst sind hier natürlich die Urheber- und Lizenzrechte für die Schrift zu beachten! Nicht jede Schrift darf einfach über eine Webseite eingebunden werden. Das wäre eine unzulässig Verbreitung, denn jede so eingebundene Schrift ist dann für jedermann downloadbar. Es gibt aber neben den Google-Fonts weitere Seiten die auch kostenlose Schriften anbieten - z.B. fontfabric.com oder fontsquirrel.com. Hier allerdings werden diese nicht als Dienst bereitgestellt, sondern man muss diese als ZIP-Archiv herunterladen und selbst hosten und entsprechend als Font-Family einbinden. Diese Methode soll nun beschrieben werden.

Bewertung: 4 / 5

Stern aktivStern aktivStern aktivStern aktivStern inaktiv

Wie passt man für Gantry 5 das Layout nach eigenen Bedürfnissen an - Erstellung eigener Outlines

Eigene Outline anlegen.

Outlines sind die Vorlagen für Gantry-Layouts. Von diesen können Layouts abgeleitet werden in dem ein Layout erstellt wird und dann über den load-Button dieses Outline auf das neue Layout angewendet wird. Das Layout erhält dann die vollst. Struktur wie im Outline angelegt, allerdings kann man für späteteres Überschreiben eines Layouts mit einem Outline festlegen, wie konsequent das Überschreiben erfolgen soll. So können z.B. bereits vorgenommene Modifikationen im Layout erhalten bleiben und trotzdem neue oder geänderte Strukturen aus dem Outline geladen werden.

Um nun ein eigenes Outline anzulegen, geht man in den Ordner templates/g5_helium/layouts. Die hier vorhandenen YAML-Scripte beschreiben die vorhandenen Outlines. Entweder kopiert man sich eine als Ausgangsbasis geeignete Vorlage mit eigenem Namen oder man erstellt von grundauf per Editor seine eigenen Vorlage.

Häufig findet man als Vorlagen die default.yaml, welche die Standardvorlage (Base-Outline) ist, welche meist auf alle Projektseiten angewendet wurde. Dann gibt es häufig eine home_-_particle.yaml, welche beispielhaft eine Layout mit Particeln für die HomePage liefert. Das trifft so meist bei fertigen RocketTheme-Templates für Joomla, Wordpress oder Grav zu. Weitere Outlines sind für die Error- und Offline-Page bestimmt.