Changing bullet colors

[Ꮻƶƶʏ]

Heyo, this is SUCH an overdo question from me haha, I've been wondering this for probably years now and have decided to finally ask: is there a method to change the color of list/bullet points in a post? I'm not talking the entire list section, but specifically JUST the bullet graphic; I'd like to have the dot a unique color from the actual words in the list. I'm quite certain I've seen this done before, but I've never managed to figure out how, and a google search has done me no good. I'd appreciate any help!

[Kami]

Apr 29, 2023 16:23:33 GMT -8 Ꮻƶƶʏ said:

Heyo, this is SUCH an overdo question from me haha, I've been wondering this for probably years now and have decided to finally ask: is there a method to change the color of list/bullet points in a post? I'm not talking the entire list section, but specifically JUST the bullet graphic; I'd like to have the dot a unique color from the actual words in the list. I'm quite certain I've seen this done before, but I've never managed to figure out how, and a google search has done me no good. I'd appreciate any help!

Did you want this to apply to all lists in all posts / on all portions of the forum (including HTML lists)? Or a specific post?

[Ꮻƶƶʏ]

Just specific posts!

[Chris]

The :marker pseudo-element is how you would go about changing the color of list-item markers but that would change the color of all markers within its scope which is why Kami asked if you wanted it for one or all.

There is no equivalent pseudo-element for affecting a single list-item and normal users cannot add scoped CSS to the forum anyway, only element inline. The styles tag plugin could probably accomplish this since I believe that plugin allows normal users to add scoped CSS but there are hacks that can accomplish this without that plugin.

Proboards BBCode allows inline styles so the background hack would be most applicable here with the additional caveat that this has to be done in shorthand since Proboards' inline styles has no support for the discrete background-size^[1] property.

A standard generated list would have BBCode such as

[ul type="disc"]
[li]List item 1[/li]
[li]List item 2[/li]
[li]List item 3[/li]
[li]List item 4[/li]
[/ul]

• List item 1
• List item 2
• List item 3
• List item 4

But we can disable the standard marker by setting type to none then use the background style to define our own markers for each list-item. The following examples is using CSS radial-gradient to define colored discs with list-item 4 using an actual image instead

[ul type="none"]
[li style="background:radial-gradient(red 0 70%, transparent 70% 100%) 0 50%/10px 10px no-repeat;padding-left:20px;"]List item 1[/li]
[li style="background:radial-gradient(green 0 70%, transparent 70% 100%) 0 50%/10px 10px no-repeat;padding-left:20px;"]List item 2[/li]
[li style="background:radial-gradient(blue 0 70%, transparent 70% 100%) 0 50%/10px 10px no-repeat;padding-left:20px;"]List item 3[/li]
[li style="background:URL(https://storage.proboards.com/forum/images/icons/female.png) 0 50%/10px 10px no-repeat;padding-left:20px;"]List item 3 (as image)[/li]
[/ul]

• List item 1
• List item 2
• List item 3
• List item 3 (as image)