[Resolved] Create Custom Bulleted List

[Kelsey]

Hi,

This post is about another thread on the forum https://generatepress.com/forums/topic/coloured-bullet-points/#post-1948833. Here is the code that was used to change the color of the bullet points, site-wide:

/* 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) */
}

My question is, how do I do this for a specific list on a particular page? I don’t want to change all my bullets universally.

I have a food blog, and depending on the recipe, I want to use a .svg or Unicode character instead of a bullet. For example, on my waffle recipe seen here: https://thegoldenlamb.com/pandan-waffle-recipe/, I’d like to use a coconut emoji or .svg as my bullet point character.

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. Instead, 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.

I appreciate your help and my apologies for the complex question.

[David]

Hi there,

can you share a link to the page where i can see the list ?

[Kelsey]

Sure, here is the page:

https://thegoldenlamb.com/pandan-waffle-recipe/

The list is just a regular UL.

[David]

Select the List Block in the editor, and in Advanced > Additional CSS Class(es) add your custom class name. In my example CSS that would be fancy-list

Then add this CSS:

.entry-content ul.fancy-list {
    list-style: none;

}
.entry-content ul.fancy-list li:before {
    content: '\2022';
    color: orangered;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

This line contains the Unicode: content: '\2022';

[Kelsey]

Hi David,

This worked great!

Thank you,

Kelsey

[David]

Glad to be of help

[Jean]

Hello,

Not sure if I can post here or should open a new topic. Sorry for the inconvenience if I did the wrong choice.

With the seller theme, I’d like to do the same only the product page (https://shop.teinturesauvage.fr/product/silk-bourette-embroidery-threads/).
Because, the custom css added a bullet on the home page at the top of each product (https://shop.teinturesauvage.fr/). This bullet is not here without the custom css.

My problem is that, in the seller theme, I don’t have access to the “addionnal css” on the product page.

Thank you.

[Jean]

Hello,

I’ve found how to do with “.single-product .entry-content…”.
Sorry for the incovenience.

Have a good day.

[David]

Glad to hear that!!

[Author]

Posts