The Arcive of Official vBulletin Modifications Site.

Countdown (Forum, Sideblock, vBa CMPS, Multiple Countdowns) · **Released**: 07-11-2011

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 - https://vborg.vbsupport.ru/showpost....&postcount=122

To show multiple countdowns on forumhome (screenshots) - https://vborg.vbsupport.ru/showpost....&postcount=158

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.

Trevor Matthews · #**102** 10-12-2011, 11:00 PM

Sorry, I installed the cms part and created a widget to go on the forum home page. I added it to the left of my three home page columns. All of the widgets that should be in the right side column are all displayed on the left

I deleted the widget but I could add it back in for a little while tomorrow if you wanted to see the problem.

Trevor Matthews · #**103** 10-12-2011, 11:04 PM

The site is www.television-magazine-forum.co.uk

Gemma · #**104** 10-13-2011, 07:27 AM

Quote:

Originally Posted by Trevor Matthews

Sorry, I installed the cms part and created a widget to go on the forum home page. I added it to the left of my three home page columns. All of the widgets that should be in the right side column are all displayed on the left

I deleted the widget but I could add it back in for a little while tomorrow if you wanted to see the problem.

Quote:

Originally Posted by Trevor Matthews

The site is www.television-magazine-forum.co.uk

If you PM me when you've set the widget up again I'll have a look and have a better understanding. Or take a screenshot if that is easier.

Did you upload the contents of the sidebar_countdown1.0.2.zip too? (those files are required)

Trevor Matthews · #**105** 10-13-2011, 08:34 AM

I actually did upload those but wasn't sure if I needed to.
All the files are in a folder called countdown.

I will try a screenshot for you.
Thanks.

wilburshere · #**106** 10-13-2011, 10:31 AM

i like it installed both forum sidebar and cms widget very nice would like the widget smaller 240px but i can live with it

Gemma · #**107** 10-13-2011, 11:44 AM

Quote:

Originally Posted by wilburshere

i like it installed both forum sidebar and cms widget very nice would like the widget smaller 240px but i can live with it

For the CMS widget? Replace the countdown_cms.css contents with this, should fit nicely into a 240px block. (though the font is a little small for my own liking)

You can play about with the css file (possibly change the font-family and some of the padding to suit)

Code:

#countdown {
         height: 42px;
         padding: 2px 0 2px 0;
}

.dash {
         width: 19px;
         height:38px;
         float: left;
         margin-left: 12px;
         padding-left: 12px;
         border-left: 1px solid;
         position: relative;
}
    
.first {
        margin-left: 18px;
        padding-left: 0;
        border-left: 0;
}

.dash .digit {
        font-size: 1.3em;
        font-weight: bold;
        float: left;
        font-family: Arial, sans-serif;
        color: #5C7099;
        position: relative;
}

.dash_title {
        position: absolute;
        display: block;
        bottom: 0px;
        right: 0px;
        font-family: Arial, sans-serif;
        font-size: 8px;
        color: #5C7099;
        text-transform: uppercase;
        letter-spacing: 0px;
}

GreyGhost · #**108** 10-14-2011, 06:47 AM

Hi Gemma,
First up... Excellent mod, Works great!

I did search and read most posts and didn't see this mentioned, so I appologize if it's already been asked and answered.

Is there a way of dropping the "WEEKS" altogether and changing the display to
DAYS | HRS | MINS | SECS

i.e. instead of 4 weeks, 6 days, 3 Hrs, 45 Mins, 10 Secs
it would display as... 34 Days, 3 Hrs, 45 Mins, 10 Secs

Doing it this way would allow for a narrower column without losing any real detail.

8-)

.

Gemma · #**109** 10-14-2011, 08:11 AM

Try this,

In the template replace the <script> part with something like this (ie add the omitWeeks part)

Code:

<script type="text/javascript">
jQuery(document).ready(function() {
    $('#countdown').countDown({
        targetDate: {
            'day':      00,
            'month':   00,
            'year':     2011,
            'hour':     00,
            'min':      00,
            'sec':      00
},
        omitWeeks: true
                 });
});
</script>

Then replace this part of the template:

Code:

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

With:

Code:

<div class="dash first days_dash">
                <span class="dash_title">Days</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
            </div>

And save.

You might need to then play about with the css file to fix .first as it probably won't be aligned properly, this will differ depending on the block width you are using but try changing the margin-left value.

Code:

.first {
    border-left: 0 none;
    margin-left: 17px;
    padding-left: 0;

Hope that makes sense

:erm:

GreyGhost · #**110** 10-14-2011, 09:21 AM

Thanks Gemma,

That works perfectly!

Attachment 133883

That's with a 230 sideblock, which will work on my CMS as well and I can still get it smaller with some minor font & dash changes. :up:

8-)

Gemma · #**111** 10-14-2011, 10:00 AM

Looks good. The only thing I don't like about your screenshot is the fact that Battlefield 3 is released in Australia before the UK

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06761 seconds Memory Usage 2,382KB 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 (9)bbcode_code (3)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 (8)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 (6)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 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 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:

9 благодарности(ей) от:
doctorsexy, fxdigi-cash, GreyGhost, Khriz, nektar, Sage Knight, tekram, WendM

The Arcive of Official vBulletin Modifications Site.

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