Christmas Gift for Creators - Make your network snow + on/off function(TIP)

[Elson Tan]

Hi , Christmas Is coming , you should be looking for ways to decorate your network.

Why not make your Ning SNOW?

(p/s original post by  Mat on Christmas Snow : Make it rain - Tip , this tip will be using the same script from Mat's post but one more script that enables on/off function)

 

Just copy the two scripts below and paste it into your Custom Code:

<script type="text/javascript" src="http://elsodev.com/projects/snow/snowstorm-min.js"></script>
<script type="text/javascript" src="http://elsodev.com/projects/snow/settings-dpro.js"></script>

(p/s i have hosted snowstorm-min.js from SchillMania on my server elsodev.com)

The first script is the core script that enables snow using jQuery in your site

while,

the second script that i made enables members to Turn On/Off the snow(as some members may not like the snowing effect)

It will inject a button just below your network Ning bar and stay in a fixed position(you can change it in CSS).

 

 

CSS , place this css code into your Design Studio/Appearance:

#snow-btn{
position:fixed;
top:50px;
left:-20px;
padding:10px 20px 10px 30px;
background-color:rgba(0, 0, 0, 0.7);
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
display:block;
color:#ddd!important;
text-decoration:none!important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
}

#snow-btn:hover{
color:#fff!important;
left:0px;
background-color:rgba(0, 0, 0, 1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000,endColorstr=#FF000000);
}

This is the CSS for the On/Off button.

NOTE!

This script (http://elsodev.com/projects/snow/settings-dpro.js) disables snow storm on profiles , if you want it to snow in profiles too , change it to

http://elsodev.com/projects/snow/settings-epro.js

And , if you enabled it on profiles , you will need to add the css into Custom code like this:

<style type="text/css">

 

#snow-btn{
position:fixed;
top:50px;
left:-20px;
padding:10px 20px 10px 30px;
background-color:rgba(0, 0, 0, 0.7);
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
display:block;
color:#ddd!important;
text-decoration:none!important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
}

#snow-btn:hover{
color:#fff!important;
left:0px;
background-color:rgba(0, 0, 0, 1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000,endColorstr=#FF000000);
}

</style>

 

Why ? because some members have different CSS codes for their profiles , that means your site main css will not be used on their profiles.

 

 

That's all!

Hope you like it and enjoy your holidays.

 

Check out my other post as well :

engage your members by rewarding them points!

[Ash Ketchum [01]]

i don't know how to use it <.< my ning it's in italian

[Elson Tan]

I'm not sure what Custom Code is called in Italian. but it is where you put the scripts and google analytics code.

[Ash Ketchum [01]]

Thanks ^^

[Ryan Sayer]

Awesome!

[MICHAEL GRIST]

THANKS

[Angela Soto]

Thank you! Used it on underworldrp.com

[Ryan Sayer]

it would be super cool if there was a way to have the snow pile up at the bottom every so often.

Anyone know if this is possible?

[dave]

Nice Tip Elson :)

[Tim Atkinson]

Excellent - thank you very much, Elson!

[doone]

+1 Your tips are better than great, Elson!

[Patrick Chappelle]

Thank you Elson!