MJohn

On 12/21/2022 at 9:42 AM, tuanphan said:

Edit Page where you want to use Countdown > Add a Code Block with this code

<div class="countdown-timer">
  <div class="days">0</div>
  <div class="hours">0</div>
  <div class="minutes">0</div>
  <div class="seconds">0</div>
</div>
<style>
  .countdown-timer {
  padding: 1rem;
  font-size: 1.5rem;
}

.countdown-timer > div {
  display: inline-block;
  padding-right: 0.5rem;
  margin-right: 0.5rem;
  font-size: 2rem;
  font-weight: bold;
}

.countdown-timer > div:after {
  color: #A4A4A4;
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
}

.countdown-timer > .days:after {
  content: 'days';
}

.countdown-timer > .hours:after {
  content: 'hours';
}

.countdown-timer > .minutes:after {
  content: 'minutes';
}

.countdown-timer > .seconds:after {
  content: 'seconds';
}
</style>

Add a Markdown Block under Code Block with this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  let nextMonth = new Date(new Date().getFullYear(),
                         (new Date().getMonth() + 1) % 12);

if (nextMonth.getMonth() == 0) {
  nextMonth.setFullYear(nextMonth.getFullYear() + 1);
}

let nextMonthString = nextMonth.toISOString();
window.setInterval(() => {
  const timeRemaining = getTimeRemaining(nextMonth);
  $('.days').text(('0' + timeRemaining.days).slice(-2));
  $('.hours').text(('0' + timeRemaining.hours).slice(-2));
  $('.minutes').text(('0' + timeRemaining.minutes).slice(-2));
  $('.seconds').text(('0' + timeRemaining.seconds).slice(-2));
}, 1000);

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
</script>

 

Thank you for this amazing countdown timer, Tuan! How can I change the duration though?

Oh I'm sorry! I was sure I put in the URL. It's

https://invivocue.squarespace.com/human-immune-system-mouse-himice

Noted on what you're saying about the text being long but it works fine when it's a text box. So why do the buttons overlap instead of defaulting to the same layout at the text boxes?

Hi everyone!

How can I prevent side-by-side buttons from overlapping on smaller screen sizes (screenshot attached)? Clearly, there's something preventing side-by-side text boxes from overlapping (the white 'buttons') so what is it and how can I apply it to the actual buttons (the red outline buttons)?

Thanks in advance!

PW: demo

I'm trying to get a few images in a blog post to be in 2 columns on mobile.

I've successfully used this code on other blog posts like this one https://www.hvmc.sg/blog/christmas-peace (it's the profile photo at the end) to reduce the width of the top block and float it to the left so that the block below it comes up beside it (attached image).

width: 145px;
float: left;

But I can't get it to work on another post I'm doing. It's currently in draft so it's not live. But can anyone give me a generic code that I can modify for any blog post? This is what I tried but it didn't work:

#block-yui_3_17_2_1_1673946610225_4679, #block-yui_3_17_2_1_1673946610225_6394
  {
  width: 50% !important;
  float: left !important;
  }

The blocks do become 50% but remain vertically stacked i.e. they don't become 2 columns.

Hope you can understand without a live example!

That code doesn't work. Any other ideas?

Any ideas on this?

Site URL: https://www.hvmc.sg/blog/engaging-our-youth

I used this code to make the first image on the post a bit wider than the rest of the post but I think the :first-child selector is messing up the layout of the whole page. Does anyone know what I could do instead to target the first block on a blog post?

.blog-item-wrapper {
overflow: hidden;
  .sqs-block:first-child {
left: 50%;
transform: translateX(-50%);
width: 70vw;
}
}

Thanks for the code! Unfortunately, what I'd like is for the month to be spelt out eg. June instead of 06. Is that possible?

hvmc.sg/blog

Is it possible to add an 'Older Posts' button for the summary block? I think the max posts for a summary block is 30 but that's way too long. I'd prefer it to be 6 posts.

How can I increase the width of the blog page? It's currently narrower than the other sections on the same page. When I set it to 3 columns of posts, the content is quite squished.

How many posts are shown on a blog page before it shows the Older Posts button? Can I get it to show after a specific number of posts (eg. 6)? 

Is it possible to change the blog page date format from dd/mm/yyyy to dd month yyyy eg. 18 June 2022?

Any updates on this?

That works! Thanks!

Site URL: https://newmomu.squarespace.com/

pw: newmomu

I managed to put in a Whatsapp icon in my navigation with this code but I can't get it to be inline with the Youtube link. Also, how can I get it to change color when hovered on?

header#header [href*="wa.me"] {
    visibility: hidden;
}
header#header [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: "Font Awesome 5 Brands";
  color: white;
 }

Thanks!

The image in the background shouldn't have the green border-top and overlay colour. I don't have a mockup of it.

Site URL: https://newmomu.squarespace.com/

pw: newmomu

How can I get my CSS to apply to just the 4 columns with text and not the image placed in the background? I've applied a green border-top and an overlay colour.

Thanks!

Thank you, that works well!

Could you explain to me why you used the not property when it would work just as well without it?

newmomu.squarespace.com
pw: newmomu

How can I prevent a long word ('Consultation' in image attached) from breaking onto the next line? In this case, it's only one alphabet so it would be great if it could be forced into one line.

Thanks!

newmomu.squarespace.com
pw: newmomu

Anyone has a solution to this?

Also, is there a way to switch the month and day on the Summary Block to be day/month/year and also without the comma?

Yes that's right!

1 hour ago, tuanphan said:

Comma between JUL & 2022?

Hi everyone,

I used the script provided here:

https://sf.digital/squarespace-solutions/date-styles-on-squarespace-71-blog-posts

And I'm wondering if it's possible to remove the comma in between the date.

https://www.hvmc.sg/blog/an-outing-of-smiles

Thanks!