How to customize the quote block in Squarespace

Squarespace quote blocks are a powerful way to highlight important text on your website, but sometimes the default design options fall short of your creative vision. You can use the codes in this blog post to go beyond the standard design menu and use CSS to customize your quote blocks' colors and fonts.

In this tutorial, you'll learn how to:

1. Change the text color of your quotes

2. Modify the background color of the quote block

3. Adjust the font style and size

4. Alter the quote source text appearance

The video below is a pretty outdated, but the codes themselves are still great! Underneath the video you’ll find the codes and info on how to use them in Squarespace. The video will show you how to update them, so it’s still worth a watch if you’re new to custom code.

Here are the codes from this tutorial. Be sure to update the values style to make this work for your own unique website design.

/* 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
}