Blue Flower

Installation

Das Gantry 5 Framework besteht aus zwei Teilen.
Das eigentliche Framework (Gantry 5 Component). Dies sollte als erstes installiert werden.
Als nächstes das Template. Es werden 2 Versionen angeboten. Hydrogen und Helium
1) Herunterladen von Gantty.org
2) Installation im Joomla-Backend
    - Menü Erweiterungen > Verwalten -> Register Paketdatei hochladen
    - Einzel die Zip Dateien hochladen (joomla-pkg_gantry5_x.x.xx.zip, joomla-tpl_g5_hydrogen_v5.x.xx.zip, ggf. noch joomla-tpl_g5_helium_v5.x.xx.zip)

Konfiguration

Nach der Installation gibt es einen neuen Menüeintrag Komponenenten > Gantry 5 Themes  > Available Themes
Dort auf  Configure  klicken.


Grundeinstellungen für das Framework

Gantry 5 bietet als gobale Basiseinstellungen die Base Outline (GLOBAL DEFAULTS) für die Grundkonfiguration des Frameworks an. Was hier vorab eingestellt wird kann für alle THEME OUTLINES übernommen werden.


Seiteneinstellungen (Page Settings)

base outline page settings

Header Properties
- eigene Metatags

Body Attributes
 Breite der Darstellung des Body-Bereichs.

Sections Layout:
   Fullwidth (Boxed Content) -> Für die jeweiligen Bildschirmgrößen angepasst
   Fullwidth (Flushed content) -> Komplette Bildbreite, ggf zu weit links
   Boxed -> Für die jeweiligen Bildschirmgrößen angepasst incl. Header
   Remove Container -> Komplette Bildbreite mit Rand

Anmerkung:
Die eigentliche Darstellungsbreite hängt von der Größe des Display ab.
Im Register Styles -> Block: Breakpoints können die jeweiligen Breiten eingestellt werden

 

 

Assets
- Favicon und Touch Icon auswählen
- CSS Verweis auf eine eigene CSS Datei oder CSS-Code eigefügt
- Javascript dito

Atoms

Anmerkung: Custom CSS /JS kann hier als Atom oder in Assets verwendet werden


Particles

Durch Gatry 5 erstellte und speziell formatierte Artikel (Particle). Deren Inhalt entstammt nicht aus den Joomla Artikeln bzw. Modulen. Es gibt 3 Ausnahmen (Page Content, Joomla Articles u. Module Instances)

Es handelt sich hierbei um vorgefertige Codeanweisung der im Adminbereich den Seiten plaziert werden kann.
Als erstes sollte für jedes Particle in den Base Outlines eine Voreinstellung (Particle Defaults) vorgenommen werden.

Diese werden sofort in die jeweiligen THEME OUTLINES übernommen werden dort nicht am Zeilenende des Elements ein Häckchen gesetzt ist.


Anmerkung:
Für das Aussehen/ Darstellung besteht in dem meisten Fällen die Möglichkeit Verweis auf eine CSS-ID, CSS-Klasse oder Variations (Auswahlliste)
Verweis auf die eigene SCSS Datei in:  templates/[THEME_DIR]/custom/scss/custom.scss
CSS ID -> z.B. #meinestyle{background-color:yellow;}
CSS Class -> .meinestyle{background-color:yellow;}
Variations:(lassen sich kombinieren)
  Färbung:  Box 1, Box 2, Box 3, Box 4
  Schattierung: Shadow 1 (erhaben), Shadow 2 (Kante)
  Gleiche Höhe: Equal Height
  Gegraut: Disabeld
  Ausrichtung: Align Right (rechtsbündig), Align Left /linksbündig), Center (zentriert), Full with (gleiche Breite wie Element. Nur bei einem Item sinnvoll)
  No margin: (Aussenabstand)
  No Padding: (Innenabstand)

  Mögliches Darstellung auf der Homepage  Particle - Layout  Particle Defaults
   

