Quote Block Style One

Look Demo

Change up the quote block’s look with this simple style. This plugin uses css editor and works with all template families.

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Quote Block Main //

.quote-block figure {
  border-left: 5px solid #000000 !important;
  padding-left: 20px;
  text-align: left; 
  padding-bottom: 20px; 
  padding-top: 20px; 
} 

// Quote Source Text //

.sqs-block-quote .source {
  color: #000000 !important; 
  text-align: left !important; 
  text-transform: uppercase; 
  font-size: 12px !important; 
  letter-spacing: .2em;
} 

// Quote Block //

.quote-block blockquote>span:first-child { 
  display: none; 
} 

.quote-block blockquote>span:first-child, .quote-block blockquote>span:last-child { display: none;
} 

figcaption::first-letter { 
  font-size: 0;
}

Customize

Adjust both #000000 color values to your liking. One targets the vertical line and the other the source of the quote.

License

This plugin comes with an Unlimited Use License. View License Terms