How To Make Your Squarespace Site Stand Out, Part 2: Custom CSS

Updated February 20th, 2020

In part 1 there were style tips to help you create a Squarespace website that stands out and represents your business.

In this article you’ll find ideas for making changes to your website using custom CSS. If you skip to the end there’s an amazing video on how to work out CSS changes for yourself.

A note about templates

Since I wrote this article, Squarespace has introduced a group of new templates, known collectively as 7.1. Every 7.1 template works the same as every other — there are no different style options for different templates as there were differences between the older “7.0” templates. The instructions in this article work for both 7.0 and 7.1. Where there are differences I’ll tell you.

---

1. Liven Up Your Images

The box you use to add images has three tabs, as shown. Click on Animations to add a little pzazz to your image.

Note: animating images used to require a CSS hack, but no more! I’ve left it in the article anyway.

---

2. Make Your Testimonials Stand Out

Testimonials are an extremely powerful way to add social proof to your website — and we humans do love to follow the crowd.

You can make a scrolling testimonial block without CSS. Create a new blog and add each testimonial to a separate page, as the post excerpt. You can then add a scrolling Summary carousel to any page you choose.

For a more complex way to achieve a similar effect, but with extra configuration options (different text colour, etc), check out this method of creating a scrolling testimonial with CSS code on Muno Space.

---

3. Add Outlines and Drop Caps to Paragraphs

These changes involve creating a new "class" in the CSS editor which you can use to define a paragraph in the Markdown block. First, define the new class to the CSS editor (this one is for a paragraph outline):

.blackBorder  {
       border: 1px solid #333333;
       padding: 10px;
       outline: #3333336 solid 1px;
       outline-offset: 1px;
     }

Then, add the paragraph of text to the page using the Markdown block, as follows:

Here's the definition for a new class ".intro", to style a paragraph (like the one at the top of this page):

.intro {
font-size: 22px;
font-style: italic;
font-weight: bold;
color: black;
line-height:28px;
}

.intro:first-child:first-letter {
font-style: normal;
float: left; 
font-size: 70px; 
line-height: 50px; 
padding-top: 6px; 
padding-right: 8px; 
padding-left: 0px; 
padding-bottom: 0px;
color: #00B8C2;
}

Play around with the values to get the precise effect you're looking for.

---

4. Hide underlining on links

I find colour is enough to pick out links. If you want to make the underlines disappear, add this code to the CSS editor:

.sqs-block-content a, .sqs-block-content a:visited {border: none !important;}

---

5. Adjust the Quote Block

The Quote block is a great way to pick out an important sentence in a blog post. Sometimes though the quote text looks a little muddled with the rest of the text. Adding a background colour helps it to stand out:

.sqs-block-quote {background: #eaeaea}

Again, play around with different colour values. For example, you could choose a very light version of one of your signature colours.

---

Learn How to Modify CSS On Your Squarespace Website

The video on this page is a really clear explanation of how to find and modify the CSS on your own Squarespace website. Once you've got the hang of it, nothing will hold you back!

---