Countdown Timer Cliptheapex.com

[EQnoble]

From this post - http://xenforo.com/community/threads/countdown.16913/#post-221868

• Download & extract

• Upload the contents of UPLOAD to your xenforo's install directory

• Install from addon-cta_cdtimer_sidebar.xml

• Edit the options for Clip The Apex's Countdown Timer

You can also edit the cta_countdown_main template if you would like to / need to change up some of the css styling.

Thanks to Mikey for actually making this a true addon now...to me it wasn't complete until it had an options panel so hat's off to yah....and until the next release my friend.

If for some reason anyone is in need of the old instructions for reference, I have them archived locally and on my site ... just pm and I will send you the post. Cite the thread url if you can in the message to get a faster response.

 

[EQnoble]

After installing this addon you can with minimal modification turn it into a widget for [bd] Widget Framework ,this basically amounts to commenting out a single line in one of the CTA_countdown_ templates and then adding the widget itself with the options in [bd]WFw.

Ok right to it then....

__1.______________________________________________________________________

Navigate to:

Appearance > Styles > Master Style > Templates
(if you only need it in one style or want it per style Simply edit a different style other than the Master Style)

Edit Template: cta_countdown_timer
Change this code \/

<xen:include template="cta_countdown_sidebar" />

To read \/

<!--<xen:include template="cta_countdown_sidebar" />-->

__2.______________________________________________________________________

Now we will add the widget itself and call to display the timer with the widget framework rather than in the standard original way.

Navigate to:

Appearance > Add Widget



Now we start filling in the info.....do for all fields as they are written below following image



Renderer:

HTML

HTML:

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

Tab Group:

{Whatever Group you want it to be in or a new one}

Title:

Countdown to...

Position:

all

Display Order:

1

 

[Vincent]

Why don't you use options instead of template edits?

 

[EQnoble]

Because I am learning sir...because I am learning. If I knew how to integrate options into the acp I would. I simply took Brogans mod and turned it into an addon so people who aren't trying to do million code edits for all their mods on an upgrade don't have to. Simple as that.

 

[AndreaMarucci]

Wow!! Thank you!!

 

[Peggy]

Excellent work Ant.

 

[Jaxel]

I liked this countdown design so much I added it to XenPorta for the next update: http://www.8wayrun.com/

 

[Renada]

Thank you very much, nice work

 

[Paul B]

Nice work Ant.

One of these days I'll get around to turning my template edits into add-ons...

 

[CFodder]

How would I adjust it for GMT +10?

 

[CFodder]

Sorry for double post, but it's been a while since the other one. This is a great mod but I do have one question - I've taken out the seconds as watching them constantly ticking over is rather annoying, unfortunately though this has screwed up the centering. Can anyone help with this pse?

Have attached a pic of what I mean



This screen shot was taken in FF, in IE the UNTIL text appears in the column .ext to the mins

 

[EQnoble]

Well there is no one right way to do it...though I guess there must be wrong ways to do it. I couldn't tell you which is better than which but if you haven't come up with a solution in the mean time you could try this or a variation on the margin-left: either increasing or decreasing the margin as you need.

Template: cta_countdown_main

find:

.first {
        margin-left: 13px;
        margin-right: 0px;
        padding-left: 5px;
        border-left: 0;
        text-align:center
    }

.

.

copy this and paste over that above in your template.

.first {
        margin-left: 36px;
        margin-right: 0px;
        padding-left: 5px;
        border-left: 0;
        text-align:center
    }

 

[CFodder]

I feel like such a nub, that margin-left was one of the few things I didn't try .

Thanks heaps for that EQ, worked a treat .

 

[EQnoble]

No problem...your timer looks cool btw

 

[CFodder]

No problem...your timer looks cool btw

Ta ... unfortunately still have the problem in IE though.



Can't get that UNTIL under the countdown.

 

[EQnoble]

it looks like you need a <br /> right before your UNTIL

 

[CFodder]

it looks like you need a <br /> right before your UNTIL

Tried that, even tried 2 , still didn't work though.

 

[EQnoble]

where did you place the UNTIL text?

 

[EQnoble]

I would have placed it in template: cta_countdown_sidebar and then styled it from there.

<div class="section">
     <div class="secondaryContent">
         <h3>Countdown to?</h3>
         <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>
 UNTIL
     </div>
 </div>

 

[CFodder]

That's what I've done, I've got it to work, not the best but it works:

<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div>
<br /><br /><br />
<center><span style="color: white; font-size: 18px; vertical-align: text-top; font-weight: bold;">UNTIL</span></center>
</div>
</div[/quote

Took 3 <br />'s to get it.