Squarespace CSS Code Hacks and Tips (with videos)
In this world of many websites, and a competition online which is set to soar in years to come, it's really handy to know a few CSS hacks for your Squarespace website customisation. Squarespace definitely allows CSS codes to be written into the design, and in this blog post we’ll run through a few of them to show you some really nice tips.
By no means do you have to be a website designer on Squarespace, and by no means need to know CSS. You can most definitely create a beautifully minimal site, using the built in design tools. Also, you don’t have to be a CSS coding wiz in order to customise your website. There are plenty of blog posts (like this one) and YouTube videos which will give you some simple codes to use.
A Short Demo Video ..
We have created quick demonstration videos, to show you where to go to input your CSS code into your Squarespace website.
Squarespace 7.0 - Where to add your custom CSS
Squarespace 7.1 - Where to add your custom CSS
Squarespace CSS Codes Hacks
How to Create a Down Arrow
Here is how to create a down arrow on your page, where you can control the thickness of the arrow lines, as well as the size and colour of the arrow.
Input the below for the CSS Code:
.down-arrow { border: solid hsl(208, 30%, 30%); border-width: 0 1px 1px 0; display: block; padding: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin: 0 auto; width: 0%; }.down-arrow-container { text-align: center;}
Input the below as a code block:
In order for your site to recognise where you want the arrow on the page, you need to input the following html code in as a ‘code block’ on Squarespace. This is the same on both versions 7.1 and 7.0.
HTML Code:
<div class=”down-arrow-container”><div class="down-arrow"></div></div>
How to Create Vertical Text
You can add some quirk to a section of your page and create a vertical header/text block, like shown in the image below.
Custom CSS Code:
@media screen and (min-width: 640px) { h1 { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; position: relative; right: 10px; } }
Be careful though, because if you’re applying this code to ‘h1’ (Header 1), then this will be applied site wide. So if you use a Header 1 elsewhere on the website, this will also be made vertical (quite important to bear in mind).
How to Create a Full Width Carousel
You can create a summary carousel that spans into full width on the page, like shown in the image below. This code makes the overflow of the carousel ‘visible’ into the page.
Custom CSS Code:
#block-id .sqs-gallery-design-carousel .sqs-gallery-container { overflow: visible;}
The block ID (#block-id) can be found using a Squarespace block identifier extension, which can be installed for free into your Chrome. This can be found by simply typing ‘squarespace block identifier chrome’ into Google.
How to Create a Hover Button
Here is a code to create a cool hover and shadow effect, for a large button. Again, you can change the colour and padding of your button according to your site design.
Custom CSS Code:
.primary-button-style-outline .sqs-block-button-element--large {border: 1px solid #c79288; box-shadow: 4px 4px 0px 0px #c6a39d; padding: 10px 20px; transition: all 0.3s ease 0s; }.primary-button-style-outline .sqs-block-button-element--large:hover{ box-shadow: -4px -4px 0px 0px #c79288; opacity: 1 !important; }Change the colour of your button by replacing the hex code (# number) with the one you need. We like to use Convert a Colour.
How to Change Line Widths
Squarespace has a really slick looking line block, and here is a simple code to change your line’s width for a little extra customisation.
Custom CSS Code:
#block-id {.sqs-block-content hr { width: 50%;}}How to Change the Text Box Colour
If you want to change the colour of one of your text boxes, you can use this simple code. By changing the hex code (#) below, you can change this to the colour that you need.
Simple colour converting sites like this one, Convert a Colour, are great at helping converting from ‘hex’ to ‘rgb’ and vice versa.
However, a little helpful tip, Squarespace now accepts hex codes into the site styles which may help with getting the exact colour you need.
Custom CSS Code:
#block-id {background: #f0f0f0;padding: 50px;text-align: center;}Change the colour of your text box by replacing the hex code (# number) with the one you need. We like to use Convert a Colour.
How to Create a Partial Text Highlight
This code is to add a partial highlight to your text, which adds a little quirk to your website. Below we walk you through adding this code to your Custom CSS, in addition to the Code block you need to add (instead of a Text block) to add the html code.
Custom CSS Code:
.highlight {background: linear-gradient (180deg,rgba(255,255,255,0) 30%, #D9D9D9 60%);}HTML Code:
First, insert a code block where you want your text to be. Add this html code into your code block, and you need to input your own text below (in bold):
<p><span class="highlight">Example Text Goes Here</span></p>