Struktur und Funktion des Templates

Grundsätzliches Aussehen

Es handelt sich um ein klassisches 3-Spalten-Layout mit einer Hintergrund-Bildershow im Header. Davor/Darüber wird rechts ein Motto-Text und links das Logo der Website angezeigt. Das Layout ist responsiv und passt sich daher den unterschiedlichen Viewport-Breiten selbsttätig an.
Diese Seite wird mit diesem Template angezeigt.
Bei breiten Viewports wird in der linken Spalte das Menü angezeigt, in der mittleren Spalte der Content und in der rechten Spalte Newsboxen.
Die grundlegenden Eigenschaften (Template Basis-Styles, Menü Levels, Unordered Lists) sehen Sie sich bitte auf der Webseite des Templates an, das diesem Abkömmling zu grunde liegt: http://fhseidel.de/cmsxh/fhs-basic/ 
Oder Sie lesen hier die gesamte Beschreibung. Unter der Beschreibung der Datei stylesheet.css werden alle im Editor auswählbaren Formatierungen (fast immer mit Beispiel) beschrieben. Lediglich die letzten 8 Formate im 'Formate'-Drop-Down-Menü nach der "leeren" weißen Zeile (div.body bis fa.pull-right), die auch teilweise nicht in der stylesheet.css stehen, werden nicht beschrieben.

Abb.: Um die Datei zu verkleinern ist das Bild verkleinert und stark komprimiert. Den echten Eindruck erhalten Sie beim Betrachten der Website selbst.

Bei schmäler werdenden Viewports wird zunächst die linke und mittlere Spaltenbreite verringert und dann die Anzeige der Newsboxen unter den Content verlagert. Schließlich wandert auch der Content nach unten unter das Menü. 

Wird die Anzeige der Website auf schmalen Viewports gestartet, erscheint das Menü lediglich als 'Hamburger' () rechts der Suchmaske. Es klappt bei Klick auf das Symbol aus.

Über das Plugin Morepagedata_XH kann man mithilfe des Reiters ­Mehr im Editorfenster folgende Einstellungen für jede einzelne Seite separat vornehmen:

1. Webseiten-Logo und Motto-Text (Text oben rechts im Header) ausblenden.
2. Motto-Text alleine ausblenden, wenn Option 1 deaktiviert ist.
3. Alternatives Logo aus dem Verzeichnis /images im Template-Ordner auswählen
4. Themenfarbe (Akzentfarbe) auswählen: bestimmte horizontale Elemente, der Site-Background, <hr> und die horizontale Linie über dem Footer. Es kann zwar jeder Farbwert eingegeben werden, im Template werden jedoch die Helligkeitswerte der drei Einzelfarben auf #DD begrenzt (automatisch und stillschweigend ohne Rückmeldung, führt im Ergebnis evtl. zu veränderter Farbtemperatur). Damit wird verhindert, dass zwischen Hintergrund und Text (immer weiß) in der Navigationszeile ein zu kleiner Kontrast besteht.
5. Hintergrundfarbe des Menüs auswählen: festgelegt werden kann die Hover-Farbe, die normale Farbe wird berechnet, indem von der Hover-Farbe der Wert #222222 abgezogen wird. Die Farbe des aktiven Menüpunktes wird berechnet, indem von der Hover-Farbe der Wert #444444 abgezogen wird. Da die Schriftfarbe konstant weiß eingestellt ist und ein minimaler Kontrast zur Hintergrundfarbe erforderlich ist, ergibt sich eine notwendige Beschränkung des Wertebereiches für die einzelnen Farben. Der kleinste wirksam werdende Wert jeder Grundfarbe der Hover-Farbe ist #44 und der größte wirksam werdende Wert ist #DD. In der Eingabemaske lassen sich zwar noch kleinere und noch größere Werte festlegen, im Template werden diese jedoch (automatisch und stillschweigend ohne Rückmeldung) korrigiert (was unter Umständen zu anderen Farben führt als ausgewählt).
   Man kann auch eine automatische Farbauswahl aktivieren indem man als Farbwert #--- oder nur --- eingibt. In diesem Fall wird die Hoverfarbe aus der Akzentfarbe berechnet. Die Helligkeitswerte der Einzelfarben der Akzentfarbe werden dabei übernommen und dann, falls ervorderlich, nach unten auf mindestens #44 und nach oben auf höchstens #DD begrenzt.
