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 mittlewren Spalte.
  5. Und rechts gibt es eine optionale dritte Spalte für bis zu vier News / Begleitartikel zun 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.

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

  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.

  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

| Seitenanfang | |  - - - By CrazyStat - - -