Our top 10 favorite Squarespace 7.0 hacks!
Here at Clover & Crow, we’ve been building websites with Squarespace from the very beginning, and though their platforms are meant to be fairly turn-key ready, we also love to add our own customization to give each site a unique and more custom feel.
We wanted to share our top 10 favorite Squarespace code with you all, so you can have as much fun as we do!
The majority of this code is CSS, with the exception of one that will need to be added in 2 stages, but I’ll walk you through it ;) Also, we primarily build our sites with templates in the Brine family and so this code is written to work for those templates. They might work on others, but we can’t say for sure. Only way to know is to copy and paste it to see if it works! If you’re not sure what family your template is with, here’s a list for you to refer to: https://support.squarespace.com/hc/en-us/articles/115005308187-What-s-my-template-and-its-family-
First things first, if you haven’t already done so you DEFINITELY need to install the Chrome extension for Squarespace’s Collection/Box identifier which you can do so here. Basically, what this does is identifies the unique code for either the entire page or the block you’re trying to adjust so you can make changes to individual items instead of it effecting the whole site. Once it’s been installed, all you need to do is go to the page on your site you want to make adjustments to, click the extension icon on your browser and you’ll notice a bunch of boxes appear on the page. Find the identifying number hovering over the block you want to adjust, click on it and it will automatically copy the code to your clipboard. Then all you have to do is paste it in place of the block ID # in the CSS snippet!
Now, it’s important to note that any third-party code that you add to a site is not supported by Squarespace so if anything goes wrong, they are not authorized to help, just a heads up. With that being said, roll up your sleeves, here’s our top 10 favorite code snippets:
1. DISABLE ANNOUNCEMENT BAR CLOSE
Basically what this does is removes the X in the top right corner so the announcement bar stays active and people can’t close it. Handy if you always want to showcase a call to action and make the announcement bar feel more like it’s part of the design of the site.
//Disable Announcement Bar Close (x) -
.sqs-announcement-bar-close { display: none !important }
//-------------------//
2. REMOVE UNDERLINE FROM LINKS, BUT NOT BUTTONS
This is an AWESOME bit of code. Just because you don’t want to have an underline on your links, doesn’t mean you don’t want the outline around your buttons (if that’s something you’ve toggled in the Site Styles). This bit targets only the body copy so if you have a header link, you’ll want to add h1, h2, h3 before the p.
//Remove Underline From Links -
p a{
border-bottom: none !important;
}
//-------------------//
3. CUSTOMIZE YOUR CONTACT FORM
Customizing the form block in Squarespace is one of my favorite things to do. With this code you can adjust the color, the background color and adjust the thickness of the underline as well. Gives the whole look an elevated feel and great for matching any branded colors!
//Custom Form Code -
.form-wrapper .field-list .field .field-element{
border: none;
border-bottom: 3px solid;
border-color: #FE7101;
background: #fff;
}
//-------------------//
4. CHANGE SOCIAL LINK HOVER COLOR IN FOOTER
This is a neat bit of code that can also add more customization and continue the feel of the brand by changing the color code to match your client’s needs. The first fill color changes the icon color and the second changes the hover color.
//Change Social Links Icon Color -
.sqs-use--icon { fill: #252525 !important; } .sqs-svg-icon--wrapper:hover { .sqs-use--icon { fill: #c6b19b !important; } }
//-------------------//
5. ADJUST FOOTER PADDING
Most times, I find the footer has just wayyyyy too much padding. Here’s some code to adjust as desired.
//Adjust Footer Padding -
.Footer { padding-bottom: 0;} .Footer-inner { padding: 20px 40px; padding-bottom: 0;}
//-------------------//
6. IMAGE BLOCK CAPTION BELOW TEXT FORMATTING
The font options for the caption below text under an image block leaves much to be desired. Fortunately, we have code for that! Adjust the size, weight and letter spacing! Oh, and we’ve adjusted the text alignment as well!
//Image Block Caption Below Text Formatting -
.sqs-block.image-block .image-caption-wrapper p { font-size: 13px;
text-align: center;
letter-spacing: 2px;
font-weight: 400 !important;}
//-------------------//
7. ADJUST TEXT BLOCK PADDING
If you find that your text block padding is a little too close for comfort, and you want things to have some room to breathe, here’s a bit of code to help. Here’s where you’ll want to use that Chrome extension. Once you have copied your block ID #, paste it in place of the one in the below code.
//Text Block Padding -
#block-yui_3_17_2_1_1531412303725_52255 {
margin-left: 45px;
margin-right: 45px;
margin-top: 0px;
margin-bottom: 0px;
}
//-------------------//
8. MAKE INSTAGRAM BLOCK FULL WIDTH
A recent discovery that I’m totally loving! Here’s some code to make your Instagram social block full width. The only thing with this code is you have to add the IG block to its own Index page, and name that page Instagram. Drag the index page where ever you want it to sit and voila! I have mine sit above the footer which has a background color of #2b2b2b and because this code leaves a little band, I just made the background of the index page match. Feel free to change that color code to work for you.
//Instagram Full Width Code -
#instagram {
background: #2b2b2b;
}
#instagram {.Index-page-content
.Index-page-content
{ padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
margin-bottom: -160px;}
}
//-------------------//
9. ADD A VERTICAL LINE
This is a super fun bit of code, but one that you’ll need to do in 2 stages.
First, you’ll want to add a code block on the page where you want the line to sit. Add the following code to that code block:
<div class="vertical-line"></div>
Next, go to the CSS panel and add the rest of the code below and you’re good to go! Adjust the height and width as desired.
//Vertical Line Formatting -
.vertical-line {
background: #000;
width: 1px;
height: 250px;
margin: 0px auto;
}
//-------------------//
10. COOKIE BANNER FORMATTING
Last on our list is adjusting the cookie banner. Here you can change the background color, font family, font size, letter spacing and more.
The first snippet of code adjusts the background color and if you increase the border radius number, it rounds the corners of the background.
The second snippet of code changes the body font and the third snippet changes the button font color.
//Cookie Banner Formatting Desktop -
.sqs-cookie-banner-v2 {
background: #b5c4c6 !important;
border-radius: 0px;
}
.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 a {
color: #fff !important;
font-family: apres;
font-size: 12px;
letter-spacing: 1px;
font-weight: 500;
}
.sqs-cookie-banner-v2-accept {
color: #fff !important;
}
//-------------------//
Note that if anything here isn’t working for you, you might have to add !important; to the end. For example:
Here’s the original vertical line formatting code:
//Vertical Line Formatting -
.vertical-line {
background: #000;
width: 1px;
height: 250px;
margin: 0px auto;
}
Here it is with !important; added:
//Vertical Line Formatting -
.vertical-line {
background: #000 !important;
width: 1px !important;
height: 250px !important;
margin: 0px auto !important;
}
And that’s it! Hope you all have as much fun customizing your Squarespace sites as we do!
~
Cheers,
Amy.
