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

oldlock · #**102** 11-28-2011, 10:05 AM

Sorry if this has been reported allready. Nothing came up on the search. When using the fluid version on small laptops / ipads etc the logo overlaps the login boxes thus preventing users from using them .........

kfyonur · #**103** 11-28-2011, 10:56 AM

lights and snows didn't work..Firefox give these error

snowStorm is not defined
[Break On This Error] <script>snowStorm.excludeMobile = false;</script>

$("lights").style is undefined
[Break On This Error] $('lights').style.display = 'block';

$(document).snowfall is not a function
[Break On This Error] $(document).snowfall();

Mojosoft · #**104** 11-28-2011, 12:11 PM

Quote:

Originally Posted by oldlock

Sorry if this has been reported allready. Nothing came up on the search. When using the fluid version on small laptops / ipads etc the logo overlaps the login boxes thus preventing users from using them .........

I'm having the same issue.

Andrei29 · #**105** 11-28-2011, 12:30 PM

Anyone can help me to install this template as it seems too complicated for me. I would love to wow my members with a christmas feel.

ThevBNinja · #**106** 11-28-2011, 12:41 PM

Quote:

Originally Posted by EuroBeat2

I have to admit. I really like this style. I have decided to settle with original skin that featured "snow effect" using snow.js script. The style is simple and elegant. I see you guys are fond of these additional whistles such as countdown and lights. In my opinion they are really adding a lot of noises and stear away from the content. I have chosen not making this skin "Las Vegas" style, but settle with the snow only. Too much is not always good. I think for some it is already too much, but what the hell let me be provocative.

Thank you for the wonderful job though.

EB

Thank you for your kind works, I myself do not recommend to add a lot of effect to your site as it will sure slowdown site speed. For me, snow is more than enough.

Quote:

Originally Posted by CouponWCents

OK...figured it out...is there anyway to make the header wider?

Which version you are using on your board? If it's a fixed, it can be done easier and faster than fluid. The fluid contant 3 images, with one repeated to fit the screen resolutions.

Quote:

Originally Posted by oldlock

Sorry if this has been reported allready. Nothing came up on the search. When using the fluid version on small laptops / ipads etc the logo overlaps the login boxes thus preventing users from using them .........

Can I have link to your site? And I would be much appreciated if you can give me the exactly resolution, and which style version where the error happended.

Quote:

Originally Posted by kfyonur

lights and snows didn't work..Firefox give these error

snowStorm is not defined
[Break On This Error] <script>snowStorm.excludeMobile = false;</script>

$("lights").style is undefined
[Break On This Error] $('lights').style.display = 'block';

$(document).snowfall is not a function
[Break On This Error] $(document).snowfall();

Lights and snows didn't works. Hi guys, please, I really cannot see anything for giving any fixes if you are reporting me back with just this phrases. There are few people, who sent me a PM asking for help with script, I checked them through, and ended up that they did not follow the guide or upload to wrong space. If it doesn't work for ya.

PM me with an URL to your board. An user with admin style permission and link to the folders where you uploaded these style and scripts. I will try to help you with that.

Quote:

Originally Posted by Andrei29

Anyone can help me to install this template as it seems too complicated for me. I would love to wow my members with a christmas feel.

Where exactly did you stuck?

Please feel free to give more specific error, example: You can't download the attachment, you can't import the xml...etc.

This style is supported as always and it will be supported in anyway. However an update version is ready, I just need time to get feedback from my testers to see if there are any error to fix. It will be releases here, free as always. Just be patience a little bit.

Regards,
ThevBNinja

Mamma Scarlett · #**107** 11-28-2011, 01:22 PM

Quote:

Originally Posted by oldlock
Sorry if this has been reported allready. Nothing came up on the search. When using the fluid version on small laptops / ipads etc the logo overlaps the login boxes thus preventing users from using them .........

Can I have link to your site? And I would be much appreciated if you can give me the exactly resolution, and which style version where the error happended.

I have the same prob. Lets see if I can explain it with my bad english.

When I'm using my I-pad I cant klick on the log in or the other links in the upper right corner in the header. I can only klick on the links that dont have the "logo.png" file overlapping them. On my I-pad everything is much more narrower then on the PC, but you can see the same happening if you make your window narrower on the PC. You cant klick on the links..

The biggest problem is when a member wants to log in and cant klick to write the login-name..

Did that explain the problem?

CouponWCents · #**108** 11-28-2011, 01:42 PM

Quote:

Originally Posted by ThevBNinja

Thank you for your kind works, I myself do not recommend to add a lot of effect to your site as it will sure slowdown site speed. For me, snow is more than enough.

Which version you are using on your board? If it's a fixed, it can be done easier and faster than fluid. The fluid contant 3 images, with one repeated to fit the screen resolutions.

I am absolutely LOVING this so are my members!
I am using the fluid version. But as you see at www.couponwithcents.com The left side of the header (blue part) gets cut off and turns to black.

GMan55 · #**109** 11-28-2011, 08:33 PM

Quote:

Originally Posted by CouponWCents

I am absolutely LOVING this so are my members!
I am using the fluid version. But as you see at www.couponwithcents.com The left side of the header (blue part) gets cut off and turns to black.

Not sure what you mean.. are you talking about the header background? It looks fine here. Well, if you have a lower pixel resolution, then it will appear as if it is cut-off.
I had fluid before as well. I switched to fixed and then reduced the margins. I also made a few changes to the header background to make it compatible with 4:3 and 16:9 PCs and all pixels.. it's not that hard. Just have to make a couple of changes in additional.css and 1 change in style vars, that's it.

You can check out my website at

Code:

http://ftazeta.com

EDIT:
Wait, now I know what you mean. Just go to stylevars and increase the bottom value of titleimage_padding and all will be good.
EDIT2:
Well, that's one thing you might want to think about, but now my guess is that you are in fact talking about the screen resolution part.

Mamma Scarlett · #**110** 11-28-2011, 10:30 PM

I'm sorry Ninja, but I liked the first snow best.. And now i removed it and cant remember how to get it back. I have downloadet and uploaded snow folder but cant remember what to add where.. And now it's gone from your installation-guide.. Help...

CouponWCents · #**111** 11-29-2011, 02:54 AM

Quote:

Originally Posted by GMan55

Not sure what you mean.. are you talking about the header background? It looks fine here. Well, if you have a lower pixel resolution, then it will appear as if it is cut-off.
I had fluid before as well. I switched to fixed and then reduced the margins. I also made a few changes to the header background to make it compatible with 4:3 and 16:9 PCs and all pixels.. it's not that hard. Just have to make a couple of changes in additional.css and 1 change in style vars, that's it.

You can check out my website at

Code:

http://ftazeta.com

EDIT:
Wait, now I know what you mean. Just go to stylevars and increase the bottom value of titleimage_padding and all will be good.
EDIT2:
Well, that's one thing you might want to think about, but now my guess is that you are in fact talking about the screen resolution part.

Thanks so much!

I can't find titleimage_padding

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05203 seconds Memory Usage 2,390KB 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 (14)bbcode_code (11)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 (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (10)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 post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername 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 pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

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