Skip to main content

I saw a question from 2012 on this but I may not know exactly how to add to the my CSS to fix this.


Adding a text field with bullets but when I change the font color to white the bullets continue to default to black and don’t show well against the background.


The previous questioner was told to add a CSS record to the page with the following code.


<style> <br /> ul{ <br />

color : Gray; <br /> } <br /> </style>

I added a CSS script with this info and saved it to the page but it didn’t change anything so I must be missing something.


Any tips?

Wait - it looks like it shows the color properly in Preview but the edit screen just continues to shop them as black. Is that correct?

Hi Brent - that’s correct. The CSS won’t be applied until you preview. Anything on the preview should also carry through to the published page though. So, if you’re seeing the correct colours in your preview, it looks like your CSS is good and you’re all set.

Hey Brent - you’re right on the money! If you embed any code - whether it be Custom HTML or CSS - we won’t render it in the page builder. You’ll need to view your page in preview, or publish it, to see the code working live. Hope that helps!

Is there a variation of this CSS to change only the bullet colour?

ul

{

list-style-type: round;

}


ul > li

{

color: red;

}


ul > li > span

{

color: black;

}


Found this and it works a treat

Ahh you beat us to the punch! Thanks for sharing Ben! If you have any additional questions, don’t be shy!

I tried Ben’s idea and it didn’t work at all. I don’t understand which, if not both, colors to change in his script. I tried the script earlier in this thread and it changed some but not all bullets:


 
ul{ 
color : Gray; 
} 
 

I installed each of these in scripts editor “After Boday Tag”


Also, would there be a way to additionally increase the size of the bullet without changing text size - see my request above about images a bullets and alignment.


Suggestions please!


Thanks ahead,

gerry

Hi Brent,


This is an old thread so I’m sure you figured it out by now, but in case anyone else needs an answer, I found this code worked:


style tag (with < > on either side)

ul {
list-style-type: round;
}
ul > li
{
color: white;
}
ul > li > span
{
color: white;
}

closed style tag (with < > on either side)

There is an older thread with a similar code but it was missing the “< style >” tags, so hopefully this will help.

Reply


Terms & ConditionsCookie settings