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
Templates für CMSimple_XH von
KRL Software-Development
private, nicht kommerzielle Website
by Karl Richard Lembach
Sie sind hier: Startseite > Template krl-3col-flex > Konfiguration des Templates > Crossfading-Header
Letzte Bearbeitung:

Crossfading-Header

Achtung: Beachten Sie, dass bei der Darstellung des Headers die Festlegungen unter Morepagedata_XH (unten der Reiter Mehr) Vorrang vor den in der Konfiguration getätigten Einstellungen haben! Überzeugen Sie sich also, dass für die aktive Seite, unter der die Konfiguration vorgenommen wird, bei den Einstellungen unter Mehr keine Einstellungen bezüglich des Headers erfolgt sind! Am einfachsten ist das zu erreichen, wenn man vor der Konfiguration des Templates eine neue leere Seite erstellt und diese zur aktiven Seite macht.

Header mit Logo & Mottotext vor CSS-Crossfadeshow

Für diesen Header sind einige Bilder mit mit den Abmessungen 1920 * 300 Pixel notwendig.

Im Hintergrund läuft eine Überblendung (Crossfadingshow) von Bildern aus einem Unterordner von ./userfiles/images/.
Für diesen Effekt ist kein JS notwendig, er wird alleine mit CSS realisiert!
Notwendige Bildgröße: 1920 * 300 Pixel.

Der Ordner wird über eine Drop-Down-Liste ausgewählt.
Damit werden alle Bilder im Ordner ausgewählt mit einer der folgenden Erweiterungen: bmp gif jp2 jpg png tif tiff webp svg

Da die Hintergrundbilder nicht automatisch auf 1920 * 300 Pixel angepasst werden und in der Ebene vor dem Content der Website angezeigt werden, würden falsch dimensionierte Bilder den Content (insbesondere das Menü) überdecken.
Demzufolge müssen diese Hintergrundbilder exakt 1920 Pixel breit und 300 Pixel hoch sein!

Die Anzahl der angezeigten Bilder ergibt sich aus der Dateianzahl im Ordner.

Wie lange ein Bild angezeigt wird, bevor zum nächsten überblendet wird, kann zwischen 0,5 und 300 Sekunden eingestellt werden, mit einer Schrittweite von 0,2 s.
Wie schnell die Überblendung erfolgt, kann ebenfalls eingestellt werden. Dieser Wert ist ein relativer Wert (langsam = 1, schnell = 10), da er zum einen von der Bilderanzahl und zum anderen von der Anzeigedauer abhängt. Hier ist einfaches Ausprobieren der beste Weg.

Die sich aus diesen Einstellungen ergebenden Zeiten für Einblenddauer, Durchlaufzeit und Überblendzeit werden angezeigt.

Vor dem Hintergrundbild wird links oben ein Logo und rechts oben der Motto-Text angezeigt (wenn die entsprechenden Festlegungen getroffen sind).
Beide werden mit einer transparenten Farbhinterlegung versehen.

Die Logo-Datei muss sich im Images-Ordner des Templates oder einem der Ordner unter ./userfiles/images befinden.
Die Logo-Grafik wirkt am besten, wenn es eine Grafik mit transparentem Hintergrund ist.
Dann kann das Hintergrundbild durch die transparent Farbhinterlegung durchscheinen.

Ausgewählt wird das Logo über eine Drop-Down-Liste der Ordner und eine zweite Liste der Dateien.
Es ist allerdings auch möglich "- show no logo -" auszuwählen, um kein Logo anzuzeigen (dann wird auch keine Farbhinterlegung ausgegeben).
Das Logo wird automatisch herunterskaliert (max. Breite: 576 Pixel, max. Höhe: 242 Pixel).
Damit jedoch nicht unnötig große Bilder übertragen werden müssen, ist es sinnvoll, die Logo-Grafik in der Größe annähernd anzupassen.

Der Motto-Text ist auf max. 1152 Pixel Breite begrenzt, das entspricht etwa 50-51 Zeichen.
Wird kein Text eingegeben, wird auch die Farbhinterlegung des Textes nicht angezeigt.
Ist der Text so lang, dass er nicht mehr in eine Zeile passt, wird er automatisch umgebrochen.
Einen willkürlichen Zeilenumbruch erreicht man durch Eingabe des senkrechten Striches (| = AltGr + <) oder <br>.

Einfache (′) oder doppelte (″) Anführungszeichen werden automatisch in ihre HTML-Entitäten &#039; und &quot; umgewandelt.

Der Motto-Text kann bis zu 6 Zeilen hoch sein. Ab der siebten Zeile verdrängt er die Brotkrümelnavigation nach unten.
Die Textfarbe des Motto-Textes kann frei eingestellt werden oder die Akzentfarbe kann durch Knopfdruck übernommen werden.

Sowohl Logo als auch der Motto-Text werden mit einer frei wählbaren Farbe hinterlegt, deren Transparenzgrad einstellbar ist.
Der Eckradius dieser Farbhinterlegung kann ebenfalls eingestellt werden.


| Seitenanfang |