My Favourite Squarespace CSS Hacks

Jun 14

One of the main concerns I've heard from clients and others thinking about using Squarespace is that they don't want their website to look and act like everyone else's site and look like a template.

It's also a standard that I've imposed on myself to make sure that each site is uniquely distinctive and brand-aligned and I get better at being creative and 'hacking' Squarespace functionalities with every site I build.

It's true that Squarespace has some limitations that are designed to make it difficult for DIY users to make a bad website, but Squarespace also allows pro users like me to use custom code to modify the standard functionality and aesthetic.

There are ways to modify Squarespace templates that only become apparent to the experienced user, that's the value of hiring a professional Squarespace designer if you want something unique without spending seventeen-hundred hours figuring it out yourself.

Today I'd like to share some of the CSS modifications that I use on almost every website I build. These are easy mods that make a great site even better:

Prevent Hyphenation

When a browser is resized, the text always hyphenates in too many and in the most ridiculous of places. I hate the way it looks, so this code will force sentences to break after a word instead of hyphenating:

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

Remove Text Link Underlines (Without Removing Button Outlines)

Sometimes you don't want every link within your text to have a link underline. I'm pretty fussy about this, and I don't want any of my text links to be underlined. I think it looks messy and body links are usually already a different colour to indicate that they're links. The code below is split into 4 segments to isolate different text styles. I've seen lots of posts with instructions on how to do this all in one line of code, but if you merely write...

.sqs-block-content a, .sqs-block-content a:visited {border: none
}

... It will remove link underlines from all text styles. But in Squarespace it will remove all the outlines from outline style buttons too. If you do it this way, you can choose which styles you want to have underlines and which ones you don't want to have outlines. I marked them up for you so you can tell which is which:

/* Remove Underlines From Body Text Links */
.sqs-block-content p a, .sqs-block-content p a:visited {border: none !important;
}

/* Remove Underlines From H1 Heading Links */
.sqs-block-content h1 a, .sqs-block-content h1 a:visited {border: none !important;
}

/* Remove Underlines From H2 Heading Links */
.sqs-block-content h2 a, .sqs-block-content h2 a:visited {border: none !important;
}

/* Remove Underlines From H3 Heading Links */
.sqs-block-content h3 a, .sqs-block-content h3 a:visited {border: none !important;
}

Customize Index Scroll Indicator Text

The index scroll indicator in the Brine family of templates says "SCROLL" by default with no option to change it. If you want it to say something else you need to add some custom CSS. See a live demonstration of this on any of the pages on my website.

If you want all your index scroll indicators to say the same thing, put this code in the Design > Custom CSS area and adjust the font style options to your liking:

/* Index Page Scroll Indicator Text */
.Index-page-scroll-indicator-text {
     font-size: 0;
 }
 .Index-page-scroll-indicator-text:after {
   content: "Start";
   font-size: 13px;
   line-height: 1em;
   letter-spacing: 0.15em
 }

If you want to customize the scroll indicator per page, put the same code in the Page Header Code Injection between <style></style> tags in the Index NOT the Page by clicking the small gear icon beside the Index name and going to the advanced tab like this:

<style>
/* Index Page Scroll Indicator Text */
.Index-page-scroll-indicator-text {
     font-size: 0;
 }
 .Index-page-scroll-indicator-text:after {
   content: "Start";
   font-size: 13px;
   line-height: 1em;
   letter-spacing: 0.15em
 }
</style>

There are a lot of things you can do to customize the look of your Squarespace site such as changing gallery styles, social link styles, adding animations to text, etc. I can't share those as it did not write them myself but you can purchase numerous code snippets or 'Plugins' at Square Studio—my go to for cool customizations, they offer a subscription model that is super worth it if you're a studio or an agency.

If you're looking to customize your Squarespace website even more, check out the code shop for unique modifications that are sure to set you apart from your competition!

Browse the Code Shop ➔