1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Countdown

Discussion in 'Styling and Customization Questions' started by AndreaMarucci, Jun 10, 2011.

  1. AndreaMarucci

    AndreaMarucci Well-Known Member

    This is for Brogan. I've seen a beautiful countdown on your site http://cliptheapex.com/community/

    Do you mind to share the code here to let me put this on my site?

    Thanks
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. AndreaMarucci

    AndreaMarucci Well-Known Member

    Thanks Brogan. Seen the site but way to difficult for me to implement :(
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Create a new template.

    Include the template where you wish, in forum_list or sidebar, etc.

    Update the css in the top section to suit your style.
    Everything between the <style type="text/css"></style> tags.

    Edit the date between the <script type="text/javascript"></script> tags, like so:
    Code:
    'day': 12,
    'month': 6,
    'year': 2011,
    'hour': 17,
    'min': 0,
    'sec': 0,
    'utc': true
    Change the title of the block in the h3 tags: <h3>Canadian Grand Prix Countdown</h3>

    Edit the text under each digit block as required.
     

    Attached Files:

    DSF, Romchik®, EQnoble and 2 others like this.
  5. AndreaMarucci

    AndreaMarucci Well-Known Member

    Brogan, you're one of the best XenForo resource out there ;)
     
  6. AndreaMarucci

    AndreaMarucci Well-Known Member

    It works perfectly!!! Thanks again Brogan!
     
  7. AndreaMarucci

    AndreaMarucci Well-Known Member

    Brogan have you an idea why my countdown in firefox looks like this
    Screenshot 2011-06-10 a 17.59.15.jpg

    while yours is correct?
    Screenshot 2011-06-10 a 17.59.24.jpg

    Using Chrome is ok and also with safari (I'm using OSX) All the browsers are latest versions.
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Your sidebar isn't wide enough - mine is 276px wide.

    Every browser renders things slightly differently.
     
  9. DSF

    DSF Well-Known Member

    Chance ;)

    .dash {
    ...
    padding-left: 10px;
    into
    padding-left: 5px;
    ...
    }

    1.png
     
    EQnoble likes this.
  10. AndreaMarucci

    AndreaMarucci Well-Known Member

    Tried to lower the values but I don't think to have changed the right values. This is how it look now

    Schermata 2011-06-10 a 22.17.28.png

    and this is the css

    Code:
    #countdown {
        height: 46px;
        background-color: @contentBackground;
        padding: 4px 0 2px 0;
    }
    
    .dash {
        width: 20px;
        height:44px;
        float: left;
        margin-left: 5px;
        padding-left: 5px;
        border-left: 1px solid @primaryLighterStill;
        position: relative;
    }
    
        .first {
            margin-left: 12px;
            padding-left: 0;
            border-left: 0;
        }
    
    .dash .digit {
        font-size: 26px;
        font-weight: bold;
        float: left;
        font-family: Arial, sans-serif;
        color: @primaryLightish;
        position: relative;
    }
    
    .dash_title {
        position: absolute;
        display: block;
        bottom: 0px;
        right: 2px;
        font-family: Arial, sans-serif;
        font-size: 9px;
        color: @mutedTextColor;
        text-transform: uppercase;
        letter-spacing: 0px;
    }
     
  11. AndreaMarucci

    AndreaMarucci Well-Known Member

    Solved thanks!! Restored the original values and changed only the padding...
     
  12. Jaxel

    Jaxel Well-Known Member

    Michael Dance likes this.
  13. mrGTB

    mrGTB Well-Known Member

    Brogan, I was just testing things with IE7 running in (IE6) compatibly mode both on my site with the counter and on your ClipTheApex forum. I spotted the name text is too long for "Weeks, Days, Hrs, Mins, Secs". It breaks the layout in compatibility mode on both your and mine.

    But, if you change that to this instead "Week, Day, Hr, Min, Sec" (lose all the "s"). It doesn't break the layout anymore in compatibility mode and stays looking OK.

    Snap1.png
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    Meh, I don't really care if it doesn't work in IE6 or 7.
     
    HydraulicJack likes this.
  15. mrGTB

    mrGTB Well-Known Member

    Fair enough if your not bothered, but it's only a case of losing those "S" at the end and it fixes it right away. Oh! I use IE7 here with XP and it looks OK when not running (compatibility mode), only when running compatibility mode does it happen to simulate IE6.
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    If anything I will probably just change Weeks to Wks.
     
    macara likes this.
  17. mrGTB

    mrGTB Well-Known Member

    Yeah, then you could keep the S going. Might try that myself.
     
  18. mrGTB

    mrGTB Well-Known Member

    This might interest some using this countdown like me. I spotted another issue tonight when viewing the counter running IE7 in compatibly mode to emulate what IE6 sees things like. The last seconds digit is messing up, the number is overlapped (half way across) when scrolling downwards changing second (by the background colour). You only see half a digit.

    I made about 3 changes that will fix the IE6 problem, the main one being use: "width: auto" instead of setting a pixel width. There's no need to have a set-width because your sidebar block container will set the maximum width for the counter, but auto will allow flexibility for the slight change in how IE6 views things on width with the counter itself.

    Original:

    Code:
    .dash {
        width: 30px;
        height:44px;
        float: left;
        margin-left: 10px;
        padding-left: 10px;
        border-left: 1px solid @primaryLighterStill;
        position: relative;
    }
     
        .first {
            margin-left: 12px;
            padding-left: 0;
            border-left: 0;
        }
    Edited (red changes made):

     
  19. macara

    macara Active Member

    I need some help to fix the justification in the:

    Screen Shot 2014-01-26 at 15.28.54.png
     
    mrhung likes this.
  20. Martok

    Martok Well-Known Member

    Which countdown are you using? So far you've posted for help in the CTA Countdown thread, XenPorta and now this.

    You should ask for help in the one you are using, not all of them as they aren't all the same resource.
     
    CyclingTribe and Tracy Perry like this.

Share This Page