header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Templates für CMSimple_XH von
KRL Software-Development
private, nicht kommerzielle Website
by Karl Richard Lembach
Sie sind hier: Startseite > Template krl-3col-flex
Letzte Bearbeitung:

krl-3col-flex - Template für CMSimple_XH

Hinweis: Dieses Template wird ohne jegliche Zusicherung einer Eigenschaft oder der Gebrauchstauglichkeit überlassen. Die Verwendung erfolgt ausschließlich auf eigene Gefahr. Es gibt keinerlei Gewährleistung irgendeiner Art. Für Schäden, die durch die Verwendung des Templates entstehen, lehne ich jegliche Haftung ab!
Dieses Template ist frei zur kostenlosen Verwendung und Modifikation (Ab Version 3.0 unter GNU GPLv3). Lediglich der Link in der 2. Footerzeile darf nicht entfernt werden:
Template Infos | Powered by CMSimple_XH

Dieses Template hat komplexe Einstellmöglichkeiten und eine große Wandlungsfähigkeit. Diese Wandlungsfähigkeit bezieht sich sowohl auf das gesamte Web als auch auf einzelne Seiten! Zusätzlich bringt es eine Reihe interessanter vordefinierter Formate mit.

Sie sehen es auf dieser Seite in Aktion.

Es basiert ursprünglich auf dem Template fhs-basic von Frank Seidel und ist eine Nachfolgeentwicklung meiner ersten Template-Weiterentwicklung fhs-basic-all.

Das Template krl-3col-flex ist für CMSimple_XH 1.7.x geschrieben.

Es ist mit dem alten Internet Explorer (weniger als 1,5% Marktanteil) nicht kompatibel, mit Edge gibt es keine Probleme.

Allgemeine Beschreibung

Ab Version 3.0 unter dieser Lizenz:
GNU GPLv3 - https://www.gnu.org/licenses/gpl-3.0

Es handelt sich um ein klassisches 3 oder 2-spaltiges responsives Template mit vielen Möglichkeiten durch Parameter das Verhalten, das Aussehen und die Farbgebung zu beeinflussen.

Da die Einstellungen alle über Parameter festgelegt werden, die in einer Web-Oberfläche eingestellt werden, ist zum Ändern der Parameter keinerlei Eingriff in den Code / die Dateien des Templates notwendig.
Dadurch ist das Template äußerst wandlungsfähig. Man könnte sagen: Es ist ein Chamäleon.
Die festen Layoutgrundlagen sind die Anordnung folgender Elemente:

  1. Ganz oben der Header-Bereich mit Hintergrundbild(ershow), dem Webseiten-Logo links und Motto-Spruch rechts.
    Dafür gibt es vier Varianten. Als fünfte Variante kann dieser Bereich abgeschaltet werden.
  2. Darunter wird dieser Bereich von einer Navigations- und Aktionszeile eingefasst.
  3. Der Hauptteil besteht links aus dem Menü, das sich für Unterpunkte aufklappt.
  4. Der eigentliche Content-Bereich befindet sich in der mittleren Spalte.
  5. Und rechts gibt es eine optionale dritte Spalte für bis zu vier News / Begleitartikel zum Hauptcontent.
  6. Nach unten abgeschlossen wird die Seite durch einen Footer-Bereich mit den üblichen Links.

Grundlegende Einstellungen in der Konfiguration des Templates

  • Der Header-Bereich kann detailliert eingerichtet werden.
  • Das/die Bilder für die Hintergrundbildershow kann ausgewählt werden, ebenso das Logo auf der linken Seite.
  • Auf der rechten Seite kann ein Mottotext definiert werden.
  • Beide, Logo und Motto-Text werden mit einer mehr oder weniger transparenten Farbhinterlegung versehen.
  • Die Farben des Textes und der Farbhinterlegung und der Transparenzgrad der Farbhinterlegung können eingestellt werden.
  • Auch der Eckradius der Farbhinterlegung läßt sich verändern.
  • Die Farbe für horizontale Elemente des Templates und die Farben des Menüs können in Grenzen frei gewählt werden.
  • Für die Breite der einzelnen Spalten gibt es fünf voreingestellte Verteilungen, die ausgewählt werden können.
  • Die Schriftgröße für die gesamte Website und den Footerbereich kann eingestellt werden (relativ zur Browser-Voreinstellung).
  • Bestimmte Inhalte des Footerbereichs können den individuellen Wünschen angepasst werden.

Ab Version 3.2 (Anfang März 2024):

  • Alle Farbdefinitionen des Templat sind in einer Datei zusammengefasst. Die dort hinterlegten Einstellungen können jetzt alle in der Web-Oberfläche eingestellt werden.
  • Sämtliche Texte des Backends sind in einer Sprachdatei hinterlegt. Um diese Texte in eine andere (noch nicht beiliegende Übersetzung) Sprache zu übertragen, für Benutzer mit einer anderen Muttersprache als Deutsch / Englisch, gibt es eine Web-Oberfläche um die Übersetzung durchzuführen. Es ist also keinerlei Manipulation an Dateien notwendig.

Einige der besonderen Eigenschaften

Die folgenden Möglichkeiten beziehen sich auf das gesamte Web, das mit dem Template angezeigt wird.

  1. Sämtliche Voreinstellungen für die Farbe sind in einer einzigen Datei zusammengefasst. Daher ist eine farbliche Neugestaltung besonders einfach. Dafür ist allerdings die Bearbeitung der Datei colordefinition.css notwendig.
    EDIT: Ab Version 3.2 gibt es dafür eine Web-Oberfläche! Keine Datei-Bearbeitung mehr notwendig!
    Die Hauptfarbe (Akzentfarbe) und die Hintergrundfarben des Menüs können in der Konfigurationsoberfläche eingestellt werden ohne von Hand eine Datei editieren zu müssen.

  2. Es gibt vier unterschiedlich gestaltete Header-Bereiche, zwischen denen in der Konfigurationsoberfläche umgeschaltet werden kann. Diese vier Varianten können durch Auswahl der Bilder, des Motto-Textes und der farblichen Gestaltung individuell abgewandelt werden.
    Zusätzlich gibt es die Möglichkeit den Headerbereich ganz abzuschalten.

  3. Die obligatorischen Links im Footerbereich lassen sich ohne Codeeingriff an die eigene Seitenstruktur anpassen. Bis zu fünf weitere eigenen Websites lassen sich verlinken. Optional können Links zum Hoster (als Anerkennung/Dank oder Provisionslink) und zu einem evtl. vorhandenem Sponsor angegeben werden. Einen Link zum w3c-css-Validierungsdienst kann man einblenden.

  4. Für benutzerdefinierte Stylesheets gibt es eine eigene Datei. Hier durch editieren der Datei eingegebene neue Formatierungen überschreiben nicht die Formate des Templates. Das Template-eigene Stylesheet bleibt unangetastet. Geht etwas bei den benutzerdefinierten Formaten gründlich schief, muss man lediglich die Datei per FTP umbenennen und das Template läuft wieder störungsfrei.

  5. Für Änderungen am Template-Stylesheet gibt es eine eigene Datei, die nach der Template-eigenen Stylesheet-Datei eingelesen wird. Dadurch werden zwar (wie gewünscht) die ursprünglichen Formate modifiziert, jedoch ohne das dadurch die Template-Stylesheet-Datei verändert wird.
    So kommt man mit einer Datei-Umbenennung zum originalen Stylesheet zurück, wenn mal was richtig schiefgegangen ist.

  6. Die Definition der Favicons erfolgt in einer eigenen Datei.
    Bei einem Update des Templates muss daher diese Definition nicht erneut vorgenommen werden.

  7. Die Font-Größe kann durch den Benutzer "on the fly" vergrößert und verkleinert werden.

  8. Das Template ist voll tauglich für die Verwendung mit einer zweiten oder dritten / weiteren Sprache. Es hat eigene Sprachdateien.
    Sobald die Website eine Sprache anfordert, für die es bisher noch keine Datei gibt, erstellt das Template automatisch eine neue Sprachdatei, die mit dem Inhalt der englischen (ersatzweise deutschen) Sprachdatei gefüllt wird. Dadurch wird sichergestellt, dass immer eine lesbare Ausgabe erfolgt. Diese neue Datei muss dann nur noch Übersetzt werden.
    Ab Version 3.2 gibt es für die Übersetzung in eine neue Sprache eine Web-Oberfläche im Bachend des Templates.

  9. Das Template ist fertig eingerichtet für die Zusammenarbeit mit dem Plugin Memberpages_XH.
    Ist das Plugin installiert, kann festgelegt werden auf welchen Seiten das Anmeldeformular angezeigt wird.

  10. Das Template ist fertig eingerichtet für die Zusammenarbeit mit dem Plugin Register_XH.
    Ist das Plugin installiert, kann festgelegt werden auf welchen Seiten das Anmeldeformular angezeigt wird.

  11. Das Template ist fertig eingerichtet für die Zusammenarbeit mit dem Plugin Privacy_XH.
    Ist das Plugin installiert, kann festgelegt werden auf welchen Seiten das Cookie-Formular angezeigt wird. Ohne Änderungen am Template können Funktionen / Scripte in Abhängigkeit von der Zustimmung zu Cookies geladen werden (siehe unten). Texte im Content können (mit Hilfe vorbereiteter CSS-Formate) explizit dann angezeigt werden, wenn die Zustimmung zu Cookies noch nicht erteilt wurde oder nur wenn die Zustimmung erteilt wurde.

  12. Das Template ist fertig eingerichtet für die Zusammenarbeit mit dem Plugin WDir_XH.
    Die vorbereiteten Style-Anpassungen gewähren eine nahtlose optische integration auch auf den Seiten, auf denen individuell eingestellte Akzent und Menüfarben aktiv sind.

  13. Das Template ist fertig eingerichtet für die Zusammenarbeit mit dem Plugin Advancedform_XH.
    Die vorbereiteten Style-Anpassungen gewähren eine nahtlose optische integration auch auf den Seiten, auf denen individuell eingestellte Akzent und Menüfarben aktiv sind.

  14. Das Template ist fertig eingerichtet für die Zusammenarbeit mit dem Plugin Crazystat_XH. Ist das Plugin installiert, wird der Zähler automatisch angezeigt.
    Das Plugin Crazystat_XH muss dazu allerdings richtig eingerichtet worden sein.
    Zur Zeit ist keine offizielle Version verfügbar, die mit PHP 8.+ einwandfrei arbeitet. Sorry, das Plugin ist nicht von mir, der Autor ist verstorben.

  15. Die Fähigkeit moderner Browser zur eigenständigen Silbentrennung kann Seiten-übergreifend, für einzelne Seiten oder für einzelne Textabschnitte aktiviert werden.

  16. Das Template kann für jede Seite einzeln von 3 auf 2 Spalten umgeschaltet werden.
    Im Editiermodus ist das Template immer 3-spaltig, unabhängig davon, wie die Einstellungen für das Frontend sind.
    Dadurch überdeckt das FHS-Adminmenu_XH (wenn installiert und bei entsprechender Einstellung) mit seiner Seitenleiste nicht das Editorfenster.
    Außerdem ist so immer Platz für die Ausgabe des Hilfetextes zur Konfiguration des Templates und zur Anzeige der Notiz-Box.

  17. Um abhängig vom Zulassen von Cookies (dies ist nur bei installiertem Plugin Privacy_XH möglich) Scripte / Plugins im Bereich zwischen <head> und </head> einzubinden werden diese in einer eigenen Datei eingetragen, ohne die Template-Datei zu verändern.

  18. Um abhängig vom Zulassen von Cookies (dies ist nur bei installiertem Plugin Privacy_XH möglich) Scripte / Plugins im Bereich unterhalb dem Content und des Footers, unmittelbar vor dem Ende der Seite einzubinden, werden diese in einer eigenen Datei eingetragen, ohne die Template-Datei zu verändern.

  19. Die Default-Maincolor (Akzentfarbe des Templates), die Transparenz für den Farbverlauf des Seitenhintergrundes und die Default-Menü-Hintergrundfarben können in der Konfigurations-Maske aus dem Editiermodus heraus eingestellt werden. (Default bedeutet hier: Für alle Seiten mit diesem Template, für die noch keine Individualeinstellung vorgenommen wurde).

