Xobor Adventskalender mit Auslösegrafik für alle Templates Aktualisiert 25.11.22
Wer seine Webseite der Weihnachtszeit etwas anpassen möchte, kann das mit dem "Xobor Kalender" aus dem "Plugin-Store" gut machen! Ist das PIugin installiert, erscheint oben in der Navileiste ein neuer Reiter mit "Adventskalender". Wer die Auslösung etwas auffälliger machen möchte und den Kalender über eine Grafik auslösen möchte, braucht nur das folgende Skript installieren. Das Skript funktioniert in allen Templates, auch im V6. Hierbei werden die Templates nicht verändert!
Neu! - Advendskalender:
Größe des Kalenders einstellbar!
Kalendertüren werden zentriert dargestellt.
Türrand wurde verkleinert!
Mit Tür-Hovereffekt!
Türbilder & Türvideos werden in maximaler Größe angezeigt!
Türnummern werden deutlicher hervorgehoben!
Hintergrundfarbe und Schriftfarbe des Kalenders können eingestellt werden!
Neu! Hintergrundbild kann auch ausgewechselt werden!
Neu! Hinweis bei zu früh geöffneten Türen hat einen Anstrich bekommen!
Neu! Im V6 werden die Zahlen aus der Mitte nach oben links verschoben!
Wird eine Option nicht benötigt, braucht sie nur gelöscht oder auskommentiert werden!
Wichtig! Der Zustand der Adventstüren kann nur über den Usernamen, also den Namen eines Mitgliedes gespeichert werden! Ruft ein Gast den Adventskalender auf, sind die Türen immer geschlossen. Der Zustand der Adventstüren kann nicht gespeichert werden!
Funktionen:
Auslösung durch eine beliebige Grafik!
Animation der Grafik können ausgewählt werden!
Position und Größe der Auslöse-Grafik einstellbar.
Folgende Einstellungen und Animationen sind einstellbar (Zeile 66-70):
• Auslösegrafik ausschaltbar (0), • Ohne Animation (1). • Grafik vergrößert sich beim Mouseover (2). • Grafik versteckt sich am linken Rand (3). • Grafik wird vor dem Mouseover transparent angezeigt (4).
Installation für alle Templates & Mobil
Mit CSS + JavaScript
Einfach:
Das folgende Skript wird für die Template (v1-4) in die Kopf- oder Fußzeile kopiert.
Für das neue Xobor V6 und Mobil nach Eigenes Javascript.
Oder als Plugin für die Template (v1-4), Xobor (v6) & Mobil:
Das komplette Skript kann als PIugin in "Untere Leiste - Header" kopiert werden!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!
In Zeile 80 wird die Breite des Kalenders bestimmt, hier 80vw (mit Viewport)!
In Zeile 82+84 kann der gesamte Hintergrund der Seite dem Kalender angepasst werden!
Wird der "Top-Wert" für die Auslösung in Zeile 3 verändert, müssen die Top-Werte in den Animationen gleichermaßen angepasst werden (Zeile 97+99, 105+107, 113+115)!
Die Auslösegrafik kann in Zeile 12 ausgetauscht werden!
In Zeile 66-70 kann die Art der Animation eingestellt werden!
Neu! In Zeile 12 kann ein neues Hintergrundbild für den Kalender eingetragen werden!
Neu! In Zeile 48-61 Hinweis für zu früh geöffnete Türen kann hier angepasst werden!
/* Wenn ein Fenster zu früh geöffnet wird - Style für Hinweis */ #colorbox div { padding: 0px !important; margin:0px !important; } #cboxLoadedContent div { padding:3px 10px !important; margin-right:30px !important; background-color:#590004 !important; border-radius:4px !important; color:#ffffff !important; white-space:nowrap; cursor:default !important; } </style>
<script> // Animation der Auslösegrafik beim "Mouseover"! // 0 = keine Auslösegrafik // 1 = ohne Animation // 2 = Grafik vergrößert sich // 3 = Grafik versteckt sich am linken Rand // 4 = Grafik wird transparent angezeigt
Eine Frage: Bekommst du das hin, dass der Adventskalender nur zu 80% angezeigt wird, oder sich der Bildschirmeinstellung anpasst? Hintergrund: Einige Mitglieder haben ihre Bildschirmauflösung bei 120% oder höher (Sehschwäche? keine Brille?), dann wird natürlich der Kalender zu groß angezeigt.
Schon mal
Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:
Xobor Adventskalender mit Auslösegrafik für alle Templates
Zitat von Kipper-Spedition im Beitrag #3Danke Wolfgang für die Auslösegrafik! Genial und
Eine Frage: Bekommst du das hin, dass der Adventskalender nur zu 80% angezeigt wird, oder sich der Bildschirmeinstellung anpasst? Hintergrund: Einige Mitglieder haben ihre Bildschirmauflösung bei 120% oder höher (Sehschwäche? keine Brille?), dann wird natürlich der Kalender zu groß angezeigt.
Schon mal
Eigendlich sollte sich die Breite des Adventskalender bereits anpassen!
Allerdings lässt sich die Breite noch über die CSS beinflussen! Mit "vw" ist dann sogar der "Viewport", das Browserfenster mit einbezogen!
Getestet - und Jein. Die Kästchen sind jetzt verkleinert, aber beim Foto (Hintergrundbild) wurde am rechten Rand 20% abgeschnitten. Somit sieht es anders aus. Wenn es sich mit dem erneuten Hochladen des Fotos "zu beheben" geht, wäre das eine leichte Übung für mich...
Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:
Weiß irgendjemand, warum der Kalender mit der Hintergrundgrafik irgendwie falsch ist? Das Hintergrundbild wird abgeschnitten angezeigt und ich bekomme es nicht hin, das passend zu machen. Bzw. ich bekomme dann das Hintergrundbild passend, aber es bleibt ein Rand rechts und die Türchen sind nicht insgesamt mittig im Hintergrund. Ich finde ihn nämlich insgesamt sehr groß. Würde ihn gerne passend verkleinern. Bekomme es aber nicht zufriedenstellend hin.
Danke Wolfgang für deine Arbeit. Ich nehme jedoch die alte Auslösegrafik mit der Weiterleitung zum Adventskalender. Man kann sicherlich alles einstellen (Farben, Größe usw.), aber ich als Laie "verspiele" mich daran.
Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche: