vBulletin LTS

← Back to vBulletin 4.x Template Modifications

Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns)
Mod Version: 1.0.4, by Gemma
vB Version: 4.x.x Rating: (19 votes - 4.89 average) Installs: 146
Released: 12 Jul 2011 Last Update: 22 Oct 2011 Downloads: 886
Not Supported Template Edits Additional Files Re-usable Code  

Someone PM'd me last week asking for the code I use for my countdown sideblock. So here is the basic countdown (doesn't include the images/blurb that screenshots/demo show)

This countdown uses the users PC clock and calendar to count down to a time and date.

What is it?
A sideblock on your forum index to countdown to a specific date/event.

1. Upload the contents on the zip archive to your server. Keeping the file structure as is.

countdown/js/jquery-1.4.1.js
countdown/js/jquery.lwtCountdown-1.0.js
countdown/js/misc.js
countdown/style/main.css

Change the settings of the countdown/js folder to CHMOD 775

2. Go to AdminCP > Forums and Moderators > Forum Block Manager > Add Block

Title - Countdown
Description - whatever you want
Content Type - HTML
Content - <div></div>
Template to use - block_countdown

3. Go to AdminCP > Styles and Templates > Style Manager > Add New Template

Title - block_countdown
Code:
<li>
    <div class="block smaller">
        <div class="blocksubhead">
            <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
            <span class="blocktitle">{vb:raw blockinfo.title}</span>
        </div>
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
        targetDate: {
            'day':      19,
            'month':    7,
            'year':     2011,
            'hour':     23,
            'min':      59,
            'sec':     59,
            }
    });
});
</script>
<div>
        <div id="countdown">
            <div class="dash first weeks_dash">
                <span class="dash_title">Weeks</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
</div>
</div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
Change this part to set the countdown target date

Code:
 'day':      19,
            'month':    7,
            'year':     2011,
            'hour':     23,
            'min':      59,
            'sec':     59,
Save the block.

4. Go to AdminCP > Style and Templates > Style Manager > StyleVars > forum_sidebar_width and change the width to atleast 270px

You can change the colour of the digits/text to suit your forum by changing references to #5C7099 in the main.css file

If you are using vBOptimise go to AdminCP > vBOptimise > Flush Cache

To have more than one countdown

Create a new template called block_countdown2

Code:
<li>
    <div class="block smaller">
        <div class="blocksubhead">
            <a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
            <span class="blocktitle">{vb:raw blockinfo.title}</span>
        </div>
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown2').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':     0000,
            'hour':     00,
            'min':      00,
            'sec':     00,
            }
    });
});
</script>
<div>
        <div id="countdown2">
            <div class="dash first weeks_dash">
                <span class="dash_title">Weeks</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
</div>
</div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
Set the targetDate data and save

For reference if making more blocks - (jq('#countdownX').countDown({ and <div id="countdownX"> are used to call additional countdowns).

Create a new forum block in the same way as before but make the template to use: block_countdown2

To Display on vB Advanced CMPS -

Spoiler (click to open)


Quote by Gemma
I'll install vBAdvanced and have a look
This is based on your CMPS columns being set at 240px (if you change them to a wider or narrower setting you'll need to work out the css changes yourself)

Download the zip archive in the OP and upload the files. (don't change the file or folder structure)

AdminCP > vBa CMPS > Add Module

Add a new Template Module

Give it a name and set it to active.

Template to include: adv_portal_countdown
Template Content:
Code:
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function() {
jq('#countdown').countDown({
        targetDate: {
            'day':      00,
            'month':   00,
            'year':     0000,
            'hour':     00,
            'min':      00,
            'sec':      00,
            }
    });
});
</script>
<div>
        <div id="countdown">
            <div class="dash first weeks_dash">
                <span class="dash_title">Weeks</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
Set this part to activate the countdown

Code:
targetDate: {
            'day':      00,
            'month':   00,
            'year':     0000,
            'hour':     00,
            'min':      00,
            'sec':      00,
            }
Set usergroup permissions. Save.

AdminCP > vBa CMPS > Edit Pages

Then add it to whatever page you want it to appear.

Close


To show multiple countdowns on forumhome (screenshots

Spoiler (click to open)


we have 6 league games
Ah ok, you can check out what I've done for 4 and see how it looks - I'll go and duplicate a couple of the countdowns now. I've attached a screen below and it is on the dark theme of my site if you want to check it out live.

Let me know if it looks ok

Edit: I can also omit the number of weeks for you if the countdowns are going to be less than 100 days - but might still need to play with the font sizes
Attached Thumbnails
Click image for larger version Name: boxed.jpg Views: 161 Size: 59.7 KB ID: 135107   Click image for larger version Name: boxed2.jpg Views: 116 Size: 44.6 KB ID: 135109  

Close
) -

Spoiler (click to open)


Cool

This code should help you get started, any problems just shout and I'll look in the morning

Code:
<div id="wgo" class="collapse wgo_block block">
<script language="Javascript" type="text/javascript" src="clientscript/jquery/jquery-1.4.4.min.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
        <center><h2 class="blockhead">BLOCK TITLE</h2></center>
        <div class="blockbody formcontrols floatcontainer">
<table align="center">
<tr>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
    <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown1').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':     0000,
            'hour':     00,
            'min':      00,
            'sec':      00
           },
        omitWeeks: true
                 });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
        <div id="countdown1">
            <div class="dash first days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
