headerimage1 headerimage2 headerimage3 headerimage4 headerimage5 headerimage6
Sie sind hier: Startseite > Template fhs-basic-all Version 2.0
Saarland English
A
Letzte Bearbeitung:

Logo fhs-basic-all V. 2.0

fhs-basic-all Version 2.0

Ein Template für CMSimple_XH 1.7.x basierend auf fhs-basic von Frank Seidel

Es handelt sich um ein klassisches 3-Spalten-Layout mit einer Slideshow im Header. Die Gestaltung ist sehr einfach und klar gehalten. Das Layout ist responsiv und passt sich daher den unterschiedlichen Viewport-Breiten selbsttätig an.

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!

Voraussetzung für die einwandfreie Funktion sind folgende Plugins und Bilder:

  1. Slideshow_XH
  2. Morpagedata_XH
  3. Bilder für die Slideshow in der exakten Größe 1920 x 300 px (min. 2 Stück) im Ordner /userfiles/images/headerimages/ und evtl. weiteren Subordnern zu /userfiles/images/.
  4. Plugin CNC deaktivieren, wenn die Color-Picker-Funktion benutzt werden soll.
Aufbauend auf dem zugrunde liegenden Design von Frank Seidel habe ich mithilfe des Plugins Morpagedata zusätzliche Flexibilität eingebaut. Es lassen sich dadurch für jede einzelne Seite folgende Einstellungen separat vornehmen:
  1. Themenfarbe: horizontale Linie oberhalb und unterhalb der Slideshow, <hr> und die horizontale Linie über dem Footer
  2. Hintergrundfarbe des Menüs: 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 #CC. In der Eingabemaske lassen sich zwar noch kleinere und noch größere Werte festlegen, im Template werden diese jedoch (stillschweigend ohne Rückmeldung) korrigiert.
  3. Auswahl des Ordners für die Slideshow-Bilder.
  4. Die beiden News-Boxen in der rechten Spalte lassen sich unabhängig auswählen, können also zum Kontext der Seite passend eingestellt werden. Ihre Ausgabe erfolgt nur, wenn eine Auswahl festgelegt ist.
  5. Festlegen, ob das Privacy-Formular zum Akzeptieren oder Ablehnen von Cookies angezeigt wird.
  6. Wenn eine Seite Unterseiten hat, wird ein zusätzliches Submenü statt unter der Content-Spalte in der rechten Spalte oberhalb der News-Boxen angezeigt.

Wie beim Vorlagen-Template wandern die News-Boxen und das Submenü unter den Content, wenn der Viewport schmäler wird.

Wird der Viewport noch schmäler wandert auch der Content unter das Menü. Durch Klicken auf das X rechts der Suchmaske klappt das Menü zu einem "Hamburger" zusammen.

Wird die Seite auf einem schmalen Viewport (Handy, kleines Tablet) gestartet, erscheint das Menü nur als "Hamburger", der durch anklicken ausklappt.

Die Header-Slideshow

Für den Header wird das Plugin Slideshow_XH benötigt. Das Plugin wird im Originalzustand – nur mit angepasster Konfiguration – im Download enthalten sein. Außerdem werden einige Beispielbilder für den Header mitgeliefert, damit man das Template sofort funktionstüchtig vorliegen hat. Die Bilder stammen von mir und werden CC0 weitergegeben. Sie 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 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 schauen, in wie weit man komprimieren kann, um eine noch ausreichende Qualität auf großen Bildschirmen zu erreichen (z. B. IrfanView mit dem RIOT-Plugin). Außerdem ist es sehr schwierig Motive zu finden, die bei diesem Format noch eine Aussagekraft haben oder zumindest gut aussehen. Eine Möglichkeit ist, wie es an anderer Stelle auf dieser Website realisiert ist, 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.

Das Morepagedata_XH-Plugin

