Web Creation on Squarespace: Moorheart Site Transfer | Part 3

4 Dec

Welcome back to the Squarespace design series, where we transform an existing custom built website into a Squarespace website. In this instalment we dive into adding custom CSS to a Squarespace site for advance styling. I will take you through how to remove the Squarespace embedding custom code warnings so that there is less padding around the embedded elements in the grid, I also style up some buttons with CSS and add blinking animation using CSS keyframes for a fun effect.

Hiding Squarespace embed warning

When embedding external code, Squarespace shows warnings that can disrupt the layout of your site. To create a more seamless look and less padding, we'll use CSS to hide these warnings:

// hide custom code block warning
.sqs-blockStatus-box, .sqs-blockStatus {
  display: none !important;
}

This snippet of CSS will ensure that the warning boxes do not take up unnecessary space

Styling Buttons for a Custom Look

Next, to make sure the design of the website stays the same as the original, I add some custom CSS to style the buttons, this gives it a strong shadow around the button which animates on hover.

// Buttons
.sqs-block-button-element {
  box-shadow: 4px 4px 4px #F4679B;
  transition: 0.45s !important;
}
.sqs-block-button-element:hover {
     box-shadow: 2px 2px 2px #F4679B !important;
    color: #545454 !important;
}

.sqs-block-button-element.sqs-button-element--secondary {
  box-shadow: 4px 4px 4px #c0d0bf;
}

.sqs-block-button-element.sqs-button-element--secondary:hover {
         box-shadow: 2px 2px 2px #c0d0bf !important;
    background-color: #F2C0D6 !important;
    color: #545454 !important;
}

.page-section.dark .sqs-block-button-element {
  box-shadow: 4px 4px 4px #F9E27D !important;
}

.page-section.dark .sqs-block-button-element:hover {
  box-shadow: 2px 2px 2px #F9E27D !important;
}

Adding a Blinking Animation to SVG Elements

In the original website design, there was a blinking animation on a lot of the SVG elements, this was randomised with code, which I have tried to replicate using just CSS and not Javascript. (This means the client doesn’t need to pay a higher fee for Squarespace business membership). The blinking animation uses CSS keyframes to achieve this by changing the opacity of the element quickly. The change of opacity is quick, but the animation time is longer to give it the randomised feel. To achieve this I add a class of ‘.blink’ to single elements in an SVG, and apply different animation durations to the elements using nth-type-of to help with the randomised feel.

// Blinking animation
.blink {
    animation: flicker 0.5s ease infinite;
  animation-duration: 6s;
}
.blink:nth-of-type(3n+2) {
 animation-duration: 8s;
}
.blink:nth-of-type(3n+4) {
 animation-duration: 12s;
}
.blink:nth-of-type(2n+6) {
 animation-duration: 18s;
}
.blink:nth-of-type(4n+2) {
 animation-duration: 5s;
}

@keyframes flicker {
    0%, 49%, 51%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

For a complete breakdown of how to implement these styles and to see them in action, don't miss our latest video tutorial:

Stay tuned for more tips and tricks in our next blog post, and as always, share your experiences and questions in the comments below. Let's keep pushing the boundaries of what's possible with Squarespace!