Archived topic
Create Custom Bulleted List
8 replies · Started by Kelsey on October 1, 2021
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.
Hi there,
can you share a link to the page where i can see the list ?
Sure, here is the page:
https://thegoldenlamb.com/pandan-waffle-recipe/
The list is just a regular UL.
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';
Hi David,
This worked great!
Thank you,
Kelsey
Glad to be of help
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.
Hello,
I've found how to do with ".single-product .entry-content...".
Sorry for the incovenience.
Have a good day.
Glad to hear that!!
