CMS Development

katepaulson
Member

Bullet point color is not changing with text

SOLVE

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 Accepted solution
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

Bullet point color is not changing with text

SOLVE

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

View solution in original post

5 Replies 5
squatchcreative
Contributor

Bullet point color is not changing with text

SOLVE

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
Participant | Platinum Partner
Participant | Platinum Partner

Bullet point color is not changing with text

SOLVE

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
Member

Bullet point color is not changing with text

SOLVE
 
0 Upvotes
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

Bullet point color is not changing with text

SOLVE

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
Recognized Expert | Partner
Recognized Expert | Partner

Bullet point color is not changing with text

SOLVE

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes