Four awesome Squarespace css customizations even you can make

One of the biggest benefits of using Squarespace is that you don’t have to any fancy tech language to create your website. Squarespace has tons of customizations built into it already that make it easy to use.

 
 Four awesome Squarespace css customizations even you can make.

Four awesome Squarespace css customizations even you can make.

 

But what about when you want to do even further in the design than style editor allows. Well that’s where pro designers use CSS - CSS stands for Cascading Style Sheets and it’s one of many (many) web design languages. CSS tells things how to look, so when you want red button, we use CSS to do that.

Now I know that sounds complicated, but guess what, you don’t have to understand how it all works to do some very minor updates to your Squarespace website. I might get wide eyes from my fellow designers for saying this, but you can just copy and paste some bits to make some simple customizations.

Ok, before we get into a few of my favorite simple CSS snippets to add to your Squarespace site, let’s talk quickly about where to put the the code.

You’ll paste the code in the Design tab under Custom CSS. Be sure to click save at the top to save, it’s really easy to leave the screen without actually saving it.

 
 

It’s important to note: custom CSS is not supported by Squarespace Support. If you have problem with this, they won’t help you. But the worst case scenario is that you have to delete CSS, it’s not that big of deal for what I’m going to show you today.

Now about the CSS snippets, I’m sharing, you’ll just copy and paste it directly into the Custom CSS box. The only thing you’ll need to do is update some places to match your own branding, I’ll explain in each bit.

1- Changing the colors of the social media icons.

In my opinion this should be available in the style editor for every template - but that’s a complaint for someone else.

For this snipped to work you want to have your icons set to knockout and white. Where you see the word color, you need to replace that with your hex color code! Make sure to include the #.

.social-icons-style-knockout.social-icons-color-white 
.sqs-use--mask {fill: #COLOR;}
.social-icons-style-knockout.social-icons-color-white:hover 
.sqs-svg-icon--wrapper:hover 
.sqs-use--mask {fill: #COLOR !important;}
Four awesome Squarespace css customizations you can make. How to change the color of your social media icons.

2. Change the thickness and spacing of the horizontal line.


The super skinny horizontal line just doesn’t cut it for me. I like to be able to see the line, and I like to control the amount of space around the link. This snippet allows you to control all of that! You can adjust the thickness of the line by changing the height. The background color is the color of the line, because some templates don’t let you change the color. And lastly you can play with the padding and margins to change the spacing around the line.

.sqs-block-horizontalrule hr {
height: 5px !important;
background-color: #COLOR;

padding-top:0px;
 padding-bottom: 0px;
 margin-top: 1px; 
margin-bottom: 1px;
}

3. Removing the underline on links.

This is a super simple change!

a { border: none !important;}

I personally like my links without a line and bold, you do want links to stand out among the other text. So I’ve added this bit of code to my site. Font font weight makes the text bold, you can adjust that number for more thickness to your font. Here’s an example of my link. Check out my services page!

a { border: none !important;
font-weight: 500}

Alternately, if you want the link to be thicker to match your brand you could use this code. Where is says 6px, you can change that number up or down to make the line thicker or thinner, just like we did with the horizontal line. And be sure to add your color hex code.

a { border-bottom: 6px solid #COLOR important;}

4. Change the color of a button on hover!

The default hover is that the button will get little bit transparent but with the snippet you have some fun with color.

.sqs-block-button-element--medium:hover {background-color: #COLOR;}

Now this is set up for medium size button, to make this work on the small or large buttons, just change the word medium to small or large. If you want to change the hover on all three buttons then just add this snippet for each size.

Now, I KNOW you’ve worked really hard to create your Squarespace site, but it’s just a missing a bit of the wow-factor - we should definitely chat! I can help you take your hard work and add a little somethin’ extra to push it over top with my Squarespace strategy calls or even a polishing session!