6. Die Ausgabe der Slideshow kann abgeschaltet werden.
7. Der Ordner für die Slideshow-Bilder kann ausgewählt werden (Unterordner des /userfiles/images/).
8. Für den Shift-Image-Header kann eine alternative Bild-Datei ausgewählt werden.
9. Die dritte Spalte rechts kann abgeschaltet werden, wodurch deren Inhalt nach Unten unter den Content wandert. Im Editormodus wird jedoch immer die dritte Spalte angezeigt, auch wenn sie leer ist.
10. Hat eine Seite Unterseiten, wird ein Submenü unter dem Content angezeigt. Der Anzeigeort kann in die dritte (rechte) Spalte über den Newsboxen umgeschaltet werden.
11. Es kann eine versteckte Seite ausgewählt werden, die nur im Editiermodus oben in der rechten Spalte angezeigt wird. Dies ist gedacht als Kopiervorlage und/oder Gedächtnisstütze für den Autor der Artikel. So können wiederkehrende Textbausteine ebenso wie HTML-Konstrukte für das Einfügen in den Content bereitgehalten werden. Der Inhalt dieser Seite/n kann wie jede andere Seite online editiert werden.
12. Für den Inhalt der bis zu vier News-Boxen in der rechten Spalte / unter dem Content lassen sich unabhängig versteckte Seiten auswählen, können also zum Kontext der jeweiligen Seite passend eingestellt werden. Ihre Ausgabe erfolgt nur, wenn eine Auswahl festgelegt ist. Werden keine News-Boxen definiert und ist auch kein Submenü über den Newsboxen anzuzeigen, wandelt sich das Template zu einem 2-Spalten Design mit Menü und Content-Spalte.
13. Festlegen, ob die Fähigkeit moderner Browser aktiviert werden soll, die Silbentrennung bei Wörtern vorzunehmen.
14. Festlegen, ob das Privacy-Formular zum Akzeptieren oder Ablehnen von Cookies angezeigt wird.
15. Festlegen, ob das Memberpages-Anmeldeformular angezeigt wird.
16. Festlegen ob, und wenn ja, welche Art der Mitglieder-Anmeldung von Register angezeigt wird.
17. Bit-Maske (Folge von 0 oder 1) zur Festlegung, welche externen Scripte eingebunden werden sollen.

Die Header-Bildershow

Für diesen Teil des Seitenheaders sind vier Varianten verfügbar, aus denen ausgewählt werden kann.

Für die Slideshow im Header wird das Plugin Slideshow_XH benötigt.
Die im Paket enthaltenen Bilder stammen von Karl Richard Lembach und werden CC0 weitergegeben.
Eigene Bilder müssen alle exakt die gleichen Maße haben, und zwar 1920 x 300 px (wenn nicht, werden sie auf 1920 px Breite gezoomt, was evtl. das Layout zerstört). Setzt man viele Bilder in der Slideshow ein, ist das schon eine gewaltige Datenmenge, die da übertragen werden muss. Man sollte daher einerseits schauen, inwieweit man diese Bilder komprimieren kann, um andererseits eine noch ausreichende Qualität auf großen Bildschirmen zu erreichen (z. B. IrfanView mit dem RIOT-Plugin). Außerdem ist es je nach Thema sehr schwierig Motive zu finden, die bei diesem Format noch eine Aussagekraft haben oder zumindest gut aussehen. Eine Möglichkeit ist, wie es auf dieser Website und der Hauptsite realisiert wurde, mehrere Bilder nebeneinander zu kopieren und auf die Maße 1920 x 300 px zu verkleinern. Wenn alles andere simple ist – die Motivauswahl ist nicht so einfach. Allerdings wird auch (und das ist besonders bei mobilen Endgeräten interessant) nicht zu viel das Bildschirms von Header-Bildern in anspruch genommen. Und: Man kann die Headerbilder abschalten!

Optionale Plugins

Das Template ist für die Plugins Crazystat_XH, Privacy_XH, Register_XH, WDir_XH und Memberpages_XH vorbereitet.
Die Funktion des Templates ist nicht gestört, wenn das eine oder andere dieser Plugins nicht installiert wird.

