Add custom bullet points to text blocks and image blocks in Squarespace (7.0 & 7.1)
In today's video, we'll be looking at how we can create custom bullet points for bullet-point lists in Squarespace, for both text blocks AND image blocks.
The process is fairly straightforward for 7.1, but not so much for 7.0, specifically when it comes to images.
However, there IS a CSS workaround you can use that's pretty client-friendly!
So, if you're interested in learning how to make this happen for your current or upcoming project, take a look at the tutorial.
You can grab the code over here (it includes a quick fix for the alignment of the bullet points for image blocks in 7.0!):
https://beatrizcaraballo.com/blog/cus...
-----------------------
//Timestamps
00:00 - Intro
00:34 - How the original bullet points are created in Squarespace 7.1
02:00 - Reusing/adjusting the selector to make things more specific
03:38 - How the new custom bullet point will be added
04:02 - Making code modifications to bring in the new custom bullet point
04:53 - Resizing of the bullet point area
06:26 - Vertically aligning the custom bullet point
07:06 - Adding and adjusting the custom bullet point image
10:13 - The problem with adding custom bullet points to image blocks in Squarespace 7.0
11:47 - The logic behind the workaround
15:59 - Creating the selector to add the bullet points
17:20 - A little class trick for image block types in Squarespace
19:54 - Setting up the bullet point container
20:33 - Quick tip to keep in mind when creating a pseudo-element from scratch
21:40 - Bringing in the image and resizing it
22:18 - Removing bold style from bullet point list
-----------------------
//Helpful links
⇝ Find the code you need amongst hundreds of Squarespace tutorials and snippets: https://beatrizcaraballo.com/codebase
⇝ Receive new Squarespace CSS tricks and exclusive offers on an often-ish basis: https://beatrizcaraballo.com/vip
⇝ Get in touch: https://beatrizcaraballo.com/contact