Custom styling for Quote Blocks in Squarespace

It's often that I've not liked the theme styling for block quotes in Squarespace, had a client tell me they didn't like the quote styling, or both. Unfortunately, against my best advice, the client always just wants to use the h1 or h2 styles on text to highlight quoted material. Or worse, they just bold the paragraph. Going this route usually makes the source line look extra stupid—and you always need the source line!

This is all unfortunate because using a <blockquote> element (Squarespace Quote Block) provides significant semantic and structural meaning to the code and content. If you format a line of text has a Heading 2 or make it bold, all of that context is lost. Any machine trying to understand your page content, be a search spider, the AMP engine, an RSS reader, or an accessibility device, is going to misrepresent that content to the detriment of it's meaning and the user.

Quote Block vs <blockquote>

Quick bit of clarification: when say "use a blockquote" on Squarespace (SQS), what I mean is to "insert a Quote Block" using the editor. Behind the scenes, the SQS Quote Block uses an html <blockquote> element for that content.

Inserting a Quote Block in the Squarespace editor. Click for the help docs.

Customizing the style of the SQS Quote Block

So, I want to use proper blockquotes and I want my clients to use proper blockquotes, so I had to solve the styling issues.

I poked around on the web (links below) this morning to find the correct CSS elements and classes that generate and style Quote Blocks. Here's the custom CSS I ended up with and just deployed on a client's site:



//Custom Squarespace BLOCKQUOTE styling. (Formatting generated with hilite.me)


//Style the container the quote is in
.quote-block figure {
  //padding values are top, right, bottom, left
  padding: 0px 10px 0px 10px !important;
}


//Style the little special quote marks
.quote-block blockquote>span:first-child {
  float: left !important;
  display: block;
  opacity: 1.0;
  font-size: 2em !important;
  color: #2D1894 !important;
  position: absolute; top: 0px; left: 0px;
  padding: 10px;
}


.quote-block blockquote>span:last-child {
  float: right !important;
  display: block;
  opacity: 1.0;
  font-size: 2em !important;
  color: #2D1894 !important;
  position: absolute; bottom: 0px; right: 10px;
}


//Style the quote text/content
.sqs-block-quote blockquote {
  //margin: 0px;
  //padding-right: 0px;


}
//Style the quote source line
.quote-block .source {
  float: right !important;
  display: block;
  opacity: 1.0;
  padding: 0px;
  font-size: 100% !important;
  color: #2D1894 !important;
  color: #2D1894 !important;
}
Feel free to use and modify that CSS. It comes with no warranty or guarantee, though. I can't promise it won't mess up your site.

To use it, paste the code into the Custom CSS editor found in the menu under Design > Custom CSS. More info on using Custom CSS in SQS here.

Sources:

  1. https://answers.squarespace.com/questions/37282/how-do-i-remove-the-quotation-marks-in-the-quote-block.html
  2. https://answers.squarespace.com/questions/123791/fulton-quote-block-remove-quote-markschange-colour.html
  3. https://answers.squarespace.com/questions/10111/how-can-i-change-the-appearance-of-blockquotes.html
  4. http://stackoverflow.com/questions/8005219/css-how-to-set-position-absolute-of-a-span-inside-a-relative-position-div-which
BlogCasey HancockCSS, WebDevelopment, Squarespace5 Comments