Hier wird das jeweilige Partikel individuell angepasst. Sofern nicht die Voreinstellung verwendet werden soll. Für eine Anpassung muss am Zeilenende ein Häckchen gesetzt werden.
particle defaults        
In den Voreinstellung der Particle wird alles voreingestellt und muss somit micht in den einzelnen Particles angepasst werden. Hier können auch die einzelnen Particle deaktiviert werden.
Inhalt aus Joomla Beiträgen einfügen
     
Haupteinträge aus den Beiträgen
particel page content
Alle Beiträge welchen den Haupteinträgen zugewiesen wurden anzeigen
Darstellung (Variations) :
     particle defaults page content

particel joomla artikel

Register Artikel (Articles)
Einen oder mehrere Beiträge aus Joomla anzeigen.
Auswahlmöglichkeiten:
Kategorie (Categories): Alle Artikel einer Kategorie
Beiträge (Articles): Artikel kommagetrennt druch ihre ID ausgewählt
(Featured Articles): ?
Anzahl der Artikel die angezeigt werden (Number of Articles): x
Nächster / Voriger Artikel Button (pagination): anzeigen (show) / verbergen (HIde)
Anzahl Spaten (Number of colums): x
Artikel-Liste beginnend ab (Start From): 0 (ab ersten Artikel)
Sortierung (Oder By):
Sortierung auf- absteigend (ordering Direction): A-Z(Ascending) / Z-A

Amerkung:
Gantry 5 übernimmt KEINE Einstellung aus Joomla
(System > Konfiguration > Beiträge)
Alles muss in den Register Darstellung (Display), Read More und Extra eingestellt werden

    particle defaults joomla article
       
particel module instance
Inhalt eines Joomla-Moduls anzeigen
   
Gantry 5 Inhalte      

Theme: Hydrogen
Text ohne auf den Inhalt des CMS zurückzugreifen
particel sample content

Bild (Image): (optional)
Überschrift [Headline]:
Beschreibung [description]: (HTML-Text)
Link & Link Text

Unterpunkte [Sample Items]
Icon: (FontAwesome)
Untertitel [Sub Tile]: (leer)
Beschreibung [Description]: (siehe ->)
CSS ID: (Verweis auf customs.scss möglich)
Variationen:

 
Theme: Helium
Text ohne auf das CMS zurückzugreifen
particel customhtml
Text kann im HTML-Format eingeben werden.

Custom HTML: (Es können die Styleanweisungen der nucleus.css verwendet werden.)
Register Block:
CSS ID, CSS Klassen aus

/media/gantry5/engines/nucleus/css-compiled/nucleus.css

 Anmerkung:
Der Sample Content kann auch durch einen Joomla Article ersetzt werden. Hierzu können ebenfalls die Styleanweisungen verwendet werden.
Im JCE Editor kann einen Verweis auf die CSS gesetzt werden.
Menü Komoponenten > JCE Administrator > Global configuration
Editorstil: Eigene CSS-Datei
Eigene CSS-Datei: media/gantry5/engines/nucleus/css-compiled/nucleus.css

     
Theme: Helium
Würfel mit Inhalt
particel h content cubes

Link mit Bild (zoom out) links oder rechts.
   
Theme: Helium
Tabs mit Inhalt
particel h content tabs

     

Theme: Helium
Bilder Karusell 
particel h owl carousel

Das Owl Carousel in die Header Sektion ablegen
Header
Layout: Fullwidth (Flushed Content) Bildschirmfüllend
CSS Classes: g-flushed

Owl Carousel
Image Overlay: Disabled (Acent Farbverlauf aus)

     
Erweitertes Bilderkarusell
particel h owl carousel neo
Mit deutlich mehr Einstellungsmöglichkeiten von Thex auf Github.
Mit Stand 14.09.2020 muss in den ZIps der Ordner gantry in particles umbenannt werden damit die Installation korrekt ausgeführt wird.
     
particel logo image
URL: ohne Eiintrag wird auf die Startseite verwiesen
Link: Mit Häckchen aktiv
Image: Link zum Bild
Maximum Height: Höhenbegrenzung (hat keine Auswirkung auf das Bild in SVG Code)
Text: Mouse-Hover Text
     
   

 
Menü
particel menu

     
Menü für das Handy (kleine Bildschirme)
particel mobile menu
   
System Meldungen
particel system message
   
Abstandhalter
particel spacer
  Frontpage

