CountdownTimer.gif

Countdown Timer

Countdown to a specific event or launch with the Countdown Timer plugin, accounting for visitors’ timezones. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

 

 

Step 1: Insert a Markdown Block

Find where you want the Countdown Timer to be located on your site/page and insert a markdown block. Then insert the following code

<div id="countdown">   <div id='tiles'></div>   <div class="labels">     <li>Days</li>     <li>Hours</li>     <li>Mins</li>     <li>Secs</li>   </div> </div>
 

 

Step 2: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or in the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

You can change the countdown date by adjusting the value in the code new Date("2018-10-23") using the format YYYY-MM-DD .

If you want to countdown to an exact time, you can instead input 6 values. For example, to countdown to midday: new Date(2018, 10, 23, 12, 00, 00)
 

Copy & paste this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script>$(document).ready(function(){function n(){var n=new Date,e=n.getTime(),t=(n.getTimezoneOffset(),(c-e)/1e3);a=s(parseInt(t/86400)),t%=86400,o=s(parseInt(t/3600)),t%=3600,p=s(parseInt(t/60)),r=s(parseInt(t%60)),u.innerHTML="<span>"+a+"</span><span>"+o+"</span><span>"+p+"</span><span>"+r+"</span>"}function s(n){return(n<10?"0":"")+n}var a,o,p,r,c=new Date(2018,10,23,11,0,0);c.setMonth(c.getMonth()-1);var u=document.getElementById("tiles");n(),setInterval(function(){n()},1e3),$("#countdown").closest(".sqs-block").addClass("countdownBlock")});</script>
 

Site wide Code Injection:

 

Individual Page Header Code Injection:

 

 

Step 3: Insert the CSS

Insert the following code into your Squarespace site's Custom CSS editor or the Individual Page Header CSS injection (more info below) - the values in bold can be changed to suit your branding and site design. 

Where colour values are added, you can use either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB(a) value e.g. rgb (255,255,255) or rgba (255,255,255,0.8) - optional opacity value '0.8'

  • HSL(s) value e.g. hsl (0, 0%, 20%) or hsla (0, 0%, 20%, 0.8) - optional opacity value '0.8'

If you need help finding colours and building colour palettes - coolors.io is an awesome resource!
 

Copy & paste this code:

/* COUNTDOWN TIMER CSS */  .countdownBlock,.countdownBlock .sqs-block-content{height:160px}#countdown{width:465px;height:112px;text-align:center;border-radius:5px;margin:auto;padding:24px 0;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#countdown #tiles{position:relative;z-index:1;display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:center;justify-content:center}#countdown #tiles>span{width:23%;max-width:none;font:700 48px 'Droid Sans',Arial,sans-serif;text-align:center;color:#111;background-color:#FECB2F;border-radius:3px;margin:0 1%;padding:18px 0;display:inline-block;position:relative}#countdown .labels{width:100%;height:25px;text-align:center;position:absolute;bottom:8px;padding-left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}#countdown .labels li{width:23%;margin:0 1%;font:700 15px 'Droid Sans',Arial,sans-serif;color:#000;text-align:center;text-transform:uppercase;display:inline-block}@media all and (max-width:767px){#countdown{display:flex;flex-direction:column}#countdown .labels{margin:auto;position:relative;width:62%}#countdown #tiles>span{width:15vw;font-size:24px}}
 

Finding your Custom CSS editor:

 

Individual Page Header CSS injection

 

 

⚡️Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.