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

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Styles (https://vborg.vbsupport.ru/forumdisplay.php?f=247)

- - Suite Style - [ThevBNinja.com] Pure Christmas 2012 (Add-ons Snow with options, light, countdown) (https://vborg.vbsupport.ru/showthread.php?t=274245)

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

http://thevbninja.com/releases/purebanner.png

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
https://vborg.vbsupport.ru/external/2011/11/48.png1. 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

Code:

<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

Code:

<!-- 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

Code:

{vb:raw template_hook.forumhome_wgo_pos5}

add above it:

Code:

<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

Code:

<!-- 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:

Code:

<div class="above_body"> 

Add:

Code:

<div id="lights">

 <!-- lights go here -->

</div>

Add the following css to your additional.css

Code:



/* 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

Code:

.toplinks {

right: 90px;

}

change it to

Code:

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

Code:

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

Add below:

Code:

<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

thank you so much looks nice....

Great thank you. Look forward to trying the fluid version :)

tagged. also looking forward to the fluid version. :D

Fluid version added!

Thanks for the fluid version!

nice one, marked installed

Thank You so much, marked as installed :)

Looking forward to seeing the countdown timer and snow !

Addon for snow is there.

Regards,
ThevBNinja

Loooove the snow! <3

Thanks for the Snow, looks good!

Looking forward to the countdown. ;)

Wow, This theme looks excellent. better than any Christmas theme I have seen so far. Tagged and Nominated :)

Two requests though,
1. Can you give us the code to add the Christmas lights (as shown in the snow link?)
2. This theme needs a background to finish it off. (nothing that's too big like hundreds of kilobytes or too small and cluttered, But something plain yet in the holiday spirit. :D

Added "Christmas Light" Addon.

Quote:

Wow, This theme looks excellent. better than any Christmas theme I have seen so far. Tagged and Nominated

Two requests though,
1. Can you give us the code to add the Christmas lights (as shown in the snow link?)
2. This theme needs a background to finish it off. (nothing that's too big like hundreds of kilobytes or too small and cluttered, But something plain yet in the holiday spirit.

1. I was doing the same thing before you asked, lol. Enjoy it, also please read all the notes carefully.
2. it was noted.

Quote:

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.

To anyone, if you enjoy my style and willing to support our hard work, install it, rate it or simply post a thanks. I would be really appreciated.

Quote:

Originally Posted by ThevBNinja (Post 2269744)

Added "Christmas Light" Addon.

thanks, :D I hope more people come forward and offer you donations :) its a really nice style. now all it needs is a good background. By the way, try to keep this style updated, you know once every year around this time. :)

Quote:

thanks, I hope more people come forward and offer you donations its a really nice style. now all it needs is a good background. By the way, try to keep this style updated, you know once every year around this time.

Enjoy the style, donation is not a must. lol. I'm sharing it free with all the addons.

Countdown and bg to be added soon, need to find some free time from my schedule.

Can this work on any other styles ? and what would i have to do if wanted to add it to all my other styles.

If you are talking about the add-on then absolutely Yes, just upload the folder to the correct place and it works

here is "images/styles/xmas/snow".

and "images/styles/xmas/light".

If I may - there is a en error in the instructions. The folder name is "Christmas Light"....you need to rename it just "light"....or at least I had to.

Very excellent skin.

Thank you again for this.

Quote:

Originally Posted by Krusty1231 (Post 2269760)

I forgot to change the folder name back when packed it.

Thank you for your report, it's fixed now.

Enjoy the style and again, thanks.

Regards,

ok i dont see the light maybe i have to change this in christmas.css file

Code:

background:transparent url(http://127.0.0.1/cms/images/styles/xmas/light/bulbs-50x50-fragments.png) no-repeat 0px 0px;

Good note.

I used additional.css instead of add the css in to the template so everyone can use it then forgot this url.

Added to the guide.

Quote:

Originally Posted by Erica1977 (Post 2269763)

ok i dont see the light maybe i have to change this in christmas.css file

Code:

background:transparent url(http://127.0.0.1/cms/images/styles/xmas/light/bulbs-50x50-fragments.png) no-repeat 0px 0px;

hmm that didnt work i have it in this forums/images/lights

Quote:

Originally Posted by ThevBNinja (Post 2269764)

Good note.

I used additional.css instead of add the css in to the template so everyone can use it then forgot this url.

Added to the guide.

i added the css in additional like you instruct it and still not showing.

Can you PM me with a link to your site?

Thank you

Quote:

hmm that didnt work i have it in this forums/images/lights

Already answered

Quote:

If you are talking about the add-on then absolutely Yes, just upload the folder to the correct place and it works

here is "images/styles/xmas/snow".

and "images/styles/xmas/light".

If you are going to upload it to different folder then you must to edit christmaslights.js and the links in headinclude to correct the url as well.

Quote:

Originally Posted by ThevBNinja (Post 2269768)

Can you PM me with a link to your site?

Thank you

Already answered

If you are going to upload it to different folder then you must to edit christmaslights.js and the links in headinclude to correct the url as well.

ok pmed you.

This is truly amazing vbninja. Nominated for MOTM!

Can you help me with one issue though? When the snow effect it on, the scrollbars seem to keep jerking. This happens if I move the mouse towards the left, right and bottom of the screen. Any ideas how I can fix that.

Also, if it's not too much to ask, is it possible to make a user-based option to enable and disable the snow-effect? Not sure how hard it is, but it would be awesome if that was added. So users with slow PCs can turn it off if they want and it won't lag on their PC.

This is truly an amazing piece of work! Hats off!!

The javascript as I noted will slow down your PC and based on browser's render. It works fine for me in this case, can I have an url to your site?

I will think about an options to switch it on/off as it will be more flexible.

Thank you for your support and kind words, really appreciated.

Regards,
ThevBNinja

As requested, an option to turn on/off snow effect for member and background will be available to download soon.

Regards,
ThevBNinja

Excellent design..Marked as installed..

Thank you guys for your support!

New snow effect with options to turn on/off will be release today, keep on touch.

Also mark as installed and rate it if you enjoy my style.

Regards,
ThevBNinja

Note: Add-ons installation will be moved into a .txt after to save place.

Awesome!!
BTW, vBNinja - it seems there is still a snow scroll jerking issue.. I've reinstalled the fluid style with no changes and the issue is still there, bud..
Sorry to trouble you again, but any clues on that?

Thanks.

EDIT: Nevermind, I got it fixed!

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02613 seconds Memory Usage 1,876KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (14)bbcode_code_printable (10)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: