Suite Style - [ThevBNinja.com] Pure Christmas 2012 (Add-ons Snow with options, light, countdown)

Hello everyone,

Christmas is coming and we've decided to bring you guys here an early gift.

The very first Christmas Style that offer you totally flexibility to custom the style with many value add-ons and you got them all for FREE!

Theme features:

• Fixed and Fluid (Note: the Fixed version works best - recommended).
• Theme made for vbulletin 4.1.8 but it should works with ealier 4.1.x versions as well. (Report me if you found any conflict).
• Suite compatiable - CMS / Forum / Blogs
• Custom layout
• Custom logo (included text font and PSD).
• Custom icons.

Theme add-ons:

• Countdown to christmas
• Snow effect
• Christmas Light

Screenshot: via attachment
Live demo : here
Live demo Fluid: here

Installations

• Download and unzip the attachment from vbulletin.org
• Upload folder "xmas" to your forum/ images/styles
• Import the XML, remember to stick "ignore style version" if needed.
• Mark as installed.

Add-ons Installations
1. Snow on your forum with options to control: Demo
Using jquery snowfall from here

• Uninstall the old snow add-on if you did the install by remove this line from "headinclude' template
  
  

  <script type="text/javascript" src="images/styles/xmas/snow/snow.js"></script>

• Download and unrar snow2.zip from attachment.
• Upload the folder "snow2" to yourforum/ images/styles/xmas/
• Go to your ACP/ Styles & Templates/ Search in template/ Search for "headinclude".
• In the end of template headinclude add these line

<!-- Snow by thevBNinja.com -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src='images/styles/xmas/snow2/snowfall.min.jquery.js'></script>
	<script type='text/javascript'> 	
		$(document).ready(function(){
			//Start the snow default options you can also make it snow in certain elements, etc.
			$(document).snowfall();
			
			$("#clear").click(function(){
				$(document).snowfall('clear'); // How you clear
			});
			
			$("#round").click(function(){
				$(document).snowfall('clear');
				$(document).snowfall({round : true, minSize: 5, maxSize:8}); // add rounded
			});
			
			$("#shadows").click(function(){
				$(document).snowfall('clear');
				
				
				$(document).snowfall({shadow : true, flakeCount:200}); // add shadows
			});

			$("#roundshadows").click(function(){
				$(document).snowfall('clear');
				$(document).snowfall({shadow : true, round : true,  minSize: 5, maxSize:8}); // add shadows
			});
			
			$("#collection").click(function(){
				$(document).snowfall('clear');
				
				
				$(document).snowfall({collection : '.collectonme', flakeCount : 250});
			});
		});
		 </script>
<!-- End Snow by ThevBNinja.com -->

In template "forumhome" search for

{vb:raw template_hook.forumhome_wgo_pos5}

add above it:

<div id="wgo_snow" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="images/styles/xmas/snow2/snow.png" alt="{vb:rawphrase x_statistics, {vb:raw vboptions.bbtitle}}" />Snow Effect Options</h3>
                <input style="background:#FFF;border: 0 none;" type="button" id="clear" value="+ Click to clear"/>
		<input style="background:#FFF;border: 0 none;" type="button" id="round" value="+ Rounded"/>
		<input style="background:#FFF;border: 0 none;" type="button" id="shadows" value="+ Shadows"/>
		<input style="background:#FFF;border: 0 none;" type="button" id="roundshadows" value="+ Rounded Shadows"/>
		<input style="background:#FFF;border: 0 none;" type="button" id="collection" value="+ Snow Collection"/>
			</div>

You are done. Use the options at the end of statistic box to change the snow.

2. Christmas Light: Demo
- Using christmas light from Schillmania

Download and unrar light.zip from attachment
Upload the folder "light" to yourforum/images/styles/xmas
Go to your ACP/ Styles & Templates/ Search in template/ Search for "headinclude".
In the end of template headinclude add this line

<!-- for the Snowstorm homepage, allow the demo to run on iPhone and mobile devices. -->
<script>snowStorm.excludeMobile = false;</script>
<script src="images/styles/xmas/light/soundmanager2-nodebug-jsmin.js"></script>
<script src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script src="images/styles/xmas/light/christmaslights.js"></script>

In your header template:

After:

<div class="above_body"> <!-- closing tag is in template navbar -->

Add:

<div id="lights">
 <!-- lights go here -->
</div>

Add the following css to your additional.css

/* Christmas Light for vBulleti by thevBNinja */

#lights {
 position:absolute;
 border-top:1px solid #006600;
 left:0px;
 top:0px;
 width:100%;
 height:205px;
 overflow:hidden;
 z-index:1;
 display:none;
}

.xlsf-light {
 position:absolute;
 margin-top:-1px;
}

.xlsf-fragment {
 position:absolute;
 background:transparent url(images/styles/xmas/light/bulbs-50x50-fragments.png) no-repeat 0px 0px;
 width:50px;
 height:50px;
}

.xlsf-fragment-box {
 position:absolute;
 left:0px;
 top:0px;
 width:50px;
 height:50px;
 *width:100%;
 *height:100%;
 display:none;
}

.xlsf-cover {
 position:fixed;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 background:#fff;
 opacity:1;
 z-index:999;
 display:none;
}

.special {
 display:none;
 font-size:x-small;
 color:#999;
}

In the same additional.css

find

.toplinks {
right: 90px;
}

change it to

.toplinks {
right: 90px;
z-index:999999;
}

You are done!

3. Countdown to Christmas: Demo
This will add a very simple countdown on your site, it made it to fit this xmas skin and I love it to be simply, if you are looking for more fancy countdown (bigger with effect), just wait, I'm working on a template modification for this.. Now here we go

In your "header" template:

Find:

<div id="header" class="floatcontainer doc_header">