Durch Privacy_XH kann auf einzelnen Seiten das Formular zur Abfrage der Zustimmung der User zu Cookies eingeblendet werden. Dadurch können abhängig von dieser Zustimmung Scripte und Funktionen nicht nur (über den richtigen Plugin-Aufruf) im Content, sondern auch außerhalb des Contents eingebunden werden und im Content abhängig von der Zustimmung Textbereiche angezeigt oder ausgeblendet werden.

Ist Memberpages_XH installiert, kann auf einzelnen Seiten unter dem Menü das Anmeldeformular angezeigt werden, gleiches gilt für Register_XH.

Ist Crazystat_XH installiert, wird der Zähler unter dem Content rechts vom Link '« vorige Seite | Seitenanfang | nächste Seite »' angezeigt.

HTML-Codierung der template.htm weitgehend in PHP-Codierung umgewandelt

Damit der Benutzer möglichst schnell erkennen kann welche Bereiche der Template-Datei welche Funktion haben und was bestimmte Funktionen bewirken sollen, habe ich versucht erklärende Kommentare einzufügen. Da jedoch HTML-Kommentare mit der Seite an dem Browser ausgeliefert werden, benötigen sie Datenvolumen und damit auch Ladezeit. PHP-Kommentare werden jedoch vom Web-Server nicht an den Browser ausgeliefert. Das verkleinert die Datenmenge und beschleunigt die Ladezeit (na ja, zumindest ein klein wenig).
Um die Steuerfunktionen in der template.htm besser lesbar zu machen (anfänglich realisiert als in HTML eingebetteter PHP-Code in Kurzschreibweise) habe ich die Codierung der Datei sozusagen auf den Kopf gestellt und soweit es sinnvoll war auf PHP-Code mit eingestreutem HTML-Code umgestellt. Da nicht der PHP-Code, sondern der dadurch erzeugte HTML-Code an den Browser ausgeliefert wird, habe ich zur besseren Lesbarkeit die PHP-Kurzschreibweise wieder auf die normale Schreibweise umgestellt.

Zur Steuerung des Templates habe ich Variable mit Parametern eingeführt, die das Verhalten und Aussehen jeder einzelnen Seite des Templates unterschiedlich beeinflussen können.

Für jede Seite des Web lassen sich die nachstehenden Variablen mit Parametern einzeln einstellen:

$keinLogoAnzeige
Die Anzeige des Website-Logos und des Motto-Textes (beides oberhalb der Slideshow) werden ausgeblendet.

$keinLogoTextAnzeigen
Wenn die vorgenannte Option nicht aktiviert ist, wird nur der Motto-Text ausgeblendet.

$alternatives_Seitenlogo_2021
Auswahl eines anderen Logos als das in der Konfiguration festgelegte Logo. Alle Bild-Dateien im Template - Images - Ordner werden zur Auswahl angeboten.

$MainColor2019
Farbe der horizontalen Linien ober- und unterhalb der Slideshow, die horizontale Linie (<hr>), die Linie unterhalb des Contents und die Linie oberhalb des Footers. Die Defaultfarbe ist ein mittleres Grau.

$MenuBGColor2021
Die Hintergrundfarbe des Menüs wechselt je nachdem ob das Feld von der Maus gehovert wird, der Menüpunkt des Feldes nicht aktiv ist oder das Feld den aktiven Menüpunkt enthält. Die zweite und dritte Farbe werden aus der ersten errechnet. Der Abstand der Farben zueinander ist #222222. Festgelegt wird die hellste Farbe (Hoverfarbe). Der Defaultwert wird in der Datei colordefinition.css festgelegt. Wird statt einer Farbe nur '---' eingegeben, dann wird der Wert der $MainColor2019 übernommen.

$NoSlideShow
Dadurch wird die Slideshow ausgeblendet.

$SliderFolder2019
Wählt einen Subfolder von /userfiles/images als Quelle der Slideshow-Bilder aus.

$Image_Shift_2021
Alternatives Hintergrundbild für den Header Shift-Image. Hier kann mit Mitteln von Morepagedata keine komfortable Auswahl gestaltet werden. Das Bild kann sich in den verschiedenen Ordnern unter /userfiles/images und in diesem selbst befinden.
Es bleibt daher keine andere Möglichkeit als die Bild-Datei inclusuve Pfadangabe (basierend auf den root des CMS) von Hand einzugeben.