Über dieses Plugin kann man auf dem Reiter  Mehr  des Editors folgende Einstellungen vornehmen:

  1. Template-Haupt-Farbe
  2. Menü-Hintergrund-Hover-Farbe
  3. Slideshow-Bilderordner
  4. obere Newsbox
  5. obere Newsbox
  6. Anzeige des Privacy-Formulars

Die Template-Farben

Voreingestellt sind ein helles Grau sowohl für die horizontalen Linien als auch für den Menühintergrund (nicht-aktive Punkte, nicht gehovert). Möchte man bei der eigenen Farbgebung ebenfalls eine Übereinstimmung der Färbung erreichen, so ist die Hover-Farbe um genau #222222 heller als die Template-Hauptfarbe einzustellen. Also zu jeder der drei Grundfarben der Template-Hauptfarbe ist #22 hinzuzuzählen.

Die Hover-Farbe des Menühintergrundes

Das Menü hat drei unterschiedliche Hintergrundfarben. Der Menüpunkt der aktiven Seite hat die dunkelste Färbung. Alle nicht-aktiven Menüpunkte sind einen Ton heller gefärbt. Steht die Maus über einem nicht-aktiven Menüpunkt, wird dieser also gehovert, erhält dieser Menüpunkt die hellste Hintergrundfarbe. Die Schriftfarbe im Menü ist fest auf weiß eingestellt. Daher ist der Kontrast zur hellsten Hintergrundfarbe im Menü am kritischsten zu beurteilen. Folgerichtig ist diese Farbe einstellbar. Die nächst dunklere Farbe wird berechnet in dem bei jeder Grundfarbe #22 (also insgesamt #222222) abgezogen wird. Die dunkelste Hintergrundfarbe wird berechnet in dem bei jeder Grundfarbe #44 vom Wert der hellsten Farbe abgezogen wird.
Damit sich bei der Berechnung der Farbwerte keine negativen Werte ergeben, muss der minimalste Wert jeder Grundfarbe #44 (dezimal 68) betragen. Wird ein kleinerer Wert festgelegt, korrigiert das Template diesen Wert stillschweigend.
Um zumindest einen minimalen Kontrast zwischen weißer Schrift und der hellsten Hintergrundfarbe sicherzustellen ist die hellste Hintergrundfarbe auf max. #CCCCCC begrenzt. Wird also eine der Grundfarben mit einem Wert größer als #CC (dezimal 204) eingestellt, korrigiert das Template diesen Wert stillschweigend.

Die News-Boxen

Als News-Box kann eigentlich jede veröffentlichte, aber versteckte Seite ausgewählt werden. Damit diese Seiten versteckt sind, also nicht im Menü erscheinen, muss man im Reiter  Seite  des Editors den Haken an 'In der Navigation anzeigen?' entfernen.

Bei der Gestaltung des Contents dieser Boxen sollte man die maximale Breite von etwa 380px im Auge behalten. Die Überschriften werden gegenüber dem Hauptcontent kleiner dargestellt und Bilder werden skaliert.

Das Privacy-Formular

Wird der Haken bei 'Cookie-Formular anzeigen' gesetzt, erscheint dieses Formular unmittelbar oberhalb des eigentlichen Content in der mittleren Spalte. Voraussetzung ist natürlich, das Plugin Privacy_XH ist installiert und eingerichtet. Fehlt das Plugin gibt es keine Fehlermeldung.

Optionale Plugins

Das Template ist für die Plugins Privacy_XH und Crazystat_XH vorbereitet. Sind sie jedoch noch nicht installiert wird die Funktion des Templates nicht gestört.

Ist Privacy_XH installiert, kann die Anzeige des Zustimmungs-/Ablehnungsformulars unmittelbar oberhalb des Content aktiviert werden.

Ist Crazystat_XH installiert, wird der Zähler unter dem Content rechts vom Link 'Seitenanfang' angezeigt.

Download des Templates


Bildquellen

Slideshowbilder von https://www.cmsimple-xh.org/
Logo: http://cmsimple.lembach-kr.de/


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

Please activate JavaScript in your browser.

» Sitemap