Use CSS To Customize Each Bullet Point: Squarespace 7.1

I’ve been working on a site lately (spoiler: it’s our wedding site) and I went down this MAJOR rabbit hole trying to find how to customize each specific bullet point for Squarespace. I ended up figuring it out after combining multiple articles and consulting my own website. (I learned the most and borrowed elements of the code from Kayleigh Nicole’s blog)

So here’s the deal.

Standard bullet points:

• Looks
  • Like
  • This

Yours might be a bit different depending on the fonts you’re using and the sizing. But none of that matters because I’m going to show you how to change it into something that….

• looks

  • like

    • this :)

Let's get into it!

First thing is isolating which bullet point is which. The main bullet point is a “circle”, which is why part of the code has =circle in it.

Here’s the code to use for the main bullet point styling:

/*--main bullet circle--*/
ul[data-rte-list=circle] li>:first-child:before,ul[data-rte-list=default] li>:first-child:before
/*edit below this line*/
{content: "\2739" !important;
  color: #31351E;}

You can copy and paste that directly into your CSS editor in Squarespace. Find the line that says “/*edit below this line*/”. You can edit below this!

The content portion is the image of the bullet point. (You can make them all the same or you can make them different. To find the bullet point image code, pull it from here. You can totally use emojis, stars, hearts, etc.

The next part of the code is going to be about editing the text after the bullet point. Obviously if you already like the way your text looks then skip this part.

You can edit in between the two brackets { }. em is a great way to write font size in css because it’s based on the previous text. I highly encourage you to play around with it.

Obviously there is color too. You can add more code in between the brackets as well.

/*main bullet point circle text*/
ul[data-rte-list=default] li>:first-child 
{font-size: 1.1em;
color: orange;}

So then we can repeat for the second bullet point.

/*--second bullet circle--*/
ul[data-rte-list=circle] li>:first-child:before, ul[data-rte-list] ul[data-rte-list=default] li>:first-child:before
{content: "\2738" !important;
  color: #A45D29;}

/*second bullet point circle text*/
ul[data-rte-list] ul[data-rte-list=default] li>:first-child {font-size: 1em;}

And the third.

/*--third bullet square--*/
ul[data-rte-list=square] li>:first-child:before, ul[data-rte-list] ul[data-rte-list] ul[data-rte-list=default] li>:first-child:before
{content: "\2736" !important;
  color: #DFA67D;}

/*third bullet point square text*/
ul[data-rte-list] ul[data-rte-list] ul[data-rte-list=default] li>:first-child {font-size: .8em;}

If you want to apply this to a specific page, be sure to grab the section ID or the page ID. I love using the Chrome Extension (Find Squarespace IDs).

And as always, if you have any questions about any of this, drop it in the comments and I’ll help out :)

Subscribe To The Craig Chronicle

One email a week. No spam, I promise.

Read more on The Craig Chronicle…