Quote Block Style Four

Submitted by Inside The Square

Quote Block
Style Four

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

Quote Block Text Color.png

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

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;
}

Step Three

Quote Block Main

Adjust the background color and border right values to your liking.


Quote Source Text

Adjust the color, font size, and padding to your liking.


Save and refresh the page. 👍

Moov Labs