The Three Ways to Customise CSS in Squarespace

How to customise your Squarespace Website with CSS

In this blog post, we’ll be learning the basics of adding CSS into Squarespace and also implementing a couple of projects that take minutes to add and tweak. 

Estimated Reading Time - 3 mins
Implementation Time - 5 mins for each mini-project
Level - Beginner/Intermediate

 

 

I’ve been redesigning Kicksmith for the new Course launch that’s coming up in July (shameless plug) and I’ve taken the regular Squarespace Templates to their limit with some awesome CSS Hacks and Tweaks. 
I thought I’d share a couple with you that you can see at work on the new Kicksmith site. 

 

 

So, you’ve chosen your template, you've added your content and now you'd like to get into the nuts and bolts of Squarespace and tweak the CSS. Squarespace makes this super easy to do and you can get some great results with only a couple of lines of code.

If you're not sure was CSS is or you'd like a refresher, here's what you need to know.

CSS = Cascading Style Sheets.
CSS is the style element of your website where you can style text, customise buttons, change borders and tweak positioning (kinda)… and that’s just for starters. The only limit is your imagination when it comes to CSS and Squarespace.

 

Branding Page Hack 

When I set up a new site, I add in a Branding page where I add every type of attribute to one page so I can see the effect of changing the Styling of the website. This helps when you are changing CSS across the site because it saves you checking each page for changes. 

Create a page called BRANDING and set it to ‘Disabled’ so only you can see it. 

I usually add in

  • Header Image
  • Header Text and button
  • Header 1
  • Header 2
  • Header 3
  • Header 4 - See below for code
  • Quote Text
  • Quote Box
  • Normal Text
  • Line
  • Newsletter Signup Form
  • Contact Form
  • Small, medium and large buttons
  • A Blog Summary like the one I use on my blog page
  • A product
  • Social Icons
  • And anything else you think you will use on your site

PRO TIP - Even though this works 99% of the time, it’s still good practice to check each of your pages before you launch to check the changes you've made.

 

 

The Three Ways you can customise your Squarespace using CSS

 

1. Using CSS on Individual Pages in Squarespace

Why do this? 

I like to make my homepage unique to grab the attention of viewers when they land on Kicksmith. So I go to town on styling it exactly like I want it. This changes every instance of the line that appears on the page.

Here’s how to do it

To change the styling of one page, you add your CSS into the ADVANCED menu of the PAGE Box. 

.sqs-block hr {
    border-top: 2px solid #e0afb8;
    border-bottom: none;
    background-color: rgba(255,255,255,0);
    padding-bottom: 0px;
    padding-top: 0px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

Remember to add <style> at the beginning of your CSS and close it with </style> when you add the code to the 

Example - The pink line on the current kicksmith.com home page is styled using CSS to turn it pink, make it slightly thicker and a bit of space has been added to the top and bottom margin. 

NOTE - This only works for regular pages and not blog, product or event pages. 

 

2. Adding CSS Site wide

Why do this? 

One of my favourite tricks is to make my site buttons standout more and look more like actual buttons. 

Here’s how to do it

To change the styling across the whole of your site, you add the code into the CUSTOM CSS section of the DESIGN MENU.

 

Here’s the code to round your buttons  - 

 

.small-button-shape-rounded, .sqs-block-button, .sqs-block-button-element--small, .medium-button-shape-rounded, .sqs-block-button, .sqs-block-button-element--medium, .large-button-shape-rounded, .sqs-block-button, .sqs-block-button-element--large, 
.newsletter-block, .newsletter-form-button
   {
	border-radius: 6px;
	box-shadow: .1em .1em .1em 0px #DC418F;
}

 

Border Radius changes the roundness of the button and Box Shadow changes the colour, position and blur of the shadow. 

The best CSS Box Shadow generator I’ve found is http://www.cssmatic.com/box-shadow 

And for your Border Radius, there is http://www.cssmatic.com/border-radius

 

There is no need to add <style> </style> tags because you are adding it to the Custom CCS bit on Squarespace. 

 

REMEMBER - Ensure you are happy with the CSS on all your pages when you save it. 

 

 

3. Adding CSS to a single part of a page, product or blog post.

Why do this? 

If you take a look at the Squarespace Templates Page, you can see a bit of custom code at work in the headers. I have the regular headers 1, 2, and 3 plus I’ve added a <h4> tag to make some of my titles use a different font. 

 

Here’s how to do it

There are two parts to this.

1. Add the custom code to CUSTOM CSS in the DESIGN MENU like before. this tells Squarespace to create a new Header type. 

h4 {
    font-family: "HelloBeautifulAlternates";
    font-weight: 400;
    color: #BE617A;
    font-size: 48px;
    text-align: center;
    line-height: 1em;
}

2. Add a Markdown Content Block to your page. Instead of adding a Text Block, you add a Markdown Block. Then you can add to following code wherever you'd like your h4 header.

<h4>Your Text Goes Here</h4>


Altering the CSS of your Squarespace website is really simple once you get your head around it. You just have to know how to do it, why you do it, what bits you need to change and you can create a totally unique website on Squarespace.
esigning the look and feel of your site without any restrictions really puts you in total control of taking your brand further. 


Hope you enjoyed learning about Squarespace Templates and if you're interested in learning more about Squarespace...

Join the Squarespace Academy! 

You’ll get access to our Website Checker Tool, the first chapter of our new book and all the downloads from our posts all in one place for FREE.

 

Want some more...