The Arcive of Official vBulletin Modifications Site.

About Developer · **Released**: 11-17-2011

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
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"> <!-- closing tag is in template navbar -->

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

kylek · #**162** 12-07-2011, 12:38 AM

Dont know if this is fixed in the planned update but will point it out, same on mine as it is on your demos.

On profile page, side column blocks the red comes down a bit of the ways on the sides:

Attachment 134884

Also I dropped the toplinks down to the navbar and so far cant find the setting for the padding around the username/password/log in area when unregistered, probably staring right at it but no luck so far. Hoping you can point it out when you have a spare monent.

Attachment 134885

And thanks for making this style for all of us to use!!

ThevBNinja · #**163** 12-07-2011, 12:52 AM

Firstly,

@Mamma Scarlett: Thank you for your great support and helping others here, I really much appreciated!

Quote:

Dont know if this is fixed in the planned update but will point it out, same on mine as it is on your demos.

On profile page, side column blocks the red comes down a bit of the ways on the sides:

it was made that way. In order to fit the widget and sidebar block on CMS and forumhome. The profile is customize-able in vbulletin and as it style is only a theme for season, limited time of year,I don't have it on the schedule for next upgrade.

Quote:

Also I dropped the toplinks down to the navbar and so far cant find the setting for the padding around the username/password/log in area when unregistered, probably staring right at it but no luck so far. Hoping you can point it out when you have a spare monent.

Add this line to your additional.css

Code:

.toplinks .logindetails {
    background: none repeat scroll 0 0 transparent;
 }

Secondly, honestly, I have very limit time at the moment due to large of custom projects, however I will try my best to bring a final version of this style will be available within 14.12.2011 (on my schedule) as my thank you to you guys for your support on this style. Growing pretty fast.

Please keep on touch!

Regards,
ThevBNinja

Mamma Scarlett · #**164** 12-07-2011, 05:56 AM

Quote:

Originally Posted by ThevBNinja

Firstly,

@Mamma Scarlett: Thank you for your great support and helping others here, I really much appreciated!

You're welcome. I think it's fun to be able to help others. But when it comes to the bigger problems I'm not much help. I had never touched a vBulletin forum as admin before June this year. I'm happy to help others with what little I can.

Krusty1231 · #**165** 12-07-2011, 06:43 AM

@ Spottysocks

Use this PSD. Open it and edit the font/color, and what you want it to say. Then save it as "logo.png" and upload it to \images\styles\xmas allowing overwrite.

SpottySocks · #**166** 12-07-2011, 12:47 PM

Quote:

Originally Posted by Mamma Scarlett

I see the same as before.

I don't mind helping.

Quote:

Originally Posted by Krusty1231

@ Spottysocks

Use this PSD. Open it and edit the font/color, and what you want it to say. Then save it as "logo.png" and upload it to \images\styles\xmas allowing overwrite.

Thanks guys, I have downloaded and changed the logo.psd file and re-uploaded it and overwrite. I refreshed page and really got my hopes up as it was there, next moment when I refreshed again it went back to that old logo. This is getting me down now. :lol: So close to giving up and uninstalling as I seem to be getting nowhere, but I love the theme and really want to use it without having this problem!!

This is a screenshot from now:

ThevBNinja · #**167** 12-07-2011, 01:19 PM

Quote:

Thanks guys, I have downloaded and changed the logo.psd file and re-uploaded it and overwrite. I refreshed page and really got my hopes up as it was there, next moment when I refreshed again it went back to that old logo. This is getting me down now. :lol: So close to giving up and uninstalling as I seem to be getting nowhere, but I love the theme and really want to use it without having this problem!!

This is a screenshot from now:

This theme is using the logo.png located at images/styles/xmas/

there are various ways to change the logo.

Note: Logo MUST HAVE a transparent bg.

1. Open the logo.psd. Edit your own text , own taste then reuplace it with current logo.png
2. You can even open the default logo.png in photoshop, the .png file have a transparent bg already, delete the current text, add your owns, replace it.

If you didn't change the structure of header, then I don't find any reason why the new logo doesn't work.

Joemadden1989 · #**168** 12-07-2011, 04:14 PM

Hi all,

This skin is fantastic! Thanks,

However i have an issue with this code :

Code:

<!-- Snow by thevBNinja.com -->



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

<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();
			$(document).snowfall({round : true, minSize: 5, maxSize:8}); 		


			$("#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>

If i have it in the hedinclude as above then the slow works, If i change it to this :

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();
			$(document).snowfall({round : true, minSize: 5, maxSize:8}); 		


			$("#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>


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

If i have it like this then the lights work!

I simply cannot get both to work at the same time..

Does anyone have idea ideas?

The error message i appear to get is [17:25:30.720] $(document) is null @ http://www.vs-uk.co.uk/forum.php:66

Thanks

Joe.

ThevBNinja · #**169** 12-07-2011, 05:24 PM

Hi,

THe problem with snow combine with lights will be fixed on next releases. However I need to find time from my curent schedules, then it will be when it's ready.

Regards and thanks,

kfyonur · #**170** 12-08-2011, 07:08 AM

new year is coming

Ath3na · #**171** 12-08-2011, 03:11 PM

Does anyone else have a problem with the snow hardly showing?

When you click on the login button you get the standard blank page for a moment, the snow looks perfect here.

Looking forward to seeing the next release. Keep up the good work

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.14350 seconds Memory Usage 2,397KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (15)bbcode_code (6)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)pagenav_pagelinkrel (11)post_thanks_box (1)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (11)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

Благодарность от:
kylek

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!