Alle die folgenden Möglichkeiten können für jede Seite einzeln festgelegt werden.

  1. Die dritte Spalte kann gezielt abgeschaltet werden.
    Der Content dehnt sich dann von der zweiten auf die dritte Spalte aus. Evtl. definierte Newsboxen wandern unter den Contentbereich (normalerweise werden sie in der dritten Spalte angezeigt).

  2. Hat eine Webseite Unterseiten, gibt es ein zusätzliches Submenü. Dieses wird standardmäßig unter dem Content angezeigt.
    Es kann jedoch auf Wunsch auch in die dritte Spalte oben verschoben werden.

  3. In der dritten Spalte werden standardmäßig bis zu vier Newsboxen angezeigt, wenn sie definiert sind. Zur Anzeige können versteckte Seiten ausgewählt werden. Werden keine Newsboxen definiert, dehnt sich der Content automatisch von der zweiten auf die dritte Spalte aus.

  4. Der Ordner mit den Bildern der Slideshow /das Bild für das Shiftimage im Hintergrund des Headers kann für jede Seite einzeln ausgewählt werden. Die Slideshow kann ausgeblendet werden.

  5. Das Bild für das Logo kann für jede Seite separat definiert werden.
    Dieses Bild muß sich dazu im Ordner images des Templates befinden.

  6. Das Site-Logo und der Motto-Text im Header können zusammen ausgeblendet werden.

  7. Der Motto-Text im Header kann separat ausgeblendet werden.

  8. Die Akzentfarbe (horizontale Gestaltungselemente) kann in Grenzen frei gewählt werden.

  9. Das Farb-Thema des Menüs kann in Grenzen frei gewählt werden.

  10. Das Farb-Thema des Menüs kann automatisch an die Akzentfarbe der Seite angepasst werden.

  11. Die Fähigkeit moderner Browser zur eigenständigen Silbentrennung kann seitenweise aktiviert werden.

  12. Im Editiermodus kann in der dritten Spalte oberhalb der beiden Newsboxen eine zusätzliche Notizbox angezeigt werden. Dazu wird eine weitere versteckte Seite ausgewählt. Um den Inhalt dieser Notizbox zu bearbeiten, muss die versteckte Seite im Editorfenster bearbeitet werden.

  13. Bei aktiver Template-Konfiguration wird in der rechten (3.) Spalte ganz oben ein kurzer Hilfetext in Form einer weiteren Newsbox eingeblendet.

  14. In einer eigenen Datei können bis zu 16 verschiedene CMSimple_XH-fremde Scripte eingetragen werden. Diese können einzeln / mehrere / alle eingebunden werden. Die Einbindung erfolgt unmittelbar vor dem </head> - Tag. Die Steuerung, welche Scripte auf welcher Seite aktiviert werden, erfolgt über eine Bit-Maske, die via Morepagedata festgelegt wird.

Responsives Verhalten

  1. Das Template passt sich automatisch den unterschiedlichen Breiten der Displays (Viewport-Breite) an.

  2. Bei überbreiten Bildschirmen wird die Website auf eine Breite von 1920 Pixel beschränkt und der Rest des Fensters mit einem Farbverlaufs-Hintergrund zur Akzentfarbe passend hinterlegt.

  3. Die Breite des Menüs (linke Spalte), des Contents (mittlere Spalte) und der Newsboxen (rechte Spalte) sowie des Webseitenlogos und des Motto-Textes werden bei kleiner werdendem Fenster dynamisch nachgeregelt.

  4. Bei Screens/Fenstern mit 1024 oder weniger Pixel Breite erscheint das Template mit 2 Spalten. Die Newsboxen werden unter dem Content ausgegeben.

  5. Bei Screens/Fenstern mit weniger als 770 Pixel Breite schaltet das Template auf "Burger" Navigation um. Das Layout hat dann nur noch eine Spalte und das Menü wird wahlweise oberhalb des Contents angezeigt (Toggle-Funktion des "Burger" Icons [≡] [X] in der Navigationszeile).

  6. Unter eine Displaygröße von 680 Pixel Breite wird die Schriftgröße auf 90% reduziert und die Newsboxen werden untereinander angezeigt.

  7. Bei weniger als 480 Pixel Breite des Viewports wird die Schriftgröße auf 85% reduziert und verzichtbare Elemente ausgeblendet.

