CubeSquared
-
Posts
23 -
Joined
-
Last visited
Reputation Activity
-
CubeSquared got a reaction from LoganPR in Countdown Timer on Lock Screen OR Cover Page
Add this to your site, under Settings - Advanced - Code Injection, then scroll down to the Lock Screen section, add this code. The sections in red will need changing to suit whatever you're counting down to and you can play around with fonts, colours, etc.
<div class="container">
<h1 id="headline">Countdown to my whatever:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div class="message">
<div id="content">
<span class="emoji">🥳</span>
<span class="emoji">🎉</span>
<span class="emoji">🎂</span>
</div>
</div>
</div>
<style>
/* general styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
height: 100%;
margin: 0;
}
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
align-items: center;
background-color: #ffd54f;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
margin-bottom: 2rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
.emoji {
padding: 0 .25rem;
}
@media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
</style>
<script>
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 31, 2020 00:00:00",
countDown = new Date(birthday).getTime(),
x = setInterval(function() {
let 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);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "It's my birthday!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
</script>
Hope this helps! Good luck. (www.twitter.com/cubesqddigital)
-
CubeSquared got a reaction from tarahb in Countdown Timer on Lock Screen OR Cover Page
Add this to your site, under Settings - Advanced - Code Injection, then scroll down to the Lock Screen section, add this code. The sections in red will need changing to suit whatever you're counting down to and you can play around with fonts, colours, etc.
<div class="container">
<h1 id="headline">Countdown to my whatever:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div class="message">
<div id="content">
<span class="emoji">🥳</span>
<span class="emoji">🎉</span>
<span class="emoji">🎂</span>
</div>
</div>
</div>
<style>
/* general styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
height: 100%;
margin: 0;
}
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
align-items: center;
background-color: #ffd54f;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
margin-bottom: 2rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
.emoji {
padding: 0 .25rem;
}
@media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
</style>
<script>
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 31, 2020 00:00:00",
countDown = new Date(birthday).getTime(),
x = setInterval(function() {
let 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);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "It's my birthday!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
</script>
Hope this helps! Good luck. (www.twitter.com/cubesqddigital)
-
CubeSquared got a reaction from goldensealight in Countdown Timer on Lock Screen OR Cover Page
Add this to your site, under Settings - Advanced - Code Injection, then scroll down to the Lock Screen section, add this code. The sections in red will need changing to suit whatever you're counting down to and you can play around with fonts, colours, etc.
<div class="container">
<h1 id="headline">Countdown to my whatever:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div class="message">
<div id="content">
<span class="emoji">🥳</span>
<span class="emoji">🎉</span>
<span class="emoji">🎂</span>
</div>
</div>
</div>
<style>
/* general styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
height: 100%;
margin: 0;
}
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
align-items: center;
background-color: #ffd54f;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
margin-bottom: 2rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
.emoji {
padding: 0 .25rem;
}
@media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
</style>
<script>
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 31, 2020 00:00:00",
countDown = new Date(birthday).getTime(),
x = setInterval(function() {
let 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);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "It's my birthday!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
</script>
Hope this helps! Good luck. (www.twitter.com/cubesqddigital)
-
-
CubeSquared got a reaction from KTAbodes in Line through words
Easiest way might be to just create the text in a Word / Pages document, strike it through, then copy'n'paste it. Works for me!
-
CubeSquared got a reaction from SpencerC in Countdown Timer on Lock Screen OR Cover Page
Add this to your site, under Settings - Advanced - Code Injection, then scroll down to the Lock Screen section, add this code. The sections in red will need changing to suit whatever you're counting down to and you can play around with fonts, colours, etc.
<div class="container">
<h1 id="headline">Countdown to my whatever:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div class="message">
<div id="content">
<span class="emoji">🥳</span>
<span class="emoji">🎉</span>
<span class="emoji">🎂</span>
</div>
</div>
</div>
<style>
/* general styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
height: 100%;
margin: 0;
}
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
align-items: center;
background-color: #ffd54f;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
margin-bottom: 2rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
.emoji {
padding: 0 .25rem;
}
@media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
</style>
<script>
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 31, 2020 00:00:00",
countDown = new Date(birthday).getTime(),
x = setInterval(function() {
let 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);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "It's my birthday!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
</script>
Hope this helps! Good luck. (www.twitter.com/cubesqddigital)
