JoomION Template & Framework

Dokumentation · layout-getriebenes Joomla-Template tpl_joomion + Framework-Builder (plg_system_joomionframework) · kompatibel mit Joomla 5 und 6

1. Überblick & Funktionsweise

tpl_joomion ist ein layout-getriebenes Joomla-Template. Anders als klassische Templates ist die Seitenstruktur nicht fest im Code verdrahtet, sondern wird vollständig aus Zeilen und Spalten erzeugt, die du im Framework-Builder zusammenstellst.

So entsteht eine Seite:

1. Im Framework-Builder ordnest du per Drag & Drop Zeilen, Spalten und Modul-Positionen an.
2. Das Layout wird als JSON im Parameter joomion_layout des aktiven Template-Stils gespeichert; Modul-Positionen zusätzlich in der Joomla-Tabelle #__modules.
3. index.php liest dieses Layout und baut daraus die Seite – Zeile für Zeile. Fehlt ein Layout, greift ein vollständiges Standard-Layout als Sicherheitsnetz.
4. Das Aussehen (Farben, Schriften, Logo, Hintergründe) stammt aus den Template-Optionen und wird als CSS-Variablen in den Seitenkopf geschrieben.

2. Installation & Aktivierung

Das Paket `pkg_joomiontemplate` installiert in einem Schritt das Template tpl_joomion (Site-Client) und das System-Plugin plg_system_joomionframework (den Framework-Builder).

1. Unter System → Installieren das Paket pkg_joomiontemplate_vX_Y_Z.zip hochladen.
2. Plugin aktivieren: Das System-Plugin „JoomION Framework" muss aktiviert sein, sonst erscheint der Builder nicht.
3. Template als Standard setzen: Unter System → Templates → Site-Template-Stile den Stil *joomion* als Standard markieren.
4. Zugelassene Benutzer im Plugin festlegen (optional, siehe Abschnitt 8).

3. Modul-Positionen

Das Template stellt 24 Modul-Positionen bereit, die im Builder beliebig in Zeilen/Spalten angeordnet werden:

Die Position brand zeigt automatisch das Logo, wenn dort kein eigenes Modul liegt. mainnav/nav erhalten automatisch den Burger-Button für die mobile Navigation.

4. Der Framework-Builder

Der Framework-Builder ist ein visueller Layout-Editor, der direkt im Frontend läuft. Er wird vom System-Plugin bereitgestellt und als Overlay über die Seite gelegt.

Builder öffnen

