Die Kon­fi­gu­ra­tion

Das Template kann in einigen Punkten konfiguriert werden.
Hier wird das WAS, das WIE und das WO beschrieben.


CMSimple_XH bietet im Auslieferungszustand nur sehr begrenzte Möglichkeiten um das Template und das dazugehörige Stylesheet über das Backend zu bearbeiten. Dazu ruft man die entsprechenden Menüpunkte unter „Einstellungen“ auf. Viel komfortabler erledigt man das allerdings lokal mit einem guten Editor der eigenen Wahl.

In einer der nächsten XH-Versionen wird es wahrscheinlich möglich sein, Template und Stylesheet über Schalter und Eingabefelder zu konfigurieren, ganz ähnlich wie bei der Plugin-Konfiguration. Bis das soweit ist, müssen wir uns mit manueller Bearbeitung der entsprechenden Dateien begnügen.


Die Template-Datei

Speicherort: ./templates/fhs-multiOP3/template.htm
Der Konfigurations-Bereich befindet sich gleich ganz oben.

Alle hier festgelegten Variablen werden weiter unten im Template an der richtigen Stelle eingesetzt. Man muss also nicht lange suchen.

 

Header-Bild

Festlegung des Standard-Hintergrund-Bildes. Das Bild muss im Bilder-Ordner des Templates liegen. Es wird auf allen Seiten als Header-Bild verwendet. Sollte auf einer Inhalts-Seite kein Bild angegeben sein, wird dieses Bild dort als Hintergrund eingesetzt.

Angabe in Hochkommas '…'

Die Variable heißt:
$defaultBgImageURL

Sichtbarer Bereich

Die Höhe des sichtbaren Bereiches der Hintergrund-Bilder nach jedem Abschnitt.

Alle CSS-Höhenangaben sind möglich:
Standard ist '33vh'

Angabe in Hochkommas '…'

Die Variable heißt:
$bgImgVisibleHeight

Dunkles Raster

Das dunkle Raster über den Hintergrund-Bildern kann global an- oder abgeschaltet werden.

Mögliche Werte (ohne Anführungszeichen):
true oder false

Für das Header-Bild:
$patternOverHeaderImage

Für die Hintergrund-Bilder der einzelnen Seiten:
$patternOverPageBgImage

Diagonale

Der schräge weiße Streifen oberhalb eines jeden Abschnitts kann global an- oder abgeschaltet werden.

Mögliche Werte (ohne Anführungszeichen):
true oder false

Die Variable heißt:
$diagonalStripeShow

Hintergrund-Farbe des Footers

Bei Änderung wird gleichzeitig die Hintergrund-Farbe des Seiten-Menüs und dessen Umschalt-Buttons geändert.

Alle CSS-Farbangaben sind möglich:
Standard ist '#111'

Angabe in Hochkommas '…'

Die Variable heißt:
$footerBgColor

Logos

Festlegung der beiden Logo-Versionen. Die Bilder müssen im Bilder-Ordner des Templates liegen. Ist nur eine Logo-Version verfügbar, dann bei beiden Variablen den gleichen Namen eintragen.

Angaben in Hochkommas '…'

Das „helle“ Logo:
$logoLightURL

Das „dunkle“ Logo:
$logoDarkURL

Scroll-Offsets

Bei den Scroll-Offsets handelt es sich um Plugin-Optionen, die mit dem Template eigentlich nichts zu tun haben. Da wir aber gerade beim Konfigurieren sind, können wir das auch gleich an dieser Stelle erledigen und müssen nicht lange im Template herumsuchen.

Angabe ohne Anführungszeichen: ganze Zahlen (auch negative möglich)
Einheit: Pixel (nicht mit hinschreiben!)

$onepage_customOffsetBeschreibung

$onepage_navSpyOffsetBeschreibung

Die Stylesheet-Datei

Speicherort: ./templates/fhs-multiOP3/stylesheet.css
Zu den Konfigurations-Optionen in der Stylesheet-Datei gibt es eine gute und eine schlechte Nachricht.

Die gute: Um alle Vorkommen der Akzent-Farbe auf der gesamten Website auf einen Schlag festzulegen, muss nur ein Wert geändert werden. Die schlechte: Bei den Hintergrund-Bildern wird es aufwendig.


Die Akzent-Farbe

