Hallo, Besucher der Thread wurde 277 aufgerufen und enthält 0 Antworten

letzter Beitrag von Belarus am

[Template] Christmas Lights

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,


    wie viele wartet sicher der ein oder andere schon auf Weihnachten und möchte entsprechend auch seine Woltlab-Suite in Weihnachtsstimmung bringen. Hier möchte ich euch zeigen, wie Ihr eine animierte Lichterkette per Template in euer WCS intrigiert. Die Lichterkette, hier ChristmasLights genannt, kann natürlich auch direkt im CSS-Code leicht nach den eigenen Wünschen angepasst werden ;)

    Features

    • Pures HTML und CSS
    • Animiert
    • Leicht anzupassen
    • Individuell erweiterbar





    Demo


    Eine Live Demo in der WCS ist leider nicht vorhanden. Allerdings ist ein Codebeispiel vorhanden: Codepen.io: [CSS] Christmas Lights ;)

    Quellcode

    Das unachtsame bearbeiten von Templates kann zu einen Fatal-Error führen. Entsprechend dem sind vor jeglichen Änderungen ein Backup durchzuführen! Insofern keine Kenntnisse mit Templates vorhanden sind, so empfiehlt es sich einen Entwickler des Vertrauen zu kontaktieren.

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Benutzung

    1. Gehe zu Anpassung Templates.
    2. Wähle unter Templates (falls dort nicht schon markiert) über den Filter Deinen Style aus.
    3. Lege mit einen klick auf + Template hinzufügen ein neues Template an.
    4. Wähle als Templatename: "christmasLights" aus.
    5. Füge dann den HTML-Quellcode (siehe oben) ein und speicher dieses ab.
    6. Gehe zu Anpassung DEIN_STYLE Erweiterte Einstellungen Eigene Deklarationen - oder - Stilunabhängiges CSS und SCSS
      (Hinweis: Benutze "Stilunabhängiges CSS und SCSS" nur wenn christmasLights in allen Styles eingebunden wird!)
    7. Füge dort den CSS-Quellcode (siehe oben) ein.
    8. Gehe zu Anpassungen Templates DEIN_STYLE und suche das Template: header
    9. Klicke hier auf um das Template zu bearbeiten.
    10. Suche nun nach der Zeile {include file='pageHeader'} (relativ weit oben).
    11. Füge danach folgendes in einer neuen Zeile ein: {include file='christmasLights'} und speicher dieses ab.
    12. Fertig!

    Warnung

    Das unachtsame (ver)ändern von Templates kann zu einem Templatefehler führen. Es wird daher dringend dazu geraten vorher ein Backup zu machen! Für etwaige Datenverluste oder Schäden kann keine Haftung übernommen werden! Bei Unsicherheiten frag entsprechend besser vorher nach oder wende Dich an einer Person Deines Vertrauens. Danke!

    Anpassung

    Je nach dem wo sich die ChristmasLights befinden sollen (unter dem Menü, unter den Breadcrumbs, etc.) müssen diese ggfls in einen anderen Template eingebunden werden. Außerdem müssen die ChristmasLights über die CSS-Klasse (.lightrope) mittels margin in Position gebracht werden. Da jeder einen anderen Stil verwendet und/oder aber auch die ChristmasLights an einer anderen Position haben möchte, gibt es kein universelles Workaround dazu. Weitere Einstellungsmöglichkeiten können der folgenden Tabelle entnommen werden:

    $globe-width: 12px;Breite der jeweilig einzelnen Lampe (je höher der Wert, desto breiter die Lampe und desto kleiner der Wert, desto schmaler die Lampe)
    $globe-height: 25px;Höhe der jeweilig einzelnen Lampe (je Höher der Wert, desto höher die Lampe und desto kleiner der Wert, desto kleiner die Lampe)
    $globe-spacing: 30px;Abstand zwischen den jeweiligen Lampen (je Höher der Wert um so größer der Abstand und um so kleiner der Wert, um so kleiner der Abstand)
    $globe-spread: 3px;Leuchtkraft (shadow) der jeweiligen Lampe (je Höher der Wert um so größer der shadow Effekt und um so kleiner der Wert, desto kleiner der shadow-Effekt)
    $light-off-opacity: 0.4;Transparenz der jeweiligen Lampen (Je höher der Wert um so größer die Leuchtkraft und um so kleiner der Wert, desto kleiner die Leuchtkraft)
    @keyframes flash-1Unter den Keyframe flash-1 bis flash-3 können die Farben der einzelnen Lampen per rgba-Angaben geändert


    Lizenz

    Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

    Screenshots



    Gruss,
    Andreas

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!