CMS Development

katepaulson
Membro

Bullet point color is not changing with text

resolver

I'm a new Hubspot user and this question will probably seem simple to some, but the color of the bullet points within my landing pages are not changing as I change the color of the text that follows. The text after my bullet points are white, but the actual points will not change from gray to white, or any other color. Anyone know how to fix this? 

1 Solução aceita
dennisedson
Solução
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Bullet point color is not changing with text

resolver

setting the color of the li should change the color of the bullet. 

should be as simple as

li{
  color: #fff;
}

unless the text was wrapped in a span that had a separate style attached. 

like

<li><span style="color:green;">I am green. my bullet is not</span</li>

need a link to page to properly debug

Exibir solução no post original

5 Respostas 5
squatchcreative
Colaborador(a)

Bullet point color is not changing with text

resolver

It's important to note that using the Rich Text module, adding a color style to text does not add the CSS to the block level element, rather it wraps the text with a span tag.  


So this list here with red text:

  • List Item 1
  • List Item 2
  • List Item 3

Looks like this in the code:

<ul>
    <li><span style="color:red;">List Item 1</span></li>
    <li><span style="color:red;">List Item 2</span></li>
    <li><span style="color:red;">List Item 3</span></li>
</ul>

 

and that does no good for content editors.  The li::marker will not inherit the color because the styling is applied to the span within it.  Content editors should not be responsible for using CSS to modify this. 

0 Avaliação positiva
valerajoey
Participante | Parceiro Platinum
Participante | Parceiro Platinum

Bullet point color is not changing with text

resolver

we can help you better if you can give us the link to the page, 
if you're familiar with CSS you can add this code

ul li::before { 
  color: inherit;
}

this also might affect other list items on your page just be aware of it. 

katepaulson
Membro

Bullet point color is not changing with text

resolver
 
0 Avaliação positiva
dennisedson
Solução
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Bullet point color is not changing with text

resolver

setting the color of the li should change the color of the bullet. 

should be as simple as

li{
  color: #fff;
}

unless the text was wrapped in a span that had a separate style attached. 

like

<li><span style="color:green;">I am green. my bullet is not</span</li>

need a link to page to properly debug

Kevin-C
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

Bullet point color is not changing with text

resolver

Just to add some context to @valerajoey's solution. See here

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Avaliação positiva