How to change colour of bullet points

Support
#1

Hi,
How do I change the colour of bullet points on this page? http://staging5.wellesleystudios.co.nz/residencies/

So that it looks like this page… http://wellesleystudios.co.nz/residencies/

#2

Hey Paul,

Your sample site uses an image for the bullets and that’s not recommended. What you need is possible using custom CSS but that is beyond the scope of our support to offer.

I’ll provide a link to help you achieve this but please note that for any issue you encounter with custom codes, you need to consult with your personal developer.

Try following the CSS in this site https://www.w3schools.com/howto/howto_css_bullet_color.asp. Add the CSS in Theme Options > CSS.

Hope that helps.

#3

Hi @christian. Thank you, that link was very helpful… and it does work, but it applies a coloured bullet point globally (which adds bullet points to the menu text).

How do I isolate it just to the body text? I’ve tried the code below, which shows the coloured bullet point, but doesn’t remove the grey one.

.x-text. ul {
list-style: none; /* Remove default bullets */
}

.x-text ul li::before {
content: “\2022”; /* Add content: \2022 is the CSS Code/unicode for a bullet /
color: #D8532B; / 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) */
}

#4

Hi @christian, please ignore my last message. I’ve sorted it and got what I wanted. Thanks for your help.

ul {
list-style: none; /* Remove default bullets */
}

.x-text ul li::before {
content: “\2022”; /* Add content: \2022 is the CSS Code/unicode for a bullet /
color: #D8532B; / Change the color /
font-weight: bold; / If you want it to be bold /
font-size: 2em; / Increase bulletpoint size /
display: inline-block; / Needed to add space between the bullet and the text /
width: 0.5em; / Also needed for space (tweak if needed) /
margin-left: -0.75em; / Also needed for space (tweak if needed) */
vertical-align: sub;
}

#5

Hey Paul,

You are most welcome. We are just glad that you have figured it out a way to correct the said issue.
We really appreciate for letting us know!

Best Regards.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.