Add-ons Installations
1. Snow on your forum with options to control
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:
- 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 download bormotuhi.net */
#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
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!