</div>
</div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
    </center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
 $('#countdown2').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':     0000,
            'hour':     00,
            'min':      00,
            'sec':     00
          },
        omitWeeks: true
                 });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
        <div id="countdown2">
            <div class="dash first days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
</div>
</div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
</center></td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
 $('#countdown3').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':     0000,
            'hour':     00,
            'min':      00,
            'sec':     00
           },
        omitWeeks: true
                 });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
        <div id="countdown3">
            <div class="dash first days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
</div>
</div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
</center>
</td>
</td></tr></td></table>
<table align="center">
<tr>
<td>
<center>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown4').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':     0000,
            'hour':     00,
            'min':      00,
            'sec':     00
          },
        omitWeeks: true
                 });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
        <div id="countdown4">
            <div class="dash first days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
</div>
</div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
    </center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
 $('#countdown5').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':     0000,
            'hour':     00,
            'min':      00,
            'sec':     00
          },
        omitWeeks: true
                 });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
        <div id="countdown5">
            <div class="dash first days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
</div>
</div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
</center></td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
    <div class="block smaller">
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
  $('#countdown6').countDown({
        targetDate: {
            'day':      00,
            'month':    00,
            'year':     0000,
            'hour':     00,
            'min':      00,
            'sec':     00
          },
        omitWeeks: true
                 });
});
</script>
<div align="center">
<img src="LINK TO YOUR IMAGE" alt="IMAGE TITLE" width="150" height="63" /></a><br/><br/>
<span class="digit"><b><a href="OPTIONAL URL LINK">COUNTDOWN TITLE</a></b></span><br/><br/></div>
        <div id="countdown6">
            <div class="dash first days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash hours_dash">
                <span class="dash_title">Hrs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash minutes_dash">
                <span class="dash_title">Mins</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
            <div class="dash seconds_dash">
                <span class="dash_title">Secs</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>
        </div>
</li></center></td></tr></center></table></div></div>
All you should need to do is set up the 6 timers, and replace the instances of BLOCK TITLE, LINK TO YOUR IMAGE, IMAGE TITLE, OPTIONAL URL LINK and COUNTDOWN TITLE where applicable or remove them.

Close


If you want to add images/videos etc to your countdown all you need to do is add some basic code to the template. Search for </script><div> and after that you would add something like.
Code:
<img alt="" title="" src="URL TO YOUR IMAGE" width="150" height="225"><br/><br/>
<iframe width="240" height="160" src="EMBEDDED YOUTUBE VIDEO LINK" frameborder="0" allowfullscreen></iframe><br/><br/>
</div>
If you are upgrading from a previous version, upload the contents of the zip file and replace the template(s) you are using (ie block_countdown, block_countdown2, adv_portal_countdown etc). Set the targetDate.

History
1.0.4 - Reverted back to using jquery-1.4.1.js
1.0.3 - Now using jquery-1.6.1.min.js and added noConflict to script
1.0.2 - Cleaned up code, added instructions to zip. Also instruction within thread on how to make CMS widget or have more than one countdown.

If anyone wants to further develop any of my addons, you are free to do so.

Download

File Type: %1$s sidebar_countdown1.0.4.zip (47.8 KB, 664 downloads)

Screenshots

Click image for larger version Name: sideblock.jpg Views: 2496 Size: 68.7 KB ID: 130953   Click image for larger version Name: arcade_count.jpg Views: 1340 Size: 137.3 KB ID: 133705   Click image for larger version Name: count.jpg Views: 1054 Size: 70.8 KB ID: 133706   Click image for larger version Name: countdown2.jpg Views: 1186 Size: 43.9 KB ID: 133714  

Click image for larger version Name: countdowns.jpg Views: 1254 Size: 78.4 KB ID: 133751  

Similar Mods

vBulletin Forum Sideblocks Show Poll In Forum Sideblock vBulletin 4.x Add-ons
vBulletin Forum Sideblocks Tinypic Uploader Forum SideBlock vBulletin 4.x Add-ons
vBulletin CMS Widgets IMDb Search Forum SideBlock vBulletin 4.x Add-ons
vBulletin Forum Sideblocks MegaUpload FileBOx Forum Sideblock vBulletin 4.x Add-ons
vBulletin Forum Sideblocks Imageshack Uploader Forum SideBlock vBulletin 4.x Add-ons

vblts.ru supports vBulletin®, 2022-2024