How do I get bullet points to match text color?

[Clay4]

I've created a bulleted list in a "Text" field. The default color for text on the entire site is white, and the text is indeed white. But the bullet points are grey and difficult to see. I've tried forcing the text color explicitly to white inside the Text field and that doesn't fix it.

Thanks for your help!

Clay

[MJCS · Accepted solution]

HI @Clay,

This is some CSS that will help that:

<style>
div.paragraph ul li {
    color: white;
}
</style>

If you want the dots across the whole site put it in Settings>SEO>Header Code. If it's just for one page then add it to Pages>pageName>SEO Settings>Header Code.

Let me know if you need more guidance.

Cheers, Mark

[MJCS · Accepted solution]

HI @Clay,

This is some CSS that will help that:

<style>
div.paragraph ul li {
    color: white;
}
</style>

If you want the dots across the whole site put it in Settings>SEO>Header Code. If it's just for one page then add it to Pages>pageName>SEO Settings>Header Code.

Let me know if you need more guidance.

Cheers, Mark

[cheeseball1]

I need help. my bullet points are white and so is the backround and so I want to change the bullet points to black. 

How do I do this?

[MJCS]

Hi @cheeseball,

Have you tried the CSS above but exchanging the word white for black?

Thanks Mark

[cheeseball1]

Annoyingly it didn't seem to work

[MJCS · Accepted solution]

Hi @cheeseball, can you please let me know your website's address and I'll see what's different?

Cheers, Mark

[rahuldesigns]

Is it possible to use a specific HEX# to denote the color?

[Bernadette3]

I don't see why that wouldn't work, @rahuldesigns Have you already tried to use a code and is it not working? 

[Clay4]

Thanks, Mark! That worked.

And thanks very much for clearly specifying where to insert the code (Settings > SEO > Header Code). I frequently see responses telling me what to add but assuming I know the correct place to put it.

[JK1985]

Hy @MJCS,

I inserted the code in the header and footer of the SEO settings of a particular page, but nothing happend. Can you have a look?

The adress is http://oogvooreenzaamheid.weebly.com/ (page under construction)

tnx

Jeroen

[Kimberley]

ok, I figured it out the Correct code is.

<style> 

ul, li {

color: whit (or you can use hex);

</style>

[agorapro]

What happens in the case where I have 2 different bullet colors required on the same page.  The example is at http://preview.webbsurveys.ca/projects.html.  I would like white bullets in the blue background and grey bullets in the grey background

[silverlinker]

Worked for me thanks!

[DrShapiro]

Mark's solution works great to affect the bullet colors for the whole page.  Thanks.  It looks like there's still no way to have the bullet color change for each text element, when changing the text color in a bullet or numbered list text element. You can click here to see this as a new idea - AND VOTE ON IT - in the "Vote For Features". 

[alib1]

hi, I have been trying to get rid of bullets on my unordered lists. On preview they aren't visible but when saved they are back to black bullet points again. I've tried everything from putting this code in main.less css and global.less css -

div#terms ul>li
{

list-style-type:none;

}

ul#policy
{
margin-bottom:1em;
list-style-type:none;
list-style-image: none;

}

ul#policy li {
list-style-type:none;
}
it doesnt work so then I tried your change the bullet code in the header of just the page and then in the seo - header and there is no change?

[N46Admin]

This seems to work fine on my website for the bullet points, but it doesn't seem to work with the numbered points, is there a different code for those?

Bullets points working(black): http://www.network46.org/about-us.html

Numbered points not working(grey): http://www.network46.org/privacy.html

[MJCS]

'ul' is short for 'unordered list'. For number lists we use 'ol' - 'ordered list'.

for example:

div.paragraph ol li {
    color: black;
}

If you copy the code that worked for you and change any 'ul's to 'ol', you should be fine.

Cheers

[N46Admin]

Thanks a ton, worked like a charm!!

[ColumbiaCompass]

Hello,

I've tried using the source code per page provided in the above conversation, but the site was designed so that the page has no header - is there a way to change the source code within a text block to make the bullets white?

Thank you,

Leigh

[Galabyca]

Thanks for this solution. It worked well!

I'd like to add my two cents to this solution for those who tried but didn't see the effect on their website.

When I'm in the interface to modify my website, I don't see any change when I add the code. However, here is somethin that worked for me :

1. Execute the solution explained in this post

2. Publish a public version

3. Go to the public URL of your website

4. Refresh your broswer (CTRL+SHIFT+R) I can see my bullet points in white.

An alternative, if you don't want to publish yet :

1. Execute the solution explained in this post

2. Stay in the Weebly Editor and go in in the tab Theme

3. Click on "Edit HTLM/CSS (at the bottom left)"

4. Click on the PopUp Button (at the bottom right)

You should see a simulation of your "public" website.

[courtneyccs]

I need help with this too please.

I've pasted the CSS code as directed in this answer but it didn't work... my site is ccshydra.weebly.com

I need the bullet points to be black.