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!

[classic]

+1 

[Debby Bruck]

What is the difference between "CUSTOM CODE" and "Advanced studio appearance CSS"?

[Elson Tan]

Yes correct. :D

[Debby Bruck]

Thanks so much. I finally found the place for "custom code" and was able to "let it snow" on my Website. 

[Rowald]

I love this! Great job Elson!

[Elson Tan]

glad you all love it.

[Rowald]

Hey Elson, the button goes under the banner, can you make it on top?

[Elson Tan]

you can specify its position in the css code (#snow-btn)

[Christine Agro]

Love the snow!!!!! Thank you.  I love that it moves with your cursor. 

[MICHAEL GRIST]

brilliant

[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.