Squarespace Customization: How To Add A Branded Background + Border To Your Quoted Text

 
How To Add A Background + Border To Your Quoted Text (easy CSS customization on Squarespace) → click through for the full post!


Woop woop! I've been having so much fun getting these CSS/coding customization posts together for you!

This past year I really took a deep dive into the world of CSS + Squarespace and I'm excited to show you this super fun way to customize your block quotes.

Here's why you need to jump on this customization:

  • It's easy af to do.
  • It makes your site look so much more custom 💅🏼 (which is something all Squarespace templates could use right outta the box).
  • BONUS: It eliminates the need to create extra blog post graphics whose only purpose are to break up big chunks of text (meaning I've started saving SO MUCH TIME when writing long, technical blog posts - see it in action here).

A quick note:

This tutorial is a little more advanced than my average CSS tutorial because we're getting into things that are really going to make your site feel more custom - meaning you'll need to experiment with the code to get it just how you want it.

This customization will require an image you can use as your background. You'll need to find something chill (read: not busy) so it doesn't distract from the text that will be placed over it. I'm using a simple marble pattern that I sourced from Envato Elements.


Check out how I've customized my quoted text below. If you click and drag with your mouse you'll see that it's regular text, not an image. You can achieve a similar effect with the image block (poster style), but the image block requires you to upload an image while this trick only requires you to change your text formatting.

IT'S MAGIC.

This is a super simple trick using text that's been formatted to "quote" in the text editor. I love this trick because it mimics an image (which helps you break up large chunks of text) and is a great way to highlight important stuff you're saying. Plus there are like a bajillion ways you can customize yours, which is a great opportunity to strengthen brand vibes on your website.


To put this code into use all you have to do is type in text like normal then format it to be quoted text (that's one of your options when you're selecting normal body text, heading 1, heading 2, etc). You can also add in a quote content block to achieve this effect (if you don't mind there being quotation marks automatically added in).
 


Here’s the code:

Head into your Custom CSS panel (Design > Custom CSS) then copy and paste this code into the box....

blockquote {
  font-family: "Playfair Display", Georgia, Serif;
  font-size: 25px;
  letter-spacing: 1px;
  line-height: 1.7em;
  width: 90%!important;
  background-image:url("/s/IMAGE-FILENAME-HERE.jpg");
  border-color: #fabae6 !important;
  border-width: 15px 15px 15px 15px !important;
  border-style: solid solid solid solid !important;
  padding: 30px 30px 30px 40px !important;
}


@media only screen and (max-width : 1200px) { blockquote {
  font-family: "Playfair Display", Georgia, Serif;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1.7em;
  width: 85%!important;
  background-image:url("/s/IMAGE-FILENAME-HERE.jpg");
  border-color: #fabae6 !important;
  border-width: 10px 10px 10px 10px !important;
  border-style: solid solid solid solid !important;
    }
}


@media only screen and (max-width : 480px) { blockquote {
  font-family: "Playfair Display", Georgia, Serif;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1.7em;
  width: 73%!important;
  background-image:url("/s/IMAGE-FILENAME-HERE.jpg");
  border-color: #fabae6 !important;
  border-width: 10px 10px 10px 10px !important;
  border-style: solid solid solid solid !important;
    }
 }

The code snippet above includes three sections:

  • Quote customization for desktop
  • Quote customization for iPads (the part in the middle that says "max-width: 1200px")
  • Quote customization for mobile devices (the part at the bottom that says "max-width: 480px")
     

First you'll want to customize everything in pink (aka the font, background image + border color):

  • It might be helpful to create a test quote on an unlinked page that you can view while customizing.
  • Check here for more info on fonts + CSS and here for a hex code generator.
  • To customize your background image:
    • Simply delete "/s/IMAGE-FILENAME-HERE.jpg".
    • Type two quotation marks back in ("") then place your cursor in between the two marks.
    • Scroll down to "manage custom files", click the box then click "add images or fonts".
    • Find the image you want to use for your background then select open.
    • After it uploads, click the thumbnail image. It should fill in a file name for the image where your cursor was.
    • You may need to resize or adjust your image (in something like Photoshop or an online photo editor) to achieve the look you want or to help you get proper positioning of the image. My suggestion is to use something vague and low contrast so that you don't have to do any extra work for this trick.
  • If the customization didn't work, go back and make sure the file name is sitting in between your quotation marks that you typed in. If you didn't delete then re-type the quotation marks, go ahead and do that now (sometimes copying + pasting quotation marks can mess up the formatting).
  • One more reminder (because your user experience is important!), make sure your background image offers enough contrast so your text stays super easy to read!!
     

Other customizations:

  • You may want to adjust the font size, letter spacing and width percentage between the three sections. Use Squarespace's device view tool to toggle between phone, iPad + desktop views to get your customization just right.
  • You could totally eliminate the border and have just a background image if you wanted...
  • Or you could totally eliminate the background image and have just a border!
  • You can also play with the border style if you wanted to add a little more flair (just please be tasteful with your styling!!)
     

And here's a little comparison to show you why it's important to customize the styling for different devices...

Customize your Squarespace website with custom CSS // create a fake graphic by styling your quote blocks

The image on the left is what my quoted text looked like before I added in styling for different devices. I had to play around with the width percentage to get the white space even on both sides, and I reduced the font size, border width and padding until everything looked best on the smaller device). Side note: I kept everything the exact same between iPad + mobile view except for the overall width (iPad is 85%, mobile is 73%).

Don't forget you can use the block quote trick on any page with text, not just your blog posts :)

(PS I'm using this customization on a Brine family template so work through the steps below and let me know if you run into any issues.)