I have a lot of favorite CSS code snippets that I use on a regular basis to design Squarespace websites and customize them for my clients.

Here are five that I use frequently and are super simple to add to customize the look and feel of your Squarespace website.

Disclaimer: Before we begin, keep in mind that adding any custom code to your Squarespace website means that Squarespace won’t be able to offer support or troubleshooting for sites created or modified with custom code.

With that being said, adding some simple, yet effective code snippets can take your website to that next level.

*UPDATE SEPT 2022: Squarespace has released an update to their 7.1 platform called FLUID ENGINE, a drag-and-drop page editor that replaces the Classic Editor described in this blog post. At this time, it’s an "optional” upgrade that can be utilized for existing 7.1 platform users, but that may change in the future. Please click here to read more on the new FLUID ENGINE update.

Simple CSS code to add to your Squarespace 7.1 website using Classic Editor

1) Remove underlines on all website links

If you’re like me, you don’t love underlines on links. I think it makes the link and the text around it feel a little cluttered. Instead, I like to use color or bolding to denote a hyperlink. So when creating a new website in Squarespace, one of the first things I like to add to the custom CSS panel is the code for removing the underlines on ALL links.

But in Squarespace, not all links are created equal. What do I mean?

Some link underlines are treated as a “text-decoration”, while other link underlines are actually added as a background image. So what’s the simple solution?

Add this code snippet to your Custom CSS panel to remove ALL link underlines:

a {
text-decoration: none !important;
}

Need to target the links ONLY in the header or the footer? No problem. Add this code to your CSS panel:

header a {
background-image: none !important;
}

footer a {
text-decoration: none !important;
}

2) Add custom fonts to your website

Squarespace provides some great font options for customizing the header and paragraph fonts. However, my clients often have brand guidelines that call for custom fonts that aren’t available in the default list of Squarespace fonts.

To add your own custom fonts to Squarespace, follow these quick steps:

Navigate over to DESIGN > CUSTOM CSS. At the bottom of the CSS window, click on Manage Custom Files. Locate the font file(s) that you want to use and upload it.

NEXT:

Click back inside the Custom CSS panel window and add the following custom code:

@font-face {
font-family: 'YourFontName';
src: url(Your-Font-File-URL);
}

h1 {
font-family: 'YourFontName' !important;
}

THEN:

Replace the bolded items in the above CSS code with your own content. The YourFontName should be the name of your selected font. Be sure that you maintain the two ' ' characters on either side of your font name.

Highlight the Your-Font-File-URL, then hit delete, so that your cursor is positioned exactly between the two parenthesis. With your cursor blinking between the two parenthesis, click on Manage Custom Files. Click on your uploaded font file and the URL path will be immediately placed within the two parenthesis of your custom CSS. Click SAVE.

Note: You can also designate that same font for other headings or paragraph styles by adding a comma in between:

@font-face {
font-family: 'YourFontName';
src: url(Your-Font-File-URL);
}

h1, h2, p {
font-family: 'YourFontName' !important;
}

3) Change the mobile menu font size

While we’re on the subject of fonts… ever notice how the default font size for the Squarespace mobile menu seems a bit too large? Here’s a super quick CSS code snippet to remedy that. Simply modify the pixel size to your liking:

.header-menu-nav-item a {
font-size: 15px;
}

4) Display an image as a circle or oval

This is a really simple way to create a circular (or oval!) shaped image using just a bit of custom CSS. As in the example below, if you’re working with a square-shaped image, the result will be a circle. A rectangular-shaped image will result in an oval.

To achieve this look, you’ll first need to identify the image’s block number. I use a Chrome extension called Squarespace Collection/Block Identifier. With the extension turned on, you can isolate the block number of the specific image you want to target. Copy that block # and paste it in place of the block # in bold of the custom CSS below:

#block-yui_3_17_2_1_1623780980043_2315 img {
border-radius: 50%;
}

5) Hide images or text blocks for mobile view in Squarespace

When I’m designing a website for clients, I love having a blank canvas in which to design using both image and text elements. When in desktop view, of course my ‘canvas’ is wide open, with lots of space to work with. However, I also have to think about my clients’ site as seen on a mobile or tablet device… in which case my ‘canvas’ just became dramatically smaller, and my once large space may now look crowded or too busy with images. So what’s a designer to do?

I sometimes select and edit OUT images or text elements that really don’t need to be there when in mobile view. This’s not to say they’re not important pieces of the website or the overall design, but they may not be as necessary when conveying the main information in a concise (and smaller!) format.

Using the same Chrome extension I mentioned above, you can target the image or text block you want to eliminate for mobile view, and then add that block # to your custom css code. Copy and paste the CSS code below into your custom CSS panel, replacing the bolded block # with your own. The media query included in the code below tells the browser to apply this code ONLY when the website is viewed on a mobile device.

@media screen and (max-width: 640px) {
#block-yui_3_17_2_1_1623780980043_2315 {
display: none;
}
}

Featured