Jump to content

Custom Bullet Points in one section only

Recommended Posts

Hi there,

I am new to css, so thanks a lot in advance for any help. I managed to get custom bullet points to my squarespace site which is great. However, I need to have different bullet point styles on different sites. Right now, the newly added custom bullet points appear in any new list. How could I solve this issue? This is the css code im using right now for the general bullets.

/* custom bullets */
ul[data-rte-list] li>*:first-child::before {
    content: "☑" !important;
    font-weight: 900 !important;
   font-size: 2rem !important;
}

 

On certain sites I would want to have this custom bullet instead: "✗"

Thanks in advance for any help!
Sebastian

Link to comment
  • Replies 1
  • Views 220
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

6 hours ago, Sebastian_KB said:

Hi there,

I am new to css, so thanks a lot in advance for any help. I managed to get custom bullet points to my squarespace site which is great. However, I need to have different bullet point styles on different sites. Right now, the newly added custom bullet points appear in any new list. How could I solve this issue? This is the css code im using right now for the general bullets.

/* custom bullets */
ul[data-rte-list] li>*:first-child::before {
    content: "☑" !important;
    font-weight: 900 !important;
   font-size: 2rem !important;
}

 

On certain sites I would want to have this custom bullet instead: "✗"

Thanks in advance for any help!
Sebastian

You can select the block id /section id to combine with your code to set your style only on the target block/section. Something like:

#blockid ul[data-rte-list] li>*:first-child::before {
    content: "☑" !important;
    font-weight: 900 !important;
   font-size: 2rem !important;
}

Use the following extension to get your id

Squarespace ID Finder (google.com)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.