ChromaticZero

I'm running it on Windows 10 with no problems. I have a couple questions:

1. Have you tried running it without the --auth parameter?

2. Are you running it from inside the template folder you cloned from your site?

Try this instead ?

<script>
  $(document).ready(function() {
    
    $('input[name="checkbox-yui_3_17_2_1_1588700112150_14382-field"]').prop("checked", true);
    
  });
</script>

You could do this with javascript when the page is loaded. You'd have to add this script to your code injection:
 

<script>
  $(document).ready(function() {
    
    $('input[name="checkbox-yui_3_17_2_1_1588700112150_14382-field"]').setAttribute("checked", "checked");
    
  });
</script>

I think that should work. Oddly, all three of your checkboxes have the same encoded name... doesn't seem right.

Anyway, give that a try and let me know if it doesn't work.

Hey guys,

Have any of you looked into the Development Platform for SquareSpace? It's where I do my changes locally before publishing to the live site. It also allows you to test structural changes to the underlying template. I would recommend you start here. https://developers.squarespace.com

What do you mean by 'change the font'?

The font of your announcement bar should be dictated by your template settings. I suppose if you want to override it with code you could do so here but that depends on what you mean by 'change the font'.

.bounce p {
  font-family: 'Montserrat';
  color: #101010;
  font-weight: 600;

  ...
}

Add 'flex-direction: column' to the parent container. This will stack items within the flex - but you'll probably have to mess around a bit with the positioning settings to keep it all to the left.

Sounds like you want a marquee effect. Have a poke around Google for CSS Marquee examples. Just be sure to do it in CSS as the HTML marquee tag has been deprecated.

A quick search will find something like this as an example:

.marquee {
  width: 450px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  will-change: transform;
  /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  .marquee { 
    white-space: normal 
  }
  .marquee span {
    animation: none;
    padding-left: 0;
  }
}

<p class="marquee">
   <span>
       Windows 8 and Windows RT are focused on your life—your friends 
       and family, your apps, and your stuff. With new things like the 
       Start screen, charms and a Microsoft account, you can spend    
       less time searching and more time doing.
   </span>
   </p>

What you're seeing is an animated SVG file that is hidden after the page loads. You should be able to Google 'Animated SVG' to get an idea of what's involved, or find something that you might be able to alter for your use.

A quick search shows this as an example by Sean McCaffery:
 

<div class="svg-wrapper">
  <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="60" width="320" />
  </svg>
   <div class="text">HOVER</div>
</div>

html, body {
  background: #333;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

.svg-wrapper {
  height: 60px;
	margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
}

.shape {
  fill: transparent;
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  stroke: #19f6e8;
}

.text {
  color: #fff;
  font-family: 'Roboto Condensed';
  font-size: 22px;
  letter-spacing: 8px;
  line-height: 32px;
  position: relative;
  top: -48px;
}

@keyframes draw {
  0% {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    stroke-width: 8px;
  }
  100% {
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

.svg-wrapper:hover .shape {
  -webkit-animation: 0.5s draw linear forwards;
  animation: 0.5s draw linear forwards;
}