Add custom bullet points to text blocks and image blocks in Squarespace (7.0 & 7.1)

• 00
• 01
• 02
• 99

One of the very first tutorials I ever created on this blog had to do with adding custom bullet points using Font Awesome icons.

But after getting a few questions over the past year or so from Club members, I realized that HTML approach was unnecessarily complicated… and even useless when it came to adapting it to Image Blocks!!

With these things in mind, and given everything I’ve learned since the original post, I decided to redo that whole tutorial and show you a better, faster, and easier way to create custom bullet-pointed lists in both Squarespace 7.1 and 7.0, not just for Text Blocks but also for Image Blocks!

Now, if you’ve been working with Squarespace for a while you may be thinking: “B, can bullet lists be added to Image Blocks in 7.0?“ And the answer is NO, not natively. Or at least, not at the moment.

BUT, I do have a sneaky little workaround that I show you in the video to make that a reality.

So, without further ado, why don’t we jump right into it?

Tutorial

Overview & timestamps

1. 00:00 - Intro

2. 00:34 - How the original bullet points are created in Squarespace 7.1
   We’ll start out with 7.1, looking at where the original bullet points are located in the structure of a text block, and how they were added in there in the first place. This, to get a good idea of what the best approach would be to replace them with our custom image.

3. 02:00 - Reusing/adjusting the selector to make things more specific
   Once we find the code that’s being used to display them, we’ll decide whether we want to reuse the selector as is or modify it. I’ll show you what you can do if you want to make things more specific to a particular block on the site.

4. 03:38 - How the new custom bullet point will be added
   Now that we’re clear on how global the change is supposed to be, it’s time to take a look at the method we’ll be using to remove the current bullet point and bring in our image. background-image is what I often recommend in pseudo-element situations to have the most flexibility in terms of resizing and positioning!

5. 04:02 - Making code modifications to bring in the new custom bullet point
   Enough talk, it’s time to start with our changes!

6. 04:53 - Resizing of the bullet point area
   Noticing that the size we’re giving the bullet point container/area doesn’t match our values, we’ll have to take a few minutes to check what’s happening and how we can fix it.

7. 06:26 - Vertically aligning the custom bullet point
   We’ll use vertical-align here to make sure that everything looks good, but I’ll share with you WHY this works in this scenario so you can keep it in mind if you want to use the same property somewhere else.

8. 07:06 - Adding and adjusting the custom bullet point image
   FI-NA-LLY, we can bring in the custom image we want to use. I went with this one!

9. 10:13 - The problem with adding custom bullet points to image blocks in Squarespace 7.0
   Ok, now it’s time to switch gears and look at the problem of adding bullet points inside image blocks in 7.0.

10. 11:47 - The logic behind the workaround
    And with that in mind, I’ll show you how we can approach the issue right from the editor itself!

11. 15:59 - Creating the selector to add the bullet points
    Next up, it’s time to add the CSS that will help us target that “marked” text inside our image block, to be able to move forward with our customization.

12. 17:20 - A little class trick for image block types in Squarespace
    As a side note, I’ll give you a quick tip on the type of class you can look for when you’re trying to make things specific for ONE TYPE of image block. This is super useful when you’re trying to make changes for ONLY poster blocks, ONLY stack blocks, etc, in your projects.

13. 19:54 - Setting up the bullet point container
    Now that we’re clear on how we’re targeting our faux bullet point list, it’s time to bring in the properties that will help us build our little container.

14. 20:33 - Quick tip to keep in mind when creating a pseudo-element from scratch
    I’ll share another helpful nugget here that will save you a lot of headaches when creating your own ::before or ::after from scratch.

15. 21:40 - Bringing in the image and resizing it
    Image time! We’ll use the exact same approach as before and set up our little badge icon in our code.

16. 22:18 - Removing bold style from bullet point list
    And last but not least, we’ll remove the text style from the bullet point items to make sure everything looks as good as it does in 7.1!

That’s all for now!
Until next time,

B.

---

Full code

Note: for the 7.0 image block snippet, an additional float property was added to make sure the bullets sit to the outside of the text when there’s multiple lines present! If you don’t like the look, you can remove the part of the code marked as //alignment fix.

Squarespace 7.1

/*ADD CUSTOM BULLET POINTS TO TEXT BLOCKS (7.1 & 7.0) AND IMAGE BLOCKS (7.1) IN SQUARESPACE*/
ul[data-rte-list] li>:first-child:before {
  background-image: url(IMAGE.PNG);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 25px;
  margin-right: 10px;
  min-width: 0;
  vertical-align: middle;
  width: 25px;
}

Squarespace 7.0

/*ADD CUSTOM BULLET POINTS TO IMAGE BLOCKS (7.0) IN SQUARESPACE*/
.design-layout-collage .image-subtitle strong {
  font-weight: normal;
}

.design-layout-collage .image-subtitle strong::before {
  background-image: url(IMAGE.PNG);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 25px;
  float: left; //alignment fix 
  margin-right: 10px;
  vertical-align: middle;
  width: 25px;
}