Customize Your Squarespace Site with Simple CSS Tricks: Part 1

Customize your Squarespace website with simple CSS (Part 1). Click through to read →

if you're ready to kick the customization of your Squarespace website up a notch, this tutorial is for you! Last week I covered the basics of CSS and Squarespace as a precursor to this series - so make sure to check back if you need any help getting started.

While Squarespace already gives you a lot of customization options with fonts, colors and content blocks, diving into CSS will let you customize even further and help you suit Squarespace templates and features to your business's look and feel.

There are SO many possibilities, and today I'm sharing three of the easiest tricks I know to help you make your website even more unique to your brand!

01 | Adjust the color, height and padding of the horizontal line

Has the spacing around the horizontal line ever bugged you? In it's original state I always find that the white space around it can be a bit awkward. I also think that making that line just a little thicker and incorporating your brand's colors can really make your brand feel less template-y and more custom!

Here's a comparison of the horizontal line in it's original state versus the line with a little custom coding:

With these minor adjustments I've taken out the extra white space, thickened up the line a bit and matched it to my brand colors. Here's the exact code I used to customize the horizontal lines in the example above:

.sqs-block-horizontalrule hr {
  background-color: #70aaaf;
  height: 3px;
  margin-top: 0px;
  margin-bottom: 0px;

All of the items in bold are what you'll need to change up to customize this feature! For color consistency, I'd recommend grabbing the "background-color" hex code from a color used in your Style Editor page.

02 | Customize social icon colors (knockout style only)

I love this customization because it allows two things to happen with my social media icons: 1) it incorporates my brand colors and 2) makes my social media icons feel a little more interactive and special. It's the little things that count sometimes! :)

Here's a breakdown of the before and after:

As you can see, beforehand my social media icons were a basic black color. The only options given to me were to make them "dark", "light" or "standard". With the snippet of code below I was able to customize the colors to my brand and create a little more interest with the hover feature. .sqs-use--mask {
  fill: #70aaaf;
} .sqs-svg-icon--wrapper:hover .sqs-use--mask {
  fill: #aed2c9;

Again, all of the items in bold are what you'll need to change up to customize this feature. Also note that this code only works out for knockout style social icons.

03 | Customize the pre-footer area with an image

The last little CSS trick I want to show you is how to customize your pre-footer area (if your template gives you this option). My template, Anya, comes with the option of changing out the background color, but what if you want to make that background an image instead, like my example below?

Lucky for us it only takes another simple piece of code to make this impactful change!

div#preFooter {
  background-image: url('http://customimageURL.jpg');
  background-size: cover;
  max-width: 100%;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;

The only customization needed for this code is your background image. For this part I uploaded an image to Photobucket then used the "direct URL" to copy and paste it into my CSS. For your own image, just make sure it's something larger, like 2500px or the like - you just want to make sure that the quality stays there even when it's viewed from a larger screen : )

I'll be back next week with part 2 of this series! Let me know if you have any specific CSS or customization questions in the comments below!