Das Template „fhs-whitespace“

weißer Raum

Ein Element ein wenig aus der Mitte gerückt – ergibt viel „weißen Raum“

Das Template verfolgt vorrangig drei Ziele: Übersichtlichkeit, Schnelligkeit und Einfachheit. Außerdem soll es die Anzahl der angebotenen Templates auf meiner Website von 13 auf 14 erhöhen. Ich bin zwar nicht sehr abergläubig – aber, bei 13 weiß man ja nie ;-)

Übersichtlichkeit und gute Lesbarkeit sollen erreicht werden, indem der Fließtext in der Breite reduziert dargestellt wird. Das ist für das Auge des Lesers wesentlich angenehmer als endlos lange Text-Zeilen. Außerdem sollen großzügige Abstände (white space = Weißraum) zwischen den einzelnen Elementen das Nutzererlebnis verbessern.

Schnelligkeit sollte (hoffentlich) erreicht werden, indem im Template selbst auf JavaScripte vollständig verzichtet wurde. Alles soll auch ohne JS funktionieren. Icon-Fonts müssen nicht geladen werden. Als Schriftarten wurden ausschließlich System-Fonts deklariert (system-ui), sodass auch hierfür nichts nachgeladen werden muss. Ob das auf allen Systemen und in allen Browsern ansprechend genug aussehen wird, kann ich nur hoffen.

Einfachheit zu erreichen ist mitunter nicht einfach, vor allem, was den Umgang mit den Text-Editoren angeht. Auf ein schwer zu bedienendes Raster-System wurde verzichtet. Seite anlegen, Editor starten, erste Überschrift (h1) festlegen und dann lostippen – so sollte es sein. Ob das immer klappen wird? Warten wir es ab.

Voraussetzungen

Das Template wurde für CMSimple_XH Version 1.7.4 erstellt – frühere Versionen wurden nicht getestet.

Da das Template einen fixen Seitenkopf hat, gibt es im Bearbeitungsmodus Probleme mit dem XH-Adminmenü durch Überlagerung. Dieses (altbekannte) Problem wird voraussichtlich in einer der nächsten XH-Versionen beseitigt werden. Bis dahin wird die Verwendung des Plugins „fhs-adminmenu“ empfohlen.

Konfiguration

Das Template bietet die Möglichkeit, das Hauptmenü auf XH-typische Art darzustellen. Alternativ dazu ist es möglich, alle Menüpunkte permanent geöffnet zu zeigen.

In der Datei „template.htm“ (im Template-Ordner) kann diese Einstellung vorgenommen werden. $navMenu = "normal"; zeigt das Menü normal – jeder andere Wert wird die Untermenüs geöffnet zeigen.

Der Copyright-Hinweis im Footer („Your Name“) kann hier gleich mit angepasst werden, damit man nicht erst lange im Code dieser Datei herumsuchen muss. Für die Variable $copyrightName wird je nach Gegebenheit der eigene Name, der Name der Firma, der Organisation oder ein anderer Rechteinhaber eingetragen.

Für diese Änderungen ist nicht zwingend ein externer Editor nötig. Ruft man im Adminmodus EinstellungenTemplate auf, dann finden sich diese Optionen gleich im oberen Bereich.

Farben verändern

Mit ein paar wenigen Eingaben, kann man schlagartig den farblichen Gesamteindruck der Website beeinflussen. Dazu ändert man in der Datei „stylesheet.css“ (im Template-Ordner) im Abschnitt *** THE TEMPLATE-COLORS *** die entsprechenden RGB-Werte. Erläuterungen dazu sind an gleicher Stelle zu finden.

Für diese Änderungen ist nicht zwingend ein externer Editor nötig. Ruft man im Adminmodus EinstellungenStylesheet auf, dann finden sich diese Optionen gleich im oberen Bereich.

Tipp: Um vorab die Wirkung der Farbwerte in Echtzeit zu testen, öffnet man im Browser die Entwicklerwerkzeuge (meistens mit [F12]) und ändert dort direkt die Farbwerte unter :root (Styles). Das kann man übrigens auch gleich hier in dieser Online-Demonstration versuchen.

Hinweis zu dieser Demonstration

In dieser Demonstration werden Elemente verwendet, die nicht Bestandteil des Templates sind. Zum Beispiel die Zitate in der ersten Newsbox und das Calendar-Plugin (entsprechende Seiten und zweite/ dritte Newsbox). Es versteht sich von selbst, dass man die Newsboxen mit eigenem Inhalt füllen muss.