Mit der Akzent-Farbe sind viele Elemente auf der gesamten Website eingefärbt (im Original rot; #c00).

Dazu zählen u.a.: der Hamburger-Hintergrund (Hauptmenü), die aktiven Elemente in beiden Menüs, die Links im Inhalt, horizontale Linien, der rote Rand über dem Footer, die H1-Überschriften, der Top-Link … und anderes.

--mainAccentColor: #c00;

In der Stylesheet-Datei ziemlich weit oben (aber erst nach den Schriften) kann dieser Wert geändert werden. Damit ist es möglich, das Aussehen der Website an seinen persönlichen Geschmack oder vielleicht an die Farbe eines vorhandenen Logos anzupassen.

Die Hintergrund-Bilder

An irgendeiner Stelle müssen die Hintergrund-Bilder für die einzelnen Seiten festgelegt werden. Prinzipiell geschieht das, indem während der Seitenbearbeitung im Tab „Multionepage“ eine CSS-Klasse für die Seite eingetragen wird. Welche Klasse welches Bild einsetzt, das muss manuell in der Stylesheet-Datei festgelegt werden. Hier in dieser Demonstration sieht das zum Beispiel für das erste Bild so aus:

.bg-example-01 {
background: url(images/bg-example-01.jpg) no-repeat center center;
}

Das bedeutet: Die CSS-Klasse heißt bg-example-01. Diese Klasse wird im „Multionepage“-Tab der gewünschten Seite eingetragen. Daraufhin erhält diese Seite  bg-example-01.jpg als Hintergrund-Bild, welches im Template-Bilderordner liegt. Alles klar?

Für jedes Hintergrund-Bild, das irgendwo auf der Website verwendet werden soll, muss also ein solcher Eintrag in der Stylesheet-Datei angelegt werden, wobei eine Mehrfachverwendung kein Problem ist.

Je nach Bild-Motiv kann hier die Bild-Position noch individuell bestimmt werden (im Beispiel: center center).

Nachteil: Man muss sich die Klassen merken oder irgendwo notieren, damit man sie bei der Seitenbearbeitung verfügbar hat. Es gibt nirgends eine Übersicht über die vorhandenen Klassen und Bilder. Das ist etwas unkomfortabel. Leider.

Seitenbearbeitung

Bei der Seitenbearbeitung gibt es weitere Konfigurations-Optionen.


Der Seiten-Tab „Multionepage“

Grundlegende Erklärungen dazu finden sich in der Plugin-Beschreibung. Ergänzend sei erwähnt, dass im Feld „CSS-Klasse“ mehrere Klassen eingetragen werden können. Die Klassen werden hintereinander geschrieben und nur durch ein Leerzeichen voneinander getrennt. Im Folgenden werden die möglichen Einträge erläutert.

Screenshot Tab Multionepage

 

CSS-Klasse für Hintergrund-Bild

Beispiel-Klasse: bg-example-01

Wie weiter oben schon beschrieben, muss für jedes gewünschte Hintergrund-Bild in der Stylesheet-Datei eine CSS-Klasse angelegt werden. Diese Klasse wird also hier eingetragen.

Wird keine solche Klasse angegeben, wird auf dieser Seite das Standard-Hintergrundbild verwendet.

Explizit KEIN Hintergrund-Bild

Klasse: noBackgroundImg

Es kann wünschenswert sein, explizit KEIN Hintergrund-Bild zu einer Seite festzulegen. Zum Beispiel ist das in dieser Demonstration für einige H1-Überschriften so festgelegt. Dadurch wird erreicht, dass sich die folgende Seite direkt an die vorhergehende anschließt. Sinnvoll ist das, wenn eine Seite sehr wenig Inhalt hat, aber trotzdem einen Menüpunkt in der Seiten-Navigation erzeugen soll.

Klasse: pageNavOff

Hat man eine Level-1-Seite ohne Unterseiten, dann ist es sicher nicht nötig die Seiten-Navigation am unteren Bildschirmrand anzuzeigen. Der Eintrag dieser CSS-Klasse schaltet die Anzeige für diese Seite ab.

In dieser Demonstration ist das zum Beispiel auf den Seiten Kontakt, Datenschutz und Impressum so.

Please activate JavaScript in your browser! —
Click here for the SiteMap.