Quote BlockStyle Two

Submitted by Inside The Square

Quote Block
Style Two

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

QBTwo.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 {
  padding-left: 20px; 
  text-align: left; 
  padding-bottom: 20px; 
  padding-top: 20px; 
} 

// Quote Source Text //

.sqs-block-quote .source {
  color: #000000 !important; 
  text-align: right !important; 
  border-top: 1px solid #000000 !important; 
  margin-top: 10px !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;
}

Step Three

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

Save and refresh the page. 👍

Moov Labs