• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Countdown Timer Cliptheapex.com

Status
Not open for further replies.

EQnoble

Well-known member
From this post - http://xenforo.com/community/threads/countdown.16913/#post-221868
sidebar.webp
  • Download & extract
  • Upload the contents of UPLOAD to your xenforo's install directory
  • Install from addon-cta_cdtimer_sidebar.xml
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.
 

Attachments

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 \/
Code:
<xen:include template="cta_countdown_sidebar" />

To read \/
Code:
<!--<xen:include template="cta_countdown_sidebar" />-->

done3.webp

__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

1 add widget.webp

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

2add widget.webp

Renderer:
Code:
HTML

HTML:
Code:
<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:
Code:
{Whatever Group you want it to be in or a new one}

Title:
Code:
Countdown to...

Position:
Code:
all

Display Order:
Code:
1
 
Nice work Ant.

One of these days I'll get around to turning my template edits into add-ons...
 
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

countdownpic.webp

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

Attachments

  • countdownpic.webp
    countdownpic.webp
    9 KB · Views: 16
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:
Code:
.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.
Code:
.first {
        margin-left: 36px;
        margin-right: 0px;
        padding-left: 5px;
        border-left: 0;
        text-align:center
    }
 
I feel like such a nub, that margin-left was one of the few things I didn't try (n).

Thanks heaps for that EQ, worked a treat :).
 
I would have placed it in template: cta_countdown_sidebar and then styled it from there.
Code:
<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>
 
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.
 
Status
Not open for further replies.
Top Bottom