[Support request] Coloured bullet points

[Chris]

I used this CSS hack which I found in the forums to colour my bullet points orange, but it inserts bullet points in front of and above all of my main navigation menu items:

/* Coloured bullet points */
ul {
list-style: none; /* Remove default bullets */
}

ul li::before {
content: “\2022”; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: orangered; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}

Thanks,

cb.

[David]

Hi there,

target the entry-content of the page by chaging:

ul for .entry-content ul

and

ul li:before for .entry-content ul li:before

[Chris]

Yes,

that seems to have worked, thanks.

Never got my head around CSS!

cb.

[Chris]

So, for everyone else, this is what I used:

/* Coloured bullet points */
.entry-content ul {
  list-style: none; /* Remove default bullets */
}
.entry-content ul li:before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: orangered; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

[David]

You’re welcome – thanks for sharing your final code

[Chris]

I may have found that hack in a different forum. Thanks for fixing it for me!

cb.

[David]

🙂

[imajn]

Thank You. That was exactly what I needed today.

[Kelsey]

How do I do this for a specific list on a specific page? I don’t want to universally change all my bullets.

I have a food blog and depending on the recipe I want to use a .svg or Unicode character instead of a bullet. I’ve done my due diligence and have tried to apply what I learned in various forums but I can’t seem to get it to work. Honestly, I’ve spent hours at this.

I don’t want to use a custom image. I’d like to use a Unicode character or an emoji.

I understand how to assign a class to my specific list in the HTML code and then reference that class in the CSS but I can’t seem to get the Unicode or Emoji to work.

[Leo]

Can you open a new topic and link us to the page in question?

Thanks 🙂

[Author]

Posts