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

Countdown

Brogan

XenForo moderator
Staff member
#4
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.
 

Attachments

Brogan

XenForo moderator
Staff member
#8
Your sidebar isn't wide enough - mine is 276px wide.

Every browser renders things slightly differently.
 

AndreaMarucci

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

mrGTB

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

mrGTB

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

mrGTB

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

.dash {
width: auto; (this is the main thing that fixes IE6)
height:44px;
float: left;
margin-left: 10px;
padding-left: 10px; (try changing padding only to get spacing looking right after)
border-left: 1px solid @primaryLighterStill;
position: relative;
}

.first {
margin-left: 10px; (not sure why this was 12px, because the outer spacing in sidebar to start of inner block is exactly 10px (and not 12px)
padding-left: 0;
border-left: 0;
}