6 Must-Have Codes For Squarespace 7.0 (Brine Family)
First off, what is CSS or custom code? CSS, short form for Cascading Style Sheets, is a language used to describe styling which can affect images, fonts, colours etc. It is separate from HTML and Javascript and mainly used to change the visual appearance of your website.
If you are DIY’ing your Squarespace website or just diving into the world of custom code, then these 6 CSS codes may be for you.
These will work on the Brine family templates in Squarespace version 7.0. As a Squarespace web designer, they are my go-to’s and make an appearance on most websites I have built.
If you have not used a Block ID finder before, start with Step 1 so you can make your life easier.
Step 1: Download the Squarespace ID Finder Extension
Download the Squarespace ID Finder tool in Google Chrome Extensions. This tool is life-changing if you want to save time from using the Dev Inspect tool. Once you download this, ensure it’s pinned to your toolbar for easy access in the future.
When you click on the extension icon, all of your block IDs will pop up for your reference. You will copy and paste these block ID’s whenever you are using CSS that requires them. Here’s what you will see:
You won’t use #blockid for every CSS code, however, it comes in handy for making quite a few changes to your website.
Where does the CSS go?
You’re going to COPY & PASTE the below codes into the CSS panel located under DESIGN > CUSTOM CSS.
Anytime you see #BLOCKID, you will use the Block Identifier to copy & paste the full #block-yui code. Wherever you see #00000, you’re going to replace that colour with your custom HEX colour.
Let’s get to it!
01. Change Social Links Block
Squarespace only offers ‘light’ or ‘dark’ options for the social block in 7.0. Super boring. The below code allows you to choose a fill colour (the green) and also a hover colour (yellow). Enter your custom colours for your unique brand. If you don’t want a hover effect, just use the first half of the code for the icon and add an extra } to close it.
note, I am now on 7.1, so the effect is not enabled, but will work on your website.
//Change Social Links Icon Color//
.sqs-use--icon { fill: #000000 !important; }
.sqs-svg-icon--wrapper:hover { .sqs-use--icon { fill: #00000 !important; } }
//end//02. Background Colour Behind Text Block
Sometimes you want to draw attention to some text, whether in a blog, a call to action, an update, a testimonial, or add a background behind text on a banner so it’s easier to read.
The options are endless. Here, you will add your block ID, your custom #hex code and you can adjust the padding from 40px to either smaller or larger. This will affect the size of the background behind your text. If you want it left or right-aligned, then change the ‘center’ to left or right.
This text has a background colour behind it to draw attention
//background colour behind text block//
#blockidhere {
background: #000000;
padding: 40px;
text-align: center;
}
//end of background colour//03. Adjust Button Width & Height
Anyone else find the Large button obnoxiously big? Just me? Below is an example of how you can change the button padding so it is consistent for all of your buttons. If you just want to minimize one, go for it. The first number is your height and the second is your width so adjust accordingly.
Note: I have now moved my website to 7.1 so the buttons are styled differently than the code below.
//buttons all same width//
//SMALL BUTTON SIZE//
.sqs-block-button .sqs-block-button-element--small {
padding: 10px 30px;
}
//MEDIUM BUTTON SIZE//
.sqs-block-button .sqs-block-button-element--medium {
padding: 10px 30px;
}
//LARGE BUTTON STYLING//
.sqs-block-button .sqs-block-button-element--large {
padding: 10px 30px;
}
//end//04. Stop Text From Hyphenating
This is a must-have as well. It’s not ideal for your website to be filled with hyphens, which is most common on mobile. The below code will adjust the text so that a longer word starts on a different line instead of having hy-phnes.
//Hyphenation stop//
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
//end//05. Remove the Mobile Bar at the Bottom of the Screen
This is also a really easy one. For whatever reason, there is an option for a mobile bar styling with Brine. You might see this as a white line across the bottom of the screen on mobile - unless you changed the colour in mobile settings.
This handy code will just remove this bar altogether since it’s pretty much useless anyway.
//remove mobile bar at bottom/
.Mobile-bar.Mobile-bar--bottom {
padding: 0!important;
}
//end//06. Remove Hyperlinks in Footer Navigation
This is a bonus as I was originally going to do Top 5. However, I think it’s a must-have as well. To clean up the footer, rather than having your links underline, this code will remove that underline so everything looks nice and minimal.
//remove hyperlink footer//
.Footer a {color: #000000!important; border-bottom-style: none !important;}
//end//That’s it! I do have a handy library of MANY more codes and of course, the internet of Google can find almost anything. However, this is a round-up of the must-haves for every website to add a bit more of a custom touch!