$TwoColumn2021
Legt fest, dass die Newsboxen und ein evtl. vorhandenes Submenü unter dem Content angezeigt wird und damit die Seite im 2-Spalten-Layout angezeigt wird.

$SubmenuRight2021
Legt fest, ob das Submenü in der dritten Spalte oben angezeigt wird, wenn 1) die Seite Unterseiten hat und 2) mindestens eine Newsbox definiert ist.

$SnipetsBox2021
Wählt eine versteckte Seite aus, die nur im Editormodus angezeigt wird und zwar in der rechten Spalte als oberstes Element der Spalte als Newsbox formatiert. Diese Box ist für den Artikelautor gedacht als elektronischer Spickzettel / Kopiervorlage für Code-Sequenzen.

$NewsBox2019A bis $NewsBox2019D
Wählt die versteckte Seite aus, die in der jeweiligen Newsbox angezeigt werden soll.

$GlobaleSilbentrennung
Damit wird für die gesamte einzelne Seite die Fähigkeit moderner Browser aktiviert, die Silbentrennung bei Wörtern vorzunehmen. Dazu muss allerdings im Browser das Wörterbuch der entsprechenden Sprache installiert sein. Oft ist in der Grundeinstellung nur das Wörterbuch für Englisch installiert. Im Gegensatz zu dieser seitenweiten Silbentrennung gibt es auch das Format Silbentrennung für div, p und span.

$Privacy2021
Sorgt dafür, dass das Cookie-Formular von Privacy oberhalb des Content angezeigt wird.

$MembersLogin
Sorgt dafür, dass das Anmeldeformular von Memberspages unter dem Menü angezeigt wird.

$RegisterLogin2021
Sorgt dafür, dass das Anmeldeformular von Register unter dem Menü angezeigt wird.

$ScriptImporter2021
Ein 16 bit breiter 'DIL-'Schalter, der festlegt, ob das externe (nicht zum CMS gehörend) Script geladen wird, das der Stelle im Schalter entspricht. Die Zählung im Schalter beginnt links bei 1.

Zusätzliche Formatdefinitionen

Die vordefinierten Formate sind um einige interessante Möglichkeiten erweitert worden. Dabei werden einige sehr spezielle Formatierungen (Styleeigenschaften) verwendet, die dazu führen würden, dass sich der zu bearbeitende Text nicht im Editorfenster darstellen läßt oder zumindest den normalen Textfluß verläßt (z. B. 'display: none' oder 'visibility: hidden' oder 'position: absolut').
Durch die Definition von unterschiedlichen Formaten für den Front-End- und Back-End-Bereich (User-Ansicht und Editormodus) können diese speziellen Formate durch 'umschreibende' Darstellung im Editor angezeigt und bearbeitet werden. 

Hinweise zur Verwendung dieser Spezialformate finden Sie unter der Beschreibung der Formate in den Unterseiten zur stylesheet.css.

Fremdsprachen-Tauglichkeit

Das Template und dessen Konfigurationsoberfläche geben einige Texte aus, die in keinem Text-Array des CMS enthalten sind. Daher sorgt das Template selbst für die automatische Erzeugung einer Sprachdatei für eine neue Sprache. Dazu wird die englische Sprachdatei kopiert. Der Anwender kann dann den Inhalt der neuen Sprachdatei editieren (Dateinamen: 2-stelliges Länderkürzel + '.php' im Ordner /templates/krl-3col-flex/languages/).
Ab Version 3.2 ist im Backend eine Translator-GUI vorhanden. Dann ist keine Manipulation von Dateien notwendig.

Fremdcode includieren ohne Änderung der Template-Datei

Im Template sind Vorkehrungen getroffen, zusätzlichen Code zu integrieren ohne das dazu die template.htm geändert werden müßte (was fehleranfällig ist). Es sind drei Möglichkeiten vorbereitet. Die ersten beiden hängen mit dem Plugin Privacy_XH zusammen.

