Ciao a tutti, per poter inserire un semplicissimo countdown esistono solo plugin a pagamento? Grazie

Modificato 31 Maggio 20223 anni da Gianluca73

Dove vuoi mettere questo countdown? A seconda di dove lo vuoi mettere, puoi anche pensare di inserire un countdown esterno a IP.Board come ad esempio:

The Final Countdown - jQuery.countdown

HILIOS.GITHUB.IO

 

vorrei metterlo sul forum, ma non ho pagine html, ho solo forum, gallery. Vorrei metterlo visibile appena entri sul forum

 

Modificato 31 Maggio 20223 anni da Gianluca73

Si, ma che in parte del forum? Così valuto se è possibile farlo con il metodo che ti dicevo io… se possibile fare uno screen e indicami la zona così da essere piu preciso

Forums - Sportclassici

SPORTCLASSICI.EU

il forum è questo, non ho esigenze particolari basta che ci sia... sarebbe bello sulla colonna di destra dove c'è evento raduno, il countdown è riferito a quello, ma se li non si può ma si può altrove va bene comunque... grazie

Ne ho realizzato uno in fretta e furia, ma puoi personalizzato benissimo, ecco il risultato:

 

Il countdown apparirà se c'è un annuncio attivo, se invece non vuoi avere il countdown, ti basterà rimuoverlo dal template che ti indicherò di seguito.

Per inserire il countdown dovrai andare in:

AdminCP->Personalizzazione->Temi-> </>

Cerca il template globalTemplate che sarà in core->front->global

Qui dovrai inserire:

<script type="text/javascript">
(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;
  let today = new Date(),
      dd = String(today.getDate()).padStart(2, "0"),
      mm = String(today.getMonth() + 1).padStart(2, "0"),
      yyyy = today.getFullYear(),
      nextYear = yyyy + 1,
      dayMonth = "06/23/",
      birthday = dayMonth + yyyy;

  today = mm + "/" + dd + "/" + yyyy;
  if (today > birthday) {
    birthday = dayMonth + nextYear;
  }
  const countDown = new Date(birthday).getTime(),
      x = setInterval(function() {    

        const now = new Date().getTime(),
              distance = countDown - now;
        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
        if (distance < 0) {
          document.getElementById("headline").innerText = "Countdown Finito!!";
          document.getElementById("countdown").style.display = "none";
          document.getElementById("content").style.display = "block";
          clearInterval(x);
        }
      }, 0)
  }());
</script>

Questo codice dovrai inserirlo prima di: </body> che si trova in fondo al file.

Adesso cerca:

announcementSidebar che si trova in: 

Core->Front->Global

e li sotto il contenuto che trovi metti:

<div class='ipsBox ipsSpacer_bottom'>
  <div class="container-countdown">
    <h1 id="headline">Countdown</h1>
    <div id="countdown">
      <ul class="ul-countdown">
        <li class="licount"><span class="lispan" id="days"></span>Giorni</li>
        <li class="licount"><span class="lispan" id="hours"></span>Ore</li>
        <li class="licount"><span class="lispan" id="minutes"></span>Minuti</li>
        <li class="licount"><span class="lispan" id="seconds"></span>Secondi</li>
      </ul>
    </div>
    <div id="content" class="emoji-countdown">
      <span class="emoji-countdownspan">🥳</span>
      <span class="emoji-countdownspan">🎉</span>
      <span class="emoji-countdownspan">🎂</span>
    </div>
  </div>
</div>

Adesso devi mettere il CSS, per dargli uno stile, quindi vai nel Tab CSS (La barra cerca lasciala vuota sennò non troverai il file) e cerca Custom.css in Core->front->Custom e qui aggiungi:

.ul-countdown {
  padding: 0px;
}
.container-countdown {
  color: #333;
  margin: 0 auto;
  text-align: center;
}
.licount {
  display: inline-block;
  list-style-type: none;
  padding: 0.2em;
  text-transform: uppercase;
}

.lispan {
  display: block;
  font-size: 2.5rem;
}

.emoji-countdown {
  display: none;
  padding: 1rem;
}

.emoji-countdownspan {
  font-size: 2.5rem;
  padding: 0 .5rem;
}

Un domani se dovrai aggiungere una data diversa, ti basterà modificare 

dayMonth = "06/23/",

nel formato MM/DD, nota bene, non supporta l'anno ne l'orario. Una volta fatto tutto, ti apparirà il countdown:

Cavolo, Grazie mlle è perfetto, funziona ottimamente facile da usare... veramente grazie