1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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

Discussion in 'Add-on Releases [Archive]' started by EQnoble, Jun 10, 2011.

Thread Status:
Not open for further replies.
  1. EQnoble

    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.
     

    Attached Files:

    Moses, Chimpie, Fuhrmann and 17 others like this.
  2. EQnoble

    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
     
  3. Vincent

    Vincent Well-Known Member

    Why don't you use options instead of template edits?
     
    Mikey likes this.
  4. EQnoble

    EQnoble Well-Known Member

    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.
     
  5. AndreaMarucci

    AndreaMarucci Well-Known Member

    Wow!! Thank you!!
     
  6. Peggy

    Peggy Well-Known Member

    Excellent work Ant.
     
  7. Jaxel

    Jaxel Well-Known Member

  8. Renada

    Renada Active Member

    Thank you very much, nice work :)
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Nice work Ant.

    One of these days I'll get around to turning my template edits into add-ons...
     
    EQnoble likes this.
  10. CFodder

    CFodder Well-Known Member

    How would I adjust it for GMT +10?
     
  11. CFodder

    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
     

    Attached Files:

  12. EQnoble

    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 likes this.
  13. CFodder

    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 likes this.
  14. EQnoble

    EQnoble Well-Known Member

    No problem...your timer looks cool btw :)
     
  15. CFodder

    CFodder Well-Known Member

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

    iecountdown.png

    Can't get that UNTIL under the countdown.
     
  16. EQnoble

    EQnoble Well-Known Member

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

    CFodder Well-Known Member

    Tried that, even tried 2 ;), still didn't work though.
     
  18. EQnoble

    EQnoble Well-Known Member

    where did you place the UNTIL text?
     
  19. EQnoble

    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 likes this.
  20. CFodder

    CFodder Well-Known Member

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

    Took 3 <br />'s to get it.
     
    EQnoble likes this.
Thread Status:
Not open for further replies.

Share This Page