Quote Block Style Three

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 {
  background-color: #000000 !important;
  padding-left: 20px; 
  text-align: left; 
  padding-bottom: 20px; 
  padding-top: 20px; color: #FFFFFF !important; 
  border-left: 15px solid #666666
} 

// Quote Source Text //

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

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

Quote Block Main - Adjust the background color and border left values to your liking.

Quote Source Text - Adjust the color, font size, and padding to your liking.

License

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