Backend
particel module position

Erklärvideo:
   
Nach oben springen
particel totop
   
particel copyright
Start Year: Hier das Startjahr eingetragen
   
Soziale Netzwerke
particel social
Es können die Bildchen aus dem Font FontAwesome ausgwählt werden und ein Link
   
Markenzeichen
particel branding
     
Datum
particel date
   

 

Image Folder anpassen
Gantry 5 verwendet einen igenen Bilder-Ordner

 

Formatierung via CSS

Hier in diesem Tutorual wird als Basis das Helium Theme verwendet.

Die Erklärung wird am BSP. des Outlines Standard beschrieben und gilt für beide Themes

 

Menü

 


Seitenmenü für Handy's (Offcanvas Section)

Eine elegante Methode ist es für die Darstellung auf Handy's ein Menü speziell für keine Bildschirme anzubieten.

1.) Register Styles -> Bereich (Section Styles) -> Offcanvas Styles

* Hintergrund (Background) ->Hintergrund-Farbe des Menübereichs
* Text  -> Schriftfarbe des Menübereichs
* Toggle Color -> Farbe des Menü-Schaltbuttons
* Toggle Visibility -> Sichbarkeit des Menü-Schaltbuttons
   - Mobile Menu (nur sichtbar auf den Handy)
   - Always (immer sichtbar. Hat aber keine Funktion am PC)
* Panel Width -> Darstellungsbreite auf dem Bildschirm am besten in % z.B. 75%

2.) Register Layout -> Offcanvas Section -> Offcanvas Settings (grauer Bereich, nicht im blauen Mobile-Menu)
* Position 
  - links bzw. rechts

* Swipe Gesture ja (per Wischen das Menü ein/ausblenden)


Error (Seite anpassen)

Um die 404 Info sinnvoll zu erweitern kann dem Besucher die Möglichkeit geben dem Webmaster eine Info-Email zuzusenden. Zusatzlich durch das Javascript kann die URL in die Email eingefügt werden. Es wird eine HTML-Text mit Email und Span-Tag mit ID "email404" eingefügt. Via Javascript wird dann in den Email-Link noch die fehlerhafte URL eingefügt (Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! muss natürlich angepasst werden).

0) Joomla Menü -> Komponenten -> Gantry 5Themes -> Default Theme -> Error (Element) aus Dropdownliste auswählen

1.) Register Styles -> Bereich (Section Styles) -> Header Styles

* Background Image (ggf. eigenes Bild auswählen)

 2.) Register Layout -> Header
Angezeigter HEADER-Text
* Particel "Custom HTML einsetzen"
* Particel Einstellungen
  - Custom HTML:

 <h2 class="g-title">Ups, das sollte nicht passieren.</h2><p>Ein Link ist wohl nicht mehr aktuell.<br />Damit der fehlerhafte Link gemeldet werden kann bitte eine Info-Email an: <span id="email404"><a href='mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!?subject=Info%20zur%20fehlerhaften%20URL&body=Hallo%20Webadmin,%0Des%20ist%20ein%20404%20Fehler%20aufgetreten%0D%28URL%20Einfach%20oben%20die%20Adresse%20kopieren%20und%20hier%20einfuegen%29%0DDanke'>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!</a></span></p>

 3.) Register Layout -> Page Settings ->Atoms
* Custom CSS / JS einfügen und einstellungen oeffnen Editieren aufrufen
* Javascript Item adden (hinzufügen)
  document.getElementById("email404").innerHTML = "<a href='mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!?subject=Info%20zur%20fehlerhaften%20URL&body=Hallo%20Webadmin,%0Des%20ist%20ein%20404%20Fehler%20aufgetreten%0DURL%3A%20" + window.location + "%0DGgf.%20weitere%20Info%3A%0D%0DDanke'>Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!</a>"

 


Update

Gantry 5 bietet durch die Installation auch eine Aktualisierung des Frameworks.
In den regulären Updatehinweisen wird es angezeigt.

Wichtig: Wenn es duch den Hoster kein Backup der Datenbank und Webseiten gibt sollte vor der Aktualisierung der Gantry Template-Ordner gesichtert werden.