- Offizieller Beitrag
Wer in seiner WoltLab Suite Installation gerne Schnee haben möchte, kann dies mit folgenden zwei Codes mittels dieser CSS3 Snow Animation umsetzen. Dabei ist gesagt, dass die Anpassung per CSS und einer Template-Änderung gemacht wird. Legt also entsprechend eine neue Template-Gruppe für euer Vorhaben an.
Template header Zeile 28 (unter <div id="pageContainer" class="pageContainer">):
Erweiterte Stil-Einstellungen:
CSS
body { background-color:#333; }
#snow{
background:none;
font-family:Androgyne;
background-image:url('https://i.imgur.com/ChQcWgQ.png'), url('https://i.imgur.com/5gvatHT.png'), url('https://i.imgur.com/pUPB6gi.png');
height:100%;
left:0;
position:absolute;
pointer-events:none;
top:0;width:100%;
z-index:1;
-webkit-animation:snow 10s linear infinite;
-moz-animation:snow 10s linear infinite;
-ms-animation:snow 10s linear infinite;
animation:snow 10s linear infinite
}
@keyframes snow{
0%{background-position:0px 0px, 0px 0px, 0px 0px}
50%{background-position:500px 500px, 100px 200px, -100px 150px}
100%{background-position:500px 1000px, 200px 400px, -100px 300px}
}
@-moz-keyframes snow{
0%{background-position:0px 0px, 0px 0px, 0px 0px}
50%{background-position:500px 500px, 100px 200px, -100px 150px}
100%{background-position:400px 1000px, 200px 400px, 100px 300px}
}
@-webkit-keyframes snow{
0%{background-position:0px 0px, 0px 0px, 0px 0px}
50%{background-position:500px 500px, 100px 200px, -100px 150px}
100%{background-position:500px 1000px, 200px 400px, -100px 300px}
}
@-ms-keyframes snow{
0%{background-position:0px 0px, 0px 0px, 0px 0px}
50%{background-position:500px 500px, 100px 200px, -100px 150px}
100%{background-position:500px 1000px, 200px 400px, -100px 300px}
}
Alles anzeigen
Es empfiehlt sich, die verwendeten Bilder auf den eigenen Webspace oder Server zu ziehen und die Links anzupassen.
Alles Gute zum Nikolaus!