Bullet points and 1. 2. 3. not changing to preferred color

Technical Q&A

Topic summary

A user is experiencing an issue where bullet points and numbered lists (1. 2. 3.) on their website are not changing to their preferred white color, despite other text updating correctly.

Proposed Solution:
A respondent provided CSS code to force all list markers to white:

  • Navigate to Online Store → Themes → Edit code
  • Locate the base.css file
  • Add the CSS snippet ::marker { color: #FFFFFF !important; } at the bottom

The solution targets the ::marker pseudo-element to override default list styling. The respondent included screenshots showing the expected result across all pages. The issue appears to be a CSS specificity problem where list markers weren’t inheriting the global text color changes.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Trying to edit the text color on my website to make it white. All the text changes to the correct color except for the bullet points and whatnot. For example, check out this blog post on my website: https://empiricalwater.com/blogs/blog/cupping-method

2

@empiricalarby To make all the bullet points 1. 2. 3. and dots to white color for all the pages, please use below code and let me know whether it is helpful for you.

  1. From admin panel, go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Search “base.css” and then paste the below code in the bottom of that file.
li::marker {
    color: #FFFFFF !important;
}

Now, it will looks like below in all the pages,

priyavinsinfo_0-1708584351131.png
priyavinsinfo_0-1708584351131.png1365×676 47.7 KB

priyavinsinfo_1-1708584431223.png
priyavinsinfo_1-1708584431223.png1366×669 171 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.