How to customize the quote block in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will show you how to customize your quote content block in Squarespace.

There are three main code names (aka selectors) you can use to give custom background colors, borders, and even apply a custom font:

These are the code names (selectors) for your quote block:

The whole quote block:

.sqs-block-quote

The quote text:

.sqs-block-quote blockquote

The source text:

.sqs-block-quote .source

Here are the other codes from the tutorial:

Hide the dash before the quote source:

.sqs-block-quote .source:first-letter {font-size:0}

Hide the quotation marks:

.sqs-block-quote blockquote span{display:none!important}

Change the background color:

.sqs-block-quote {background: pink}

Give the quote a border and curved edges:

.sqs-block-quote{border-radius: 15px; border: 1px solid #000}

Change the font family of the quote block:

.sqs-block-quote blockquote {font-family: serif}

Change the font family of the quote source:

.sqs-block-quote .source {font-family: serif}