[Resolved] Change bullet color

[Renato]

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 */
.entry-content ul {
  list-style: none; 
}
.entry-content ul li:before {
  content: "\2022";  
  color: #fa6813; 
  font-weight: bold; 
  display: inline-block; 
  width: 1em; 
  margin-left: -1em;
}

It would not be necessary to change the color in all the bullets, for me it would be enough to change only those of this page: categorie here but if it is not possible it is okay to change the color of all the pointers, the problem is that the code I used inserts bullets in front and especially my main items and woocommerce product photos.
Could you please advise the best approach for me to take, thanks. And if code is involved a code snippet would be wonderful! Thank you Renato

[David]

Hi there,

ok, so you could try this CSS:

/* remove bullet from top level of list */
ul.wc-block-product-categories-list > li {
    list-style: none;
}
/* add bullet for nested list */
ul.wc-block-product-categories-list ul li {
    list-style: disc !important;
}
/* Set the color of the default bullet */
ul.bullet-fa6813 li::marker,
ul.wc-block-product-categories-list  ul li::marker {
    color: #fa6813;
}

This will apply to the product categories list.
And also if you have a list block and you want to change its bullet colors, select the list block and in Advanced > Additional CSS Class(es) add: bullet-fa6813

[Renato]

Maybe I expressed myself badly my English is not the best. I would like to turn the bullets points on this page orange (see photo)
If I also enter the code you gave me, these bullets points (see photo) also appear and become orange that I don’t want to have any color I don’t want them at all
also your code doubled the bullets points where I was interested (see photo)
I hope I have been clearer now. Renato

[Fernando]

Hi Renato,

I see. Can you try this CSS instead?:

.page-id-68355 .entry-content ul {
    list-style: none;
}

.page-id-68355 .entry-content ul li::before {
    content: "\2022";
    color: #fa6813;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.page-id-68355 .entry-content .wc-block-product-categories-list-item h3 {
    display: inline-block;
}

[Renato]

it works, thanks Renato

[Fernando]

You’re welcome Renato!

[Author]

Posts