xF2 Template Modification WINTER THEMED FORUMS

Apnix

Active member
Registered
Joined
Mar 5, 2020
Messages
35
Points
18

Reputation:

Hello everyone. I was experimenting with some CSS code for a while I have finally got my head around it :)

Today I bring you guys.....
Snow theme on your forums and the best part is. There is no addon required, works on every page, and is just a few lines of code.

Preview:
HLhmiwzv.gif



So now you're probably wondering... How the frick did he do this I need this (yes I know I'm a swag coder)

Step 1:
Go to: Admin Panel-> Appearance -> Styles -> Select your style -> Templates -> PAGE_CONTAINER template

Step 2:
Search for a <head> tag on the page_container.

Step 3:
Add a new blank line and add the following code:

CSS:
<!-- SNOW PARTICLES -->
    <style>
.editor-stage .snow {
  height:50px;
  background: #fff;
}
.snow{
  position:fixed;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:100vh;
  background: none;
  background-image: url('https://s3-eu-west-1.amazonaws.com/static-ressources/s1.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s2.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s3.png');
  z-index:100;
  -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;}
}
</style>
<!-- END OF SNOW PARTICLES -->

With that done, here comes Step 4:

Scroll to the bottom of your PAGE_CONTAINER.
Make a new line using your enter key and add this ONE line of code
HTML:
<div class="snow" />
Now save your PAGE_CONTAINER template, refresh your site, and be amazed by how sexy it is looking;) (just like me)
 

Pr0fesseur

Moderator
Staff member
Moderator
+Lifetime VIP+
V.I.P Member
Collaborate
Registered
Joined
Nov 20, 2019
Messages
361
Points
103

Reputation:

saw this is actually posted online... on another forum but good find :)
 
Top