• Als berechtigter Benutzer über die JoomION-Admin-Leiste (Button „⊞ Editor & Layout"), oder
• über den Parameter `?joomion_framework=1` an der Startseiten-URL, oder
• über den Button „Framework Builder öffnen" in den Template-Optionen (Tab *Layout*).
   

Wireframe & Live-Vorschau

• Wireframe – schematische Darstellung aller Zeilen, Spalten und Positionen (ideal zum Strukturieren).
• Live-Vorschau – zeigt die Seite genau so, wie ein Besucher sie sieht (Iframe). Der Bearbeitungsstand wird automatisch zwischengespeichert, ohne die echte Seite zu verändern.

Zeilen & Spalten

• + Zeile fügt eine neue Layout-Zeile hinzu.
• Spalten ändern wählt pro Zeile die Aufteilung im 12er-Raster (z. B. 12, 6/6, 4/4/4, 3/6/3).
• Zeile verschieben ordnet die Reihenfolge per Drag-Handle neu.
• Zeile/Spalte löschen über die Icon-Buttons; jede Zeile lässt sich frei benennen (nur zur Orientierung).

Module platzieren

• Links werden alle Site-Module aufgelistet (mit Suchfeld).
• Module per Drag & Drop in eine Spalte/Position ziehen – oder in den Papierkorb-Bereich, um sie aus dem Layout zu entfernen.
• Neu zugewiesene Module erscheinen sofort in der Live-Vorschau; ein Klick öffnet die Eigenschaften.

Speichern, Zurücksetzen, Beenden

5. Template-Optionen

Die Optionen erreichst du unter System → Templates → Site-Template-Stile → joomion. Sie sind in mehrere Tabs gegliedert: Layout, Logo & Favicon, Farbschemas & Styles, Typografie & Schriften, Kontakt & Social, Off-Canvas-Menü, Hintergrundbilder, Eigenes CSS/JS und Hilfe.

Layout

• Layout-Typ Fluid / Boxed / Vollbild; Container-Breite im Boxed-Modus.
• Header-Höhe, Positions-Abstand, Logo-Höhe.
• Sidebar-Position (Keine/Links/Rechts/Beidseitig) und Sidebar-Breiten (% oder px).
• Sticky-Header (fixiert Kopf + folgende Navigationszeilen), Back-to-Top mit Offset.
  

Logo & Favicon

• Logo aus mitgelieferten Varianten oder eigene Bilddatei; Logo-Alt-Text.
• Seitenname anzeigen neben dem Logo; eigenes Favicon.
  

6. Farbschemas & Styles

Der umfangreichste Tab. Oben steht der Farbschema-Editor mit Live-Vorschau; darunter lassen sich alle Bereiche einzeln feinjustieren. Jedes Farbfeld unterstützt zusätzlich eine Deckkraft (Alpha). Das gesamte Layout dieser Seite wird vom Feld SchemeeditorField erzeugt; Erweiterungen werden additiv dort eingebaut.

Farblich/stilistisch steuerbare Bereiche:

• Grundfarben – Primär, Sekundär, Akzent, Hintergrund, Text, Header, Footer, Link/Link-Hover.
  
• Module (Box) – Hintergrund, Text, Header-Hintergrund/-Text, Rahmen, Effekt (Glow/Schatten mit Farbe & Größe), Header-Trennlinie; plus Modul-Text (Schrift, Padding, Margin). Grundeinstellung des Modul-Hintergrunds (Text und Header) ist transparent – erst ein gesetzter Farbwert füllt die Fläche.
  
• Hauptmenü – Box-Modus, Hintergrund/Text (+ Hover), Schrift, Padding, Abstände, Rahmen (Stil/Breite/Farbe/Radius + Hover), Listenmarker.
• Submenü – eigener Block für das Dropdown der 2. Menüebene (siehe unten).
• Menüleisten-Hintergrund (`mainnav`) – Breite, Innenabstand, Hintergrund, Rahmen, Radius.
• Buttons – Hintergrund/Text (+ Hover), Schrift, Rahmen, Größe, Unterstreichung.
• Footer-Links, Breadcrumbs, Topbar, Off-Canvas-Farben, Überschriften H1–H6, Social-Media-Icons (pro Netzwerk eigene Farbe + Hover).
  

Submenü-Block (Dropdown der 2. Ebene)

Im Block „Menü-Farben – Off-Canvas – Hauptmenü – Submenü – Menüleiste-Hintergrund" steht direkt unter dem Hauptmenü ein eigener Submenü-Block. Damit gestaltest du das aufklappende Untermenü unabhängig vom Hauptmenü. Leere Felder erben automatisch vom Hauptmenü/Header, sodass das Dropdown immer lesbar bleibt.

• Farben: Hintergrund, Hintergrund (Hover), Textfarbe, Text (Hover).
• Innenabstand der Einträge (submenuPadding) – Innenabstand jedes einzelnen Eintrags.
• Abstand zwischen den Einträgen (submenuItemGap) – Zeilenabstand innerhalb des Dropdowns, unabhängig vom Abstand im Hauptmenü.
• Außenabstand des Dropdowns (submenuMargin) – Abstand der ganzen Dropdown-Box zum Hauptmenüpunkt.
• Innenabstand der Dropdown-Box (submenuBoxPadding) – Innenabstand rund um die gesamte Box, getrennt vom Innenabstand der einzelnen Einträge.
• Submenüpunkte (Rahmen je Eintrag): Linienart, Linienstärke, Farbe, Farbe (Hover), Eckenrundung.
• Submenü gesamt (Rahmen ums Dropdown): derselbe Satz Rahmen-Einstellungen für die ganze Dropdown-Box, plus Effekt (Glühen/Schatten) mit Farbe und Größe.
• Schrift (im Tab „Schriftarten", Karte „Submenü"): Familie, Stil, Größe, Unterstreichung.

Farbschemata verwalten

• Live-Vorschau aller Kernfarben; eingebaute Schemata als Startpunkt.
• Eigene Schemata anlegen, benennen, speichern und laden (pro Template-Stil in #__joomion_color_schemes; wird bei der Deinstallation automatisch entfernt).
• Deckkraft (Alpha) je Farbe; Werte werden serverseitig validiert und per Prepared Statements gespeichert.

7. Typografie & Schriften

• Fließtext- und Überschriften-Schrift mit Echtschrift-Vorschau (System + 28 Google Fonts wie Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Oswald, DM Sans, Playfair Display, Lora, JetBrains Mono, Dancing Script u. a.).
• Basis-Schriftgröße (14–20 px) und Zeilenhöhe (1.4–1.8).
• Bereichs-Schriften (Familie/Stil/Größe/Unterstreichung) für: Modul-Text, Modul-Header, Hauptmenü, Submenü, Header, Buttons, Footer, Off-Canvas, Topbar.
• Überschriften H1–H6 je Ebene: Schriftart, Größe, Stil und Unterstreichung.
• Schriftstil je Bereich: Standard, Fett, Kursiv, Fett & Kursiv (kombiniert) sowie – je nach Bereich – Unterstrichen.
• Schriftart-Auswahlfelder zeigen jede Schrift in ihrer eigenen Schriftart an (Live-Vorschau direkt im Dropdown), inklusive der aktuell gewählten Schrift in der geschlossenen Anzeige.
  

Vererbung „Wie Fließtext" / „Wie Überschrift"

Steht die Schriftart eines Bereichs auf „Wie Fließtext" bzw. „Wie Überschrift", übernimmt der Bereich automatisch die oben gewählte Grundschrift:

• Modul-Header, Header-Titel und Überschriften H1–H6 folgen der Schrift (Überschriften).
• Alle anderen Bereiche (Modul-Text, Hauptmenü, Submenü, Buttons, Header-Fließtext, Footer, Topbar, Off-Canvas) folgen der Schrift (Fließtext).
• Wird in einem Bereich eine eigene, konkrete Schriftart gewählt (nicht „Wie Fließtext"/„Wie Überschrift"), hat diese explizite Einstellung Vorrang und wird nicht mehr überschrieben.

Zwei unabhängige Unterstreichen-Schalter

In den Bereichen Modul-Text, Modul-Header, Hauptmenü, Submenü, Header und Buttons stehen zwei getrennte Schalter zur Verfügung:

• „Unterstrichen" – unterstreicht ausschließlich Links in diesem Bereich.
• „Ganzen Text unterstreichen" – unterstreicht den gesamten Text dieses Bereichs, nicht nur Links.

Die Einstellungs-Karten ordnen sich responsiv an; ihre Vorschau-Boxen stehen innerhalb einer Karten-Reihe stets bündig am unteren Rand, unabhängig von der Feldanzahl je Karte. Jede Schriftfarben-Vorschau passt außerdem ihren eigenen Hintergrund automatisch an die eingestellte Textfarbe an (helle Schrift → dunkler Vorschau-Hintergrund, dunkle Schrift → heller Hintergrund) – unabhängig von allen anderen Vorschauen.

8. Plugin-Backend & Zugriffsrechte

Im System-Plugin „JoomION Framework" steuerst du, wer den Builder nutzen darf:

• Zugelassene Benutzer – Mehrfachauswahl, nach Benutzergruppen gruppiert. Nur ausgewählte Benutzer sehen und nutzen den Builder.
• Rückfall: nur Super-Administrator – greift nur, wenn keine Benutzer ausgewählt sind.
• Zurück zum Template – speichern & wechseln bzw. ohne Speichern wechseln.

9. Weitere Optionen

• Kontakt & Social – Kontaktblock und Social-Leiste, die an beliebigen Modul-Positionen erscheinen (nur befüllte Netzwerke werden angezeigt).
  
• Off-Canvas-Menü – einschiebbares Burger-Panel mit Sichtbarkeit (nur mobil / immer), Seite (links/rechts/oben), Logo/Menü/Kontakt/Social im Panel.
  
• Hintergrundbilder – mehrere Bilder, pro Menüpunkt zuweisbar (Position, Modus, Deckkraft); ein Menüpunkt zeigt durch Exklusiv-Logik genau ein Bild.
  
• Eigenes CSS/JS – eigenes CSS im Seitenkopf, eigenes JavaScript vor </body>.
  
• Hilfe – eingebaute, zweisprachige Anleitung direkt im Backend.
  

10. Sicherheit

• CSRF-Schutz: alle speichernden Aktionen prüfen ein Joomla-Formular-Token.
• Berechtigungsprüfung: jeder AJAX-Aufruf und die Builder-Anzeige laufen durch die Zugriffsregel.
• Style-Besitzprüfung: Speichern/Lesen nur für Stile des joomion-Templates.
• SQL-Injection-/XSS-Schutz: Prepared Statements, escapte Ausgaben, validierte Farbwerte.
• Direktzugriffsschutz: alle PHP-Dateien mit _JEXEC abgesichert.

11. Kompatibilität & Hinweise

• Läuft auf Joomla 5 und 6; moderne API (Service-Provider/DI, SubscriberInterface, typisierte Events, DatabaseAwareTrait), keine veralteten Klassen.
• Cache-Busting: template.css/template.js werden mit ?v=-Parameter geladen, damit Änderungen nach einem Update sofort sichtbar sind (sonst Browser-Cache leeren).
• Versions-Synchronität: Die Anzeige der Version in der Admin-Leiste wird dynamisch aus dem Manifest gelesen; die Template-Version entspricht stets der Paketversion.

12. Lizenz, Updates & Spenden

Freie Software (GPL v2+). Das Paket ist kostenlos und benötigt keinen Lizenzschlüssel. Keine Update-Garantie, kein garantierter Support – Nutzung auf eigene Gefahr. Support-Anfragen gerne an Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein..

Updates kommen ganz normal über den nativen Joomla-Updater (System → Aktualisierungen → Erweiterungen) – ohne Lizenzprüfung.