Add below:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

dateFuture = new Date(2011,11,24,0,00,0); //set time

function GetCount(){

        dateNow = new Date();                                                                        //grab current date
        amount = dateFuture.getTime() - dateNow.getTime();                //calc milliseconds between dates
        delete dateNow;

        // time is already past
        if(amount < 0){
                document.getElementById('countbox').innerHTML="Merry Christmas!";
        }
        // date is still good
        else{
                days=0;hours=0;mins=0;secs=0;out="";

                amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

                days=Math.floor(amount/86400);//days
                amount=amount%86400;

                hours=Math.floor(amount/3600);//hours
                amount=amount%3600;

                mins=Math.floor(amount/60);//minutes
                amount=amount%60;

                secs=Math.floor(amount);//seconds

                if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
                if(days != 0 || hours != 0){out += hours +" hours"+((hours!=1)?"":"")+", ";}
                if(days != 0 || hours != 0 || mins != 0){out += mins +" min"+((mins!=1)?"":"")+", ";}
                out += secs +" until Christmas!";
                document.getElementById('countbox').innerHTML=out;

                setTimeout("GetCount()", 1000);
        }
}

window.onload=function(){GetCount();}//call when everything has loaded

//-->
</script>
<div style="color:#FFF;font-weight:bold;margin-left:110px;margin-top:10px;position:absolute;z-index:20000;" id="countbox"><!-- Countdown by thevBNinja --></div>

Done!


Copyright:

• Used some graphics from site5. We have approval from them to do that.
• Template designe and code by thevbninja.com. You are free to re-post, releases it anywhere outside vb.org but you Must keep the copyright text in the footer of theme.

We've worked hard on this to bring you a real good theme so if you enjoy and use it in your forum, please

*** Mark it as installed ***

*** Rate it 5stars ***

*** Nominate it ***

like or even a thanks is means a lot to us so we can continues release free themes here at vb.org.

Also donation is very welcome, we can't not give you any extras thing as we're giving out all the features here as free, but we will give you a warm thank you and the right to remove our copyright text on the theme.

Lastly, Merry Christmas Early and Wish you a Merry Christmas and may this festival bring abundant joy and happiness in your life!.

Regards,
ThevBNinja Group

Q&A

[S]Q: Why don't you make a more fancy background?
A: We don't want your site will be something with load of graphics and full of colors.
You may want to do the background yourself with related content to your site. Anw if the request is high, I will make it.[/S] As requested, a SET of background will be available soon, mark as install to get the latest update.

Q: Does these add-ons slow down my forum?
YES and YES. I do not recommend you to use it expect the count down script. Or you can put it in your site just for one day like Xmas. It should be better.

Q: Why don't you intergate all these add-on to the style, it save us ton of time!
A: Because I want you are the one who decide what's needed for your site, each of add-ons here can be release as a seperate template mod but I included them all here for you, you can get exactly what you need faster and easier.

History:
21.11: Addon Snow version 2 with the options to turn on/ off, rounded snow, add shadow to snow.
20.11: Addon Countdown to Christmas
20.11: Addon Christmas Light added.
19.11: Addon Snow falling on your forum added.
19.11: Update fluid version
18.11: Releases

[setishock]

I downloaded it but did not install. I would prefer to see one that is not a demo but rather a site that is active. Did not mean to offend ninja-san. Ittekimasu

[ThevBNinja]

I don't see the different between a live demo vbulletin board than a regular site, except the number of posts. j/k

anw isn't it much better to install it as a test style on your board then If you don't feel happy with it, remove it than look at it on someone's else board?

Regards,

[GMan55]

Yeah, I'm not really sure what is a better proof that it works great than the demo either . I installed this as a test on my forum and it works great and got great reviews on it from the members!!

[Markos]

thanks for the style but strangely i cant get the snow or countdown to work :S

[ThevBNinja]

thanks for the style but strangely i cant get the snow or countdown to work :S

I will check these script later today and release a fix (if needed) with an background set, then please keep on touch.

Regards,
ThevBNinja

[RobbieZ]

You say the code was done by yourself, but christmas lights and snoweffect was created by other people along with Scott Schiller.

I think you need to change that!

[ThevBNinja]

Originally Posted by RobbieZ

You say the code was done by yourself, but christmas lights and snoweffect was created by other people along with Scott Schiller.

I think you need to change that!

Hello,

Is there any line that I wrote the javascripts was coded by myself?

Christmast light have the link to original site by the author, also the snow. (edited, checked that I added the new link for snow to my site, cuz It has some new functions in forumhome).

Along that

And the Christmas Lights?
The christmas lights are a separate experimental script which also has an example. It is undocumented, but the script can be modified to taste if you're the adventurous type.

They didn't write the guide to implement christmas light then I wrote it for vbulletin.

If you notice that in vbulletin template modifications section, there are a lot of mods used jquery effect to creat custom effect for vbulletin as mine. And here is the copyright note for Snow1 and Christmas Light

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.

Here were the copyright in .js for

/*
DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------

Initializes after body onload() by default (via addEventHandler() call at bottom.)
To customize properties, edit below or override configuration after this script
has run (but before body.onload), eg. snowStorm.snowStick = false;

*/

In my side, I think I'm doing nothing wrong with the code.

Correct me If I'm wrong.

Regards,
ThevBNinja

[RobbieZ]

Then you would need to change this accordingly

Copyright:

Used some graphics from site5. We have approval from them to do that.
Design and code by thevbninja.com.

[ThevBNinja]

Hmm I wrote this copyright before releasing add-on one day.

Then it was applying to template code and design by myself.

The javascript code has been modified to work with vbulletin, and custom template with copyright still remains on the .js without any changes.

However, it's added.

[RobbieZ]

Thanks. Installed