Umfangreiche Formatvorlagen im Editierfenster

Für die Verwendung im Editor sind über 45 Formate definiert. Eine detailierte Beschreibung befindet sich auf den Unterseiten der Beschreibung der stylesheet.css.

Vorbereitet für die sofortige Zusammenarbeit mit folgenden Plugins:

  1. Advancedform_XH
  2. CrazyStat_XH
  3. Memberpages_XH
  4. Privacy_XH
  5. Register_XH
  6. WDir_XH

Einstellmöglichkeiten im Backend des Templates

Im Editiermodus wird oberhalb des eigentlichen Editorfensters eine Schaltfläche zum Aktivieren des Template-Backends ausgegeben. Durch Anklicken schaltet sie auf eine geschlossene Dropdown-Auswahlliste mit folgenden Punkten:

  • - keine Aktion -
    | Das Template-Backend ist stand by

  • Versions-Check
    | Es wird die installierte Version und die letzte veröffentlichte Version angezeigt. Ein Update/Upgrade kann nicht automatisch erfolgen. Dazu ist händisches Eingreifen erforderlich.
     
  • Schaltereinstellungen
    | Ein-/Ausschaltung der seitenübergreifenden Silbentrennung
    Auswahl der Headergestaltung
     
  • Links im Footer festlegen
    | Obligatorische und optionale Links definieren (Link, Anzeigetext und Title-Text)
     
  • Spaltenbreite und Zeichengröße einstellen
    | Auswahl aus 5 Voreinstellungen der Spaltenbreite
    Einstellen der Fontgröße, getrennt für die eigentliche Website und den Footerbereich
     
  • Default - Maincolor - Akzentfarbe
    | Auswahl der Haupt-Akzentfarbe und des Transparenzgrades des Seitenhintergrundes bei "Breitwand-Monitoren"
     
  • Default-Menü-Hover-Hintergrundfarbe
    | Auswahl der Hintergrundfarbe des gehooverten Menüpunktes. Nichtaktive Menüpunkte sind etwas dunkler und aktive Menüpunkte noch etwas dunkler
     
  • Alle anderen Template-Farben (außer Main- & Menüfarben) einstellen [ab Version 3.2]
    | Über 90 Farben und Transparenzgrade können eingestellt werden. Davon ist der weitaus größte Teil im Frontend der Webseite sichtbar
     
  • Header mit Logo & Mottotext vor Hintergrundshiftimage
    | Auswahl des Bildes und seiner Schiebegeschwindigkeit, Auswahl des Logos, der Schriftfarbe des Mottos, Eingabe des Mottotextes und Auswahl der Hintergrundfarbe/ Transparenzgrag für Logo und Motto, Eckradius der Farbhinterlegung
     
  • Header mit Logo & Mottotext vor CSS-Crossfadeshow
    | Auswahl des Ordners mit den Bildern der Diashow, Einstellen der Anzeigedauer, der Überblenddauer, des Logos, der Schriftfarbe des Mottos, Mottotext und Hintergrund von Motto und Logo und Eckradius der Farbhinterlegung
     
  • Header mit Logo & Mottotext vor Slideshow im Hintergrund
    | Wie vor. Hier wird die Diashow jedoch mit dem Plugin Slideshow und dessen zusätzlichen Einstellmöglichkeiten erzeugt
     
  • Header mit Logo & Mottotext oben, darunter eine Slideshow
    | Wie vor. Hier wird jedoch Logo und Motto oberhalb der Diashow ausgegeben
     
  • Alle Texte des Templates in eine andere Sprache übersetzen [ab Version 3.2]
    | Auswahl der Zielsprache und Eingabe der übersetzten Texte. Die deutschen Original-Texte werden parallel angezeigt

