AI powered code generator for Squarespace

Got you, Squarespacer — this will remove the header navigation underline and change the link color from black to bright orange on hover.

/* Remove header link underline /
.header-nav-item a {
text-decoration: none !important;
background-image: none !important;
}

/* Change header link color on hover */
.header-nav-item a:hover {
color: #ff6600 !important;
}

To add this to Custom CSS, go to:

Website → Pages → Custom Code → Custom CSS

Paste the code in, save, and refresh your site.

If your header links aren’t black by default, I can also make the normal state black so it stays consistent.

Hey Squarespacer! 🌈 Love this idea — a rainbow bar is such a vibe. The trick is pulling the hues toward their lighter, more pastel side so dark text still pops.

Here's a code you can use:

.sqs-announcement-bar {
background: linear-gradient( to right,
#ffb3b3, /* soft red */
#ffd9a0, /* soft orange */
#fff3a0, /* soft yellow */
#b8f0b8, /* soft green */
#a0d4f5, /* soft blue */
#c4aaee /* soft violet */ ) !important;
}

These pastel rainbow tones all clear WCAG AA contrast ratio against dark gray text (anything around #333333 or darker), so your copy stays totally legible without sacrificing the rainbow effect.

Hey there Squarespacer 👋 Creating a countdown timer for your upcoming event on August 30th, 2026 is a fantastic design idea to build anticipation and excitement for your visitors!

The code below creates a dynamic countdown timer using an h3 heading style that counts down in days, hours, minutes, and seconds. As soon as the clock strikes midnight on August 30th, 2026, it will automatically change to display your custom message: "doors are closed!".

To add the countdown timer itself to your page:

1. In the Squarespace editor, open the page where you want the timer to live.

2. Add a Code Block to your section.

3. Paste the following HTML and JavaScript code into the box (making sure the code block is set to HTML and "Display Source" is turned off):
   <h3>Calculating time remaining...</h3>
   </div>

   <script>

   document.addEventListener("DOMContentLoaded", function() {

   // Target date for the event

   const targetDate = new Date("August 30, 2026 00:00:00").getTime();

   // Update the countdown every single second

   const countdownInterval = setInterval(function() {

   const now = new Date().getTime();

   const distance = targetDate - now;

   // Time calculations for days, hours, minutes, and seconds

   const days = Math.floor(distance / (1000 60 60 * 24));

   const hours = Math.floor((distance % (1000 60 60 24)) / (1000 60 * 60));

   const minutes = Math.floor((distance % (1000 60 60)) / (1000 * 60));

   const seconds = Math.floor((distance % (1000 * 60)) / 1000);

   // Target the heading element inside the code block container

   const timerHeading = document.querySelector(".sqs-block-code h3");

   if (timerHeading) {

   if (distance < 0) {

   clearInterval(countdownInterval);

   timerHeading.innerHTML = "doors are closed!";

   } else {

   timerHeading.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";

   }

   }

   }, 1000);

   });

   </script>