Bringing back the quote block line in Squarespace (7.0, 7.1 CE & 7.1 FE)

• 00
• 01
• 02
• 99

This week’s Squarespace CSS trick was inspired by a question made inside the Club.

One of our members was wondering why the heck the quote block line in text blocks was disappearing when she visited the live mode of her client’s site, when she could see it perfectly while editing the page.

It’s a pretty weird issue that I hadn’t noticed before, so I thought I’d share with you a quick solution to tackle it (and style it) and make sure that the line always show up.

So, if you’re curious about why that’s happening and how to fix it, jump right into the video!

Tutorial

Overview & timestamps

This tutorial is going to be short and sweet with just the right amount of nerdiness to fully understand the mystery behind the vanishing quote block line:

1. 00:00 - Intro
   Just so that we’re on the same page, I’ll first give you a quick preview of the issue I’m referring to.

2. 01:21 - Inspecting the quote block line inside edit mode
   Then, to be able to understand why the line magically disappears, we’ll take a couple of minutes to see what’s actually going on through the Inspect Element tool while on edit mode.

3. 03:38 - Deciding what needs to be altered to reuse the same Squarespace snippet
   Once we find the culprit of the vanishing act, we’ll look into how we can easily reuse a modified version of the current selector to make sure the line stays put at all times.

4. 05:32 - Creating the new selector and adding the styles
   Next up, we’ll try things out inside our Custom CSS window and check that everything’s working correctly on the live site.

5. 06:20 - Changing the width and color of the quote block line
   We’ll make some quick changes to the styles as well, because why not!

6. 06:38 - Changing the width of the quote block line in 7.0
   And last but not least, we’ll hop onto Squarespace 7.0 to see what’s going on in that version and find out which snippet we can reuse to make a slight alteration to the border’s thickness and color.

Alrighty! And that’s everything I have for you today.

A super simple CSS trick to bring back the quote block line in Squarespace 7.1 and modify its width in 7.0.

Until next time,

B.

---

Full code

Note: either snippet can be used for either version of Squarespace. They both target the exact same thing with the same approach, just a different class is used!

Option #1: If wanting to edit the padding too

/*BRINGING BACK THE QUOTE BLOCK LINE IN SQUARESPACE (7.0 & 7.1)*/
.html-block blockquote {
  border-left: 2px solid #00c;
  padding: 1px 10px 1px 20px;
}

Option #2: If just wanting to modify the border styles

/*BRINGING BACK THE QUOTE BLOCK LINE IN SQUARESPACE (7.0 & 7.1)*/
.sqs-block-html blockquote {
  border-left: 2px solid #00c;
}