• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Simmple and working countdown for ZNOTE ACC and others ACC

Szmycu

Tibiaservers.net
Joined
Sep 2, 2008
Messages
65
Reaction score
5
Location
Poland
Capture_317.jpg

I have seen there is an error in ZNOTE ACC countdown. Im making OTS and website and used simple countdown.

I made here and its ZNOTE example here but u can use it simply for every ACC MAKER.

We only have to edit one file and couple lines of code:
edit file: www\layout\overall\header.php

after
PHP:
<div class="container">
<a href="/" class="logo"></a>
</div>

we have to put one empty div

PHP:
<div id="countdown"></div>

and in the bottom of file we put

PHP:
<script>

    function updateTimer() {
    future = Date.parse("nov 14, 2021 17:00:00");
     now = new Date();
     diff = future - now;

     days = Math.floor(diff / (1000 * 60 * 60 * 24));
     hours = Math.floor(diff / (1000 * 60 * 60));
     mins = Math.floor(diff / (1000 * 60));
     secs = Math.floor(diff / 1000);

     d = days;
     h = hours - days * 24;
     m = mins - hours * 60;
     s = secs - mins * 60;

     document.getElementById("countdown")
      .innerHTML =
      '<div><span style="color:#071d53;">14 Nov 17:00</span></div>' +
      '<div><span style="color:Crimson;">Start OTS!</span></div>' +
      '<div>' + d + '<span> Days</span></div>' +
      '<div>' + h + '<span> Hours</span></div>' +
      '<div>' + m + '<span> Min</span></div>' +
      '<div>' + s + '<span> Sec</span></div>' ;

    }
    setInterval('updateTimer()', 1000);

</script>

We can see line:
PHP:
    future = Date.parse("nov 14, 2021 17:00:00");

Here we just put the date in format like above.
Last thing to add is CSS.
I added CSS code in www\layouts\css\main.css
You can add css in any imported file.
Thats all

CSS:
/* COUNTDOWN */

#countdown {
    font-weight: normal;
    text-align: center;
    font-size: 39px;
}

#countdown div {
     display: inline-block;
     min-width: 90px;
     padding: 0 15px;
     position: relative;
     top: -20px;
}

 
Nice. It will be helpful for some people who dont know about this.

For @everyone is looking where to add CSS Code, the last part of this tutorial:

/* COUNTDOWN */

#countdown {
font-weight: normal;
text-align: center;
font-size: 39px;
}

#countdown div {
display: inline-block;
min-width: 90px;
padding: 0 15px;
position: relative;
top: -20px;
}

You can simply add the code on layout/overall/header.php ( if you are using ZnoteAAC, not custom ) who know about custom doesnt need to take care about this comment, add like:

<style>

.countdown {
font-weight: normal;
text-align: center;
font-size: 39px;
}

.countdown div {
display: inline-block;
min-width: 90px;
padding: 0 15px;
position: relative;
top: -20px;
}
</style>

If the countdown is only displayed on one page, you can add the style on this page.
 
Back
Top