vBulletin Forum Sideblocks - VC_Countdown (FORUM BLOCK)

D E S C R I P T I O N

Countdown timer for forum sidebars that is configurable from the admin control panel. This countdown timer will calculate the remaining time left to reach your targeted event according to the GMT Time Zone Offset that you have pre-set in the admincp (VC_Countdown options). This countdown will expire at the same moment in time for all viewers, regardless of their separate time zones.

You can count down to any future month/day/time within the next 12 months.

This countdown timer is ideal for counting down to:
- have competitors meet at the same time for tournaments on gaming servers (which is what I have used it for)
- for fixed term offers
- for items available in X days
- for sale begins in X days time
or for whatever else tickles your fancy.

This is a no-frills countdown timer but there are no files to upload to your server and there is no need to fiddle around with templates and codes to adjust the countdown expiry date.
You can easily adjust this countdown display to suit forum sidebar widths from 165px to 300px.

I N S T R U C T I O N S

1. Import Product
Plugins & Products / Manage Products / Add/Import Product
Import: product-vc_countdown.xml

2. Create Forum Block
Forums & Moderators / Forum Blocks Manager / Add Block

Select Block Type: Custom HTML/PHP
Title: Event Timer (or whatever you prefer)
Description: VC_Countdown Event Timer
Content Type: HTML
Content: <div></div>
Template to use: block_VC_Countdown

3. Configure VC_Countdown
Admincp / Settings / Options / VC_Countdown

________________________________________

PLEASE NOTE: I have only tested this as working on 4.0.8 PL4.
Confirmed working well on 4.1.3 by rammieone

________________________________________

Updates:
v1.0.3
Removed superfluous css
Added css to enable proper font-color control over all four strings of text
Added ability to include background image
v1.0.4
Added 4 levels of bgimage transparency
Added bgimage 100% height & width of forum block container
Removed option for image:repeat
Added padding options for between (Event Name & top of forum block) and (Event Name & Countdown Numbers)
v1.0.5
Removed "X Days from Now" option (If you don't experience save/default problems using version 1.0.4 there is no need to update to 1.0.5)

[midnz]

Originally Posted by jasff

Thanks midnz,

Yes, the height is what I can't get to adjust. I wanted to know where to get into the coding to adjust.

I saw Ba'al where he mentioned changing the height in coding.
I don't know where to access that.

I'll still try and play around in the paddings, but seems to cut the numbers off and the cell height doesn't expand.

1. AdminCP > 2. Styles & Templates > 3. Search in templates > 4. ... type... block_VC_Countdown ... and press the "Find" button > 5. ... double click on that result to bring the template in to view. You can make edits to the font sizes in there.


If you screw it up you can depress the "Revert" button to reset that template back to the original one. You'll find that "Revert" button at 4. in the above directions. Good luck

[jasff]

Thank you! I found where to change the box to 220.

Next questions is how to allign and adjust font? Here are the couple things I want to do:

1. When I expand the box from 80 to 220, the text is top center alligned. Where and how can I center the text in the coding?

2. I want to bold the font so that it stands out more. Possible to change the font size? I would need specifics if possible on how to do this.

This would be a great start. Thanks again micnz.

[midnz]

Originally Posted by jasff

1. When I expand the box from 80 to 220, the text is top center alligned. Where and how can I center the text in the coding?

The following HTML code is just one part of the CSS code (code within the STYLE tags) that affects one part of the Counter. You'll find the below piece of CSS code between the STYLE tags within the HEAD of the document.

  #period {
    font-size: 10px;
    color: {vb:raw vboptions.vccountdown_period_fontcolour};
    font-family: Arial,sans-serif;
    font-weight: normal;
    letter-spacing: 0;
    margin-right: 1px;
    text-transform: uppercase;
    text-align: center;
}

Check the text-align: center; part. That allows you to center any text where you include id="period" in the coding between the BODY tags.

Using the CSS code above you can understand what part of the Countdown Timer it affects by looking at the DIV tags to find the code that has <div id="period" included.
NB: See the beginning of the above CSS code that says #period { ? That's your clue.

So, using the example above you can find the following part of the Countdown Timer that it affects. Whatever is in the CSS code above affects the HTML code below because it begins with <div id="period"

<div id="period">days&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hrs&nbsp;&nbsp;&nbsp;&nbsp; mins&nbsp;&nbsp;&nbsp; secs&nbsp;</div>

Using that logic you can find the DIV that you want to affect (<div id="name") and look in between the STYLE tags for the CSS code that begins with that same #name or .name and then edit, delete or add to that CSS code to change what you want.

Originally Posted by jasff

2. I want to bold the font so that it stands out more. Possible to change the font size? I would need specifics if possible on how to do this.

Look again in the CSS code for the following:
font-size: 10px; (increase or decrease the number 10 to make your text bigger or smaller)

font-weight: bold; (add this line to the CSS code that relates to the <div> that you want to affect by making all text bold)

[mapleleaffans]

Great mod! I was thinking about adding something like this for a bit! Thank you midnz!