Einstellmöglichkeiten im Editorfenster (gelten nur für diese spezielle Seite)

  • Logo und Mottotext ausblenden
  • nur den Mottotext ausblenden
  • Bild für alternatives Seitenlogo
  • Template-Haupt-Farbe
  • Menü-Hover-Hintergrundfarbe
  • keine Slideshow anzeigen
  • Bilderordner für Slideshow oder Crossfading (alternativ zu den anderen Seiten)
  • Shiftimage (alternativ zu den anderen Seiten)
  • 2-Spalten Layout
  • Submenu in rechter Spalte anzeigen
  • Auswahl Snipets-Box (wird nur im Editormodus angezeigt)
  • Auswahl Newsbos 1 - 4
  • Silbentrennung für diese Seite
  • Cookie-Formular anzeigen
  • Mitglieder-Anmeldung anzeigen
  • Position der Register-Anmeldung anzeigen
  • Bit-Maske zum Scriptimport

Mehrsprachentauglichkeit

Das Template verwendet nicht nur in der Konfiguration (Backend), sondern auch in der Besucheransicht ( Frontend) eigene Texte. Diese Texte sind nicht im Text-Array des CMS enthalten. Daher hat das Template eigene Sprachdateien und auch ein eigenes Management für fehlende Sprachdateien (mehr dazu weiter unten). Die Sprachdateien für Englisch und Französisch sind das Ergebnis des Online-Übersetzungsdienstes DeepL (vielen Dank an DeepL)!
Da ich selbst in Sachen Fremdsprachen nur sehr eingeschränkte Kenntnisse habe, kann ich für die Qualität der Übersetzung keine Gewähr übernehmen.

Ich bitte jeden, der sich in der Lage sieht, Übersetzungen in Muttersprachen-Qualität zu liefern, mir diese zuzuschicken, damit ich ein entsprechendes Update veröffentlichen kann. Ab Version 3.2 ist das notwendige Werkzeug dafür im Backend des Templates enthalten!

Fremdsprachenmenagement

Das Template liest (als Fallback) zuerst einmal die deutsche Sprachdatei ein. Dann wird (falls vorhanden) die Sprachdatei der aktuell aktiven Sprache eingelesen. Dadurch wird erreicht, dass auch bei einer unvollständigen Übersetzung (fehlende Einträge in der Datei) für jede Textstelle ein Text ausgegeben wird (der dann in Deutsch ist). Wenn eine Sprachdatei fehlt, wird die Datei für die englische Sprache unter dem Kürzel der aktiven Sprache kopiert. Diese neue Datei muss dann von Hand übersetzt werden. Ab Version 3.2 ist im Backend eine Translator-GUI vorhanden. Dann ist keine Manipulation von Dateien notwendig.


| Seitenanfang |