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
Sie sind hier: Startseite > Template fhs-basic-all Version 2.3 beta
Saarland English
A

fhs-basic-all Version 2.3 beta

Ein Template für CMSimple_XH 1.7.x

basierend auf fhs-basic von Frank Seidel

EDIT: Von der Verwendung des Plugins Glossaire_XH wird abgeraten!

Das Plugin Glossaire_XH ist aus nicht geklärten Gründen unter fhs-basic-all Version 2.x nicht konsistent in der Anzeige. Die Tooltips werden u. U. nicht angezeigt und statt dessen der gesamte Glossar unter dem eigentlichen Content angezeigt. Achtung: Dies ist kein Fehler des Plugins! Mit anderen Templates arbeitet das Plugin hervorragend!


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. Die grundlegenden Eigenschaften (Template Styles, Menü Levels) sehen Sie sich bitte dort an: http://fhseidel.de/cmsxh/fhs-basic/

Mit der Adaption des ursprünglichen Templates unter Verwendung des Plugin Morepagedata ist ein optisch sehr wandlungsfähiges Template entstanden. Ohne an der Struktur des zugrunde liegenden Templates große Änderungen vorzunehmen, bietet es einige ansprechende Einstellmöglichkeiten.

Diese Template-Variante 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!
Genauso wie fhs-basic ist auch dieses Template frei zur kostenlosen Verwendung und Modifikation.
Lediglich der Link in der 2. Footerzeile darf nicht entfernt werden: Template by fhs modified by krl

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

  1. Slideshow_XH
  2. 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/.
  3. Morepagedata_XH ( Morepagedata )
  4. Optional Privacy_XH ( Privacy )
  5. Optional CrazyStat_XH ( CrazyStat )
  6. Optional Glossaire_XH ( Glossaire )
  7. Falls installiert, muss im Plugin CNC in der Ignor-Liste das Plugin Morepagedata eingetragen werden, wenn der Color-Picker von Morepagedata verwendet werden soll.
Aufbauend auf dem zugrunde liegenden Design von Frank Seidel habe ich mithilfe des Plugins Morepagedata 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 und Fußnoten.
  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 dritte Spalte rechts (nur sichtbar bei breiten Viewports) kann ausgeblendet werden. Der Inhalt wird dann wie bei schmäleren Viewports unter der mittleren (2. ) Spalte angezeigt.
  5. Hat eine Seite Unterseiten, wird ein Submenü unter dem Content angezeigt. Es kann jedoch umgestellt werden, dass das Submenü in der dritten Spalte über den News-Boxen angezeigt wird, solange die dritte Spalte angezeigt wird.
  6. Für die beiden News-Boxen in der rechten Spalte (bei schmäleren Viewports unter dem Content) lassen sich die versteckten Seiten, die darin angezeigt werden sollen, unabhängig auswählen. Sie können also zum Kontext der Seite passend eingestellt werden. Die Anzeige der News-Box erfolgt nur, wenn eine Auswahl festgelegt ist.
  7. Aktivierung der Anzeige des Privacy-Formulars zum Akzeptieren oder Ablehnen von Cookies unmittelbar oberhalb des Contents in der mittleren Spalte. Voraussetzung ist natürlich, dass das Plugin Privacy_XH installiert ist. Dazu ist kein Eingriff in das Template erforderlich.
  8. Wenn das Plugin CrazyStat_XH installiert und eingerichtet ist, wird ohne Eingriff ins Template der Zähler unter dem Content rechts neben dem Link 'Seitenanfang' angezeigt.
  9. Ist das Plugin Glossaire XH installiert muss der Aufruf nicht mehr ins Template eingefügt werden. Der Aufruf aktiviert sich automatisch. Lediglich die übrigen Einstellungen des Plugins müssen den eigenen Wünschen angepasst werden.

Wie beim Vorlagen-Template wandern die News-Boxen und, falls aktiviert, 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 hochkant) gestartet, erscheint das Menü nur als "Hamburger", der durch anklicken ausklappt.

Einige Formatierungen wurden der stylesheet.css hinzugefügt. Darunter eine automatische Silbentrennung (wenn dieses Feature vom Browser unterstützt wird). Wie das in Verbindung mit dem Blocksatz aussieht, kann man im folgenden Absatz sehen. Ausserdem ist ein Format zur Simulation eines TAB-Reiters und von Tastatur-T a s t e n enthalten, benannte Tasten wie Return oder Ende gehen natürlich auch.

Die Header-Slideshow

Für den Header wird das Plugin Slideshow_XH benötigt. Ich verwende diese Slideshow-Konfiguration für dieses Plugin. Es 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. Die Bilder für die Slideshow müssen alle exakt die gleichen Maße haben, und zwar 1920 x 300 px (wenn nicht, werden sie proportional 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, inwieweit man sie komprimieren kann, um eine noch ausreichende Qualität auf großen Bildschirmen zu erreichen (z. B. IrfanView mit dem RIOT-Plugin). Sicher ist es nicht einfach solch 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. Eine andere wäre mit einem modernen Handy "Panorama-"Aufnahmen zu machen. Wenn alles andere simple ist – die Motivauswahl ist nicht so einfach.

Das Morepagedata_XH-Plugin

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

  1. Template-Haupt-Farbe
  2. Menü-Hintergrund-Hover-Farbe
  3. Slideshow-Bilderordner
  4. 2 Spalten Layout
  5. Submenü in rechter Spalte
  6. obere Newsbox
  7. obere Newsbox
  8. 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.
Durch diese stillschweigenden Korrekturen kann es zu unerwarteten Farben kommen. In diesem Fall noch einmal überprüfen, ob der festgelegte Wert zwischen #CC und #44 je Farbe liegt.

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.

Um bei der Auswahl der News-Boxen-Seiten etwas Struktur zu erhalten, habe ich mir angewöhnt diese als Unterseiten einer ebenfalls versteckten Seite 'Newsboxen' anzulegen und aussagekräftige Namen zu geben.

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 keinen Fehler und keine Fehlermeldung.

Optionale Plugins

Das Template ist für die Plugins Privacy_XH, Crazystat_XH und Glossiare_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 (wie schon oben gesagt).

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

Ist Glossaire installiert, wird die hier demonstrierte Glossar-Funktion auf der gesamten Website zur Verfügung gestellt (die Maus auf Crazystat oder Glossaire stellen).

Download des Templates

 


Bildquellen

Slideshowbilder von https://www.cmsimple-xh.org/
Logo: http://cmsimple.lembach-kr.de/?Template-fhs-basic-all2


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

Please activate JavaScript in your browser.

» Sitemap