CMS Development

katepaulson
Mitglied

Bullet point color is not changing with text

lösung

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 Akzeptierte Lösung
dennisedson
Lösung
HubSpot-Produktteam
HubSpot-Produktteam

Bullet point color is not changing with text

lösung

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

Lösung in ursprünglichem Beitrag anzeigen

5 Antworten
squatchcreative
Mitwirkender/Mitwirkende

Bullet point color is not changing with text

lösung

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 Upvotes
valerajoey
Teilnehmer/-in | Platinum Partner
Teilnehmer/-in | Platinum Partner

Bullet point color is not changing with text

lösung

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
Mitglied

Bullet point color is not changing with text

lösung
 
0 Upvotes
dennisedson
Lösung
HubSpot-Produktteam
HubSpot-Produktteam

Bullet point color is not changing with text

lösung

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
Trendsetter/-in | Partner
Trendsetter/-in | Partner

Bullet point color is not changing with text

lösung

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes