Getting started with Squarespace? Sign up for a free trial here and use the code PARTNER10 for 10% off your first year (Yep, that's an affiliate link!)

If you’ve been following me for any length of time, you can probably tell I’m pretty obsessed with Squarespace and spend a whole lot of time in there!

It’s my favourite website platform because between the content blocks you have available and the Site Styles settings, you can customise your website in almost any way you want to.

This is a huge benefit because you don’t need to know how to code to make things look amazing!

Sometimes, though, it can be fun to take things up a level and customise them just a little more.

That’s where CSS code comes in!

You don’t need to be a Code Queen to add code to your website either, since there are so many places online that you can find free or paid Squarespace plugins that you can copy and paste into your website to make the changes you want.

Today I am going to share a few of my favourite bits of code I like to add to the websites I design.

I have tested these bits of code on multiple templates in the Brine family and they work great. If you use a different template family, you may find they need to be adjusted to work for your template. I have also updated this post to include the code for Squarespace 7.1 as well.

To add these bits of code to your website, go to Design then Custom CSS from the main menu in Squarespace.

Let’s get started!

Removing the underline below links in your Website Footer

It’s pretty standard to see underlines under links when you’re looking at websites, since it’s a way to make a link stand out, but I find it can look outdated and messy since it tends to make everything look more cluttered.

Squarespace has mostly taken care of this by removing the underlines in the main content of your website and giving you an option to change the link colour under Site Styles so they stand out in a fun way.

But a lot of the templates still use underlines on the links in your website footer, and I’m personally not a fan, so I like to go in and remove it. If it’s not your cup of tea either, then you can use the following code to remove them:

BRINE TEMPLATES

a {
  border-bottom: none !important;
}

SQUARESPACE 7.1 TEMPLATES

.sqs-block-html a {

background-image: none!important;

}

Much better, right?

Preventing words from hyphenating on Smaller Screens

I don’t know about you, but when I look at a website on my phone and half the words cut off to the next line, I find it hard to read and it just looks messy to me.

Too bad Squarespace does this by default and we’re stuck with it, right?

But here’s the thing, you don’t have to be!

Using the code below, you can actually prevent the words on your website from hyphenating on smaller screens so that things are much cleaner and easier to read!

p, h1, h2, h3 {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;
}

Thankfully, this is something that has finally been fixed in Squarespace 7.1, so you don’t need to worry about code to remove hyphens.

Now we can all breathe a sign of relieve at how much cleaner everything looks!

Setting a fixed width for Buttons

Occasionally I want to be able to stack buttons on a page, for example, on an Instagram landing page.

Unless the text I am using for those buttons is the same length, the buttons come out at all different widths.

If you can’t already tell from the first 2 items, I tend to like a neat and polished look for my websites, and that goes for these pesky mismatched buttons too!

So, if you also sometimes have OCD tendencies like I do, and you want a cleaner look for your stacked buttons, you can use the below code to make your large buttons all the same width.

Then it’s as simple as selecting the large button anytime you want to stack buttons and you’re set!

.sqs-block-button .sqs-block-button-element--large {
  width: 80%;
}

Squarespace buttons have the same element name on any template, so this code can be used for any Squarespace template!

I have this set to have the buttons show at 80% of the screen size, but if you wanted them to be wider or narrower, you can just change the percentage to suit your design.

Removing the Header, Footer and Announcement Bar on Landing Pages

Chances are you have a couple of pages on your website where there is a very specific action you want your visitors to take, such as signing up for your free offer or on a sales page.

How can we help encourage our website visitors to take that action?

By removing all of the distractions and other options for them to click on!

And yep, that includes your header, footer and announcement bar, too!

This way, the only options for the person to leave the page is to take the action you want or close the page.

So this code isn’t quite as cut and paste as the rest since we have to do a bit of investigating to find the page ID to make sure we are only removing the navigation on the specific page in question and not our whole website, but I’ll walk you through what to do here:

Step 1: Load the page you want to remove the header, footer and announcement bar from in Google Chrome

Step 2: Right click somewhere on the page and click “View Page Source”

Step 3: Hit Control + F or Command + F to bring up the search bar and search “title”

Step 4: You will likely have at least a few you are looking for, but the one you want will have a section that shows the page name and “id”, then a long string of letters and numbers beside it, like below:

Step 5: Copy those letters and numbers, and paste them into the below code where the xxxxxx is

Step 6: Copy and paste the code into the Custom CSS section in Squarespace

BRINE TEMPLATES

#collection-xxxxxx {#footerBlocksTop, #footerBlocksMiddle, #footerBlocksBottom, .sqs-announcement-bar-custom-location, .Header, .Mobile {
  display: none !important;
  }
}

SQUARESPACE 7.1 TEMPLATES

#collection-xxxxxx {header, footer {

  display: none !important;
  }
}

Now one thing to mention if you are using this code... Under the GDPR and quite a few privacy laws around the world, you should be including a link to your Privacy Policy that shows how you handle your visitors information on every page of your website.

Usually you will have this information in your footer, but by removing your footer, you take away the link, so it is a good idea to include a link at the bottom of the page to your privacy policy to make sure you are covering yourself.

Customizing the Heading size and colour on Summary Blocks

I love using summary blocks as a way to showcase my most recent blog posts, but the default title text shows as the body text and doesn’t really stand out enough for my liking.

One of the things I like to do is to change this title text so that it is a larger font size and colour so that it stands out and is super easy for people to see what the posts below relate to.

With the code below, you can change the font size to be a larger number if you want it even bigger, or a smaller number if this is too big. You will also need to add the 6 digit HEX code for the colour you want to use after the # to tell Squarespace what the colour should be.

Once you’ve adjusted the size and colour code, just copy and paste and you’re ready to go!

BRINE TEMPLATES

.summary-header-text   {
  font-size: 32px !important;
  color: #545454 !important;
}

SQUARESPACE 7.1 TEMPLATES

.sqs-block-summary-v2 .summary-heading {

  font-size: 32px !important;
  color: #545454 !important;
}

There you have it! Five of my favourite customisations that can really help set your Squarespace website apart and make it look like you want!

Have you tried any of these codes on your website? If so, I’d love for you to share in the comments!