• 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.png
  • 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

  • CTA_countdown_sidebar_v1.0.1_M.zip
    5.3 KB · Views: 103

EQnoble

Well-known member
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.png

__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.png

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

2add widget.png

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
 

Brogan

XenForo moderator
Staff member
Nice work Ant.

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

CFodder

Well-known member
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.png

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

Attachments

  • countdownpic.png
    countdownpic.png
    56.7 KB · Views: 16

EQnoble

Well-known member
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
    }
 

CFodder

Well-known member
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 :).
 

EQnoble

Well-known member
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>
 

CFodder

Well-known member
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