Changing the colour of numbered bullets on landing page

Developer Support CMS Development
1

Hi there,

I’m unable to make the numbered bullets on a landing page the same colour as the rest of the text. I’ve found some articles to help with this but as I have no coding experience, I wasn’t sure where this code should be added, or how to make it relevent for numbered bullets, and haven’t been able to make it work successfully. I’ve spoken to support who were unable to help, and as the page is live I need a fix today.

Is anyone able to help please?

Thanks!

2

Hey, @BeckyS :waving_hand: I hope you go this resolved.

If not, I am happy to create a few screenshots and a GIF of me following the steps @danmoyle outlined in his post. What he laid out is the best approach for a non-developer to make this kind of change.

Talk soon! — Jaycee

3

Hi @BeckyS,

with some new CSS updates you should be able to do it like this:

ul li::marker{
color:#ff0000;
}

Since this will apply - in this case - a red colored ‘dot’ to all list elements on your page you should specify this CSS part a bit more with some classes like

.my-wrapping-element ul li::marker{
color:#ff0000;
}

so it’s gonna be applied to only this specific element.

Put this code into your theme.css/theme-override.css

If you want to use your theme-colors you can write it like this.

Please note that the following code snippets are just examples and may not work in your theme until you change the “path” to the correct one

.my-wrapping-element ul li::marker{
color:{{ theme.colors.primary.css }};
}

And you can have several different colors like

.light-background .my-wrapping-element ul li::marker{
color:{{ theme.colors.dark.css }};
}


.dark-background .my-wrapping-element ul li::marker{
color:{{ theme.colors.light.css }};
}

Hope this helps

best,

Anton