Скачать Pure Christmas 2012 (Add-ons Snow with options, light, countdown)

[Serberg]

Pure Christmas 2012 (Add-ons Snow with options, light, countdown)

[источник]



Новогодний шаблон для форума vb 4.1.8. Архив с шаблоном содержит несколько папок, каждая из которых соответствует названию архива инструкции.

Инструкция с орга:

Нажми для просмотра

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!

Pure Christmas 2012 (4.13 Мб)

[Fanny]

скриншоты обновите

[Serberg]

Все обновил