- Joined
- Mar 5, 2020
- Messages
- 35
- Points
- 18
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:
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:
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
Now save your PAGE_CONTAINER template, refresh your site, and be amazed by how sexy it is looking (just like me)
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:
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" />