Wird im Formular von Privacy dem Setzen von Cookies zugestimmt wird die Datei cookie-perm-tools.php im Bereich <head> ... </head> unmittelbar nach den Favicons-Declarationen und die Datei cookie-permission.php unter dem Footer unmittelbar vor dem Script-Bereich eingebunden.
Die Datei scriptimporter.php wird unmittelbar vor dem </head>-Tag eingebunden, wenn im Reiter Mehr im Editorfenster eine Bit-Maske zum Scriptimport definiert wurde.

Wie in diese Dateien der Code eingebaut wird und wie die scriptimporter.php gesteuert wird, ist auf folgenden Seiten erläutert:
cookie-perm-tools.php cookie-permission.php scriptimporter.php Scripte importieren 

Style-Modifikationen ohne Bearbeitung der stylesheet.css

Ebenso wie es riskant ist die template.htm zu ändern ist es auch riskant die stylesheet.css zu ändern. Beide Dateien sind relativ umfangreich und komplex. Wenn sich dort ein Fehler einschleicht, kann das ganze Temlate crashen. Sicherer ist es für Änderungen am Style separate Dateien zu verwenden. Außerdem ist dadurch das Updaten des Templates erheblich unproblematischer.

Um zusätzliche benutzerdefinierte Formate in das Template einzubinden wird die Datei user.css verwendet. Da diese Datei noch vor der eigentlichen stylesheet.css eingelsen wird, ist sicher gestellt, dass keine Formatfestlegung in dieser Datei eine im Template schon festgelegte Formatierung überschrieben wird (zumindest nicht  bereits definierte Parameter). Es kann somit davon ausgegangen werden, dass die Formate in der user.css das Template nicht crashen können. Sollte mal etwas wirklich katastrophal schief gehen braucht man lediglich per FTP-Programm die Datei umzubenennen (z.B. user.css -> -user.css) und das Template läuft wieder.
Wichtig: Da diese Datei über einen @import url() - Befehl innerhalb der stylesheet.css geladen wird, stehen diese Formate auch im Editorfenster zur Verfügung!

Möchte man grundlegende Formatierungen des Templates ändern, dann braucht man auch hier nicht an der stylesheet.css Änderungen vorzunehmen. Dafür ist die usermodify.css da. Diese Datei wird in der template.htm nach dem Aufruf der Funktion head() referenziert und überschreibt damit nur im Front-End-Modus die möglicherweise schon in der styleshee.css existierenden Formate. Dies hat zur Folge, dass diese Formate im Editor nicht wirksam werden! Der Editor bringt außer den Styles des CMS nur die Styles aus der stylesheet.css (und wegen dem dortigen Import auch die der user.css) zur Anwendung und bietet unter dem Drop-Down-Element 'Formate' auch nur Formatierungen an, die als Klassen an <span>, <p>, <div> oder <img> gebunden sind. Außerhalb des Editorfensters werden die Formatierungen in der usermodify.css voll wirksam.

Möchte man z.B. die Größe der Überschriften ändern, so kopiert man die entsprechenden Formate aus der stylesheet.css und fügt sie in die usermodify.css ein. Dann ändert man dort die Schriftgröße. Im Editor wird wieterhin die alte Größe angezeigt. Im Front-End (das was der Surfer sieht) wird jedoch die geänderte Formatierung angezeigt.

Auch hier gilt: Geht mal etwas fürchterlich schief und das Template crashed, dann reicht es per FTP die Datei usermodify.css umzubenennen und das Template läuft wieder.

Natürlich muß man dann (egal ob bei user.css oder usermodify.css) den Fehler suchen. Da diese Dateien in der Regel erheblich kleiner sind als die stylesheet.css, wird sich die Fehlersuche wahrscheinlich erheblich einfacher gestalten.

Besonderheit bei Viewports mit mehr als 1920px Breite

Im Normalmodus (Front-End-Mode, Admin ist ausgeloggt) wird die Seite mit einer max. Breite von 1920 px angezeigt und steht vor einem Farb-Verlauf-Hintergrund horizontal zentriert im Viewport. Ist die Seite im Editier-Modus wird die Seite linksbündig ausgegeben.
Vorteil: Wer, so wie ich, gerne das FHS-Admin-Menü verwendet und dieses rechtsbündig eingestellt hat, wird es zu schätzen wissen, dass dann die gesamte Seitenbreite dargestellt werden kann ohne dass das Admin-Menü einen Teil der Seite überlagert.

« vorige Seite | Seitenanfang | nächste Seite »