Squarespace CSS hacks - 5 Squarespace CSS tricks

5 Squarespace CSS hacks

5 Squarespace CSS hacks

I know working with code can seem very daunting. But with these Squarespace CSS hacks you can make your website stand out from the crowd. No worries, I’ll tell you what to do in this post.

First Squarespace CSS hack

By changing the colors of the cookie banner you can make it totally on-brand.

The code you need for this is:

.sqs-cookie-banner-v2 {

 background: #139fae !important;

 border: 5px solid #23303d;

 border-radius: 10px;

}

.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 a {

 color: #fff !important;

}

.sqs-cookie-banner-v2-accept {

 color: #fff !important;

}

@media only screen and (max-width: 640px) {

 .sqs-cookie-banner-v2 {

   bottom: 50px !important;

 }

}

Everything with a # before it you can change. Want to know more go to my post about this.

Second Squarespace CSS hack

Squarespace has a lot of great fonts to choose from but maybe you have a font that you love but isn’t part of the Squarespace fonts. 

Use this code for that:

@font-face

{ font-family: 'thename'; src: url(theURLgoeshere); }

and to let Squarespace know which header has to be the new font you have to use this code:

// Heading 1 //

h1 {font-family: 'thename';}

// Heading 2 //

h2 {font-family: 'thename';}

// Heading 3 //

h3 {font-family: 'thename';}

// Heading 4 //

h4 {font-family: 'thename';}

Do you want to know exactly what you have to do? Go to my post dedicated to Squarespace Custom Fonts.

Want a step-by-step guide to help you DIY your Squarespace website?

Fill out your email address and get my FREE guide to do just that.

Third Squarespace CSS hack

When you have a navigation and you want to change the color to designate an active page and make sure it’s not underlined use this navigation CSS for Squarespace:

/* change header nav active style */

.header-nav-item--active a {

  color: #23303d !important;

  background-image: none !important;

}

You can add your own color by adding the HEX code, so change #23303d to your own color.

Fourth Squarespace CSS hack

 Maybe you want to add round images to your page. You can do a lot of amazing things with Image Editor but creating a round image isn’t one of them.

But, with custom CSS code it’s not a problem at all. To create round images on your Squarespace website, just follow these steps:

First, make sure your image is cropped to square (1:1). 

Next, find the block ID of the image you’d like to adjust. (If you don’t have it already, this Squarespace Collection/Block Identifier Google Chrome extension https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde is super helpful for locating your block IDs!) 

Then, add this CSS snippet to Design - Custom CSS. Replace #block-id-goes-here with your specific block ID:

#block-id-goes-here img{

    border-radius:50%;

}

And voila, you can add a round image to, for instance, testimonials you have. Or you can use them as images for your services. These are just a couple of ideas.

Fifth Squarespace CSS hack

You can add a down arrow in a section of the page.

Go to Design- Custom CSS and past this code:

.down-arrow {

    border: solid #23303d;

    border-width: 0 1px 1px 0;

   display: block;

    padding: 20px;

    transform: rotate(45deg);

    -webkit-transform: rotate(45deg);

  margin: 0 auto;

  width: 0%;

   }

.down-arrow-container {

    text-align: center;

}

You can change the color by replacing #23303d with your own color.

Now you have to add the arrow to your page. Go to the page and add a code block. In that block you paste:

<div class=”down-arrow-container”><div class="down-arrow"></div></div>

These are just a couple of Squarespace CSS tricks. 

Squarespace CSS hacks cheat sheet

Want a step-by-step guide to help you DIY your Squarespace website?

Fill out your email address and get my FREE guide to do just that.

  • 5 August, 2021

Marit Verlaat

I'm an introverted online business owner with wanderlust. I believe that being an introvert is one of the best assets a business owner can have. Introverts are excellent at working alone. They can work towards a goal without getting distracted. Plus, introverts are amazing at learning new things. I'm here to empower you to make your own website as awesome as you are. From the comfort of your own home. In your own time. So you can live the life of your dreams.

>