Jump to content

How can I change the appearance of blockquotes?

Recommended Posts

I'm trying to change the appearance of my blockquotes. I'm using this CSS:

blockquote {
   width: 90%;
   border-color: #ef420d;
   border-width: 5px 5px 5px 5px;
   border-style: solid solid solid solid;
   padding: 5px 5px 5px 5px;
   background-color: #eee;

But only the width: 90% line is having any effect. The rest of the blockquote appearance is unchanged. What am I doing wrong?

Link to comment
  • Replies 8
  • Views 26.4k
  • Created
  • Last Reply

Here is my CSS for my personal site. Hopefully, you can manage to swap in what you want.

.quote-block .quote {
background-color: #f5f5f5;
padding: 30px 20px 30px 55px;
font-family: Georgia, serif;
font-size: 14px;
letter-spacing: 1px;
font-style: italic; 

blockquote {
   margin: 0 30px;

span {
   display: block;
   font-size: 64px;
   margin-left: -55px;
   margin-bottom: -45px;
   padding-top: 20px;

   &:last-child { display: none; }



.quote-block .source {
   background-color: #eee;
   color: #4cb982;
   padding: 5px 20px;
   font-style: italic;

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment

I've had some blockquote issues using different templates. Some seem to need the !important tag. Try adding it after each line like this and see if it does the trick.

blockquote {
   width: 90% !important;
   border-color: #ef420d !important;
   border-width: 5px 5px 5px 5px !important;
   border-style: solid solid solid solid !important;
   padding: 5px 5px 5px 5px !important;
   background-color: #eee !important;

Squarespace Designer / Developer over @ Hop Creative.

Link to comment
  • 1 year later...

Can someone here tell me what CSS to use to just change the font color of the quote block? I am using the Marquee Template and it wont let me adjust the color in the style editor. I'd really appreciate it, thanks

Link to comment
  • 2 months later...

is this code all you have to insert to the header? In my case (montauk template) it does not do anything and the "span" and "blockquote" lines are even considered errors (shown in red)...

Link to comment
  • 4 years later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.