Email Marketing Tool

LRrokaj7
Member

Changing bullet colour with CSS

Hello, 

 

I am trying to change the colour of the bullets only but when I add the extra style to the <ul>, the colour of the text changes as well. What can I do? 

 

The colour of the bullet should be #fc6676

The colour of the text should be #1f2124Bildschirmfoto 2024-05-14 um 15.47.35.png

 

I have attached an image of the code below. 

0 Upvotes
2 Replies 2
Anton
Thought Leader

Changing bullet colour with CSS

Hi @LRrokaj7

if you want to apply those colors to all bullets on every page you can put this code into your CSS

li::marker{color:#fc6676;} {# This is the bullet color #}
li{color:#1f2124;} {# This is the text color #}

 

If you want to have more flexibility you could work with classes in your rich-text/custom module like this:

<ul class="default-bullets">
<li>Lorem ipsum</li>
</ul>

<ul class="other-bullets">
<li>Lorem ipsum</li>
</ul>

 

and than write the CSS like this:

ul.default-bullets li::marker{color:#fc6676;} {# This is the bullet color #}
ul.default-bullets li{color:#1f2124;} {# This is the text color #}

ul.other-bullets li::marker{color:#green;} {# This is the bullet color #}
ul.other-bullets li{color:#blue;} {# This is the text color #}

 

Of course you could implement the theme/brand variables so the colors would automatically change if you'd change colors in your theme or brand settings. 

 

 

best, 

Anton

Anton Bujanowski Signature
0 Upvotes
PamCotton
Community Manager
Community Manager

Changing bullet colour with CSS

Hey @LRrokaj7 thank you for posting in our Community!

 

You can style only the pseudo-element, you can change the bullet color without affecting the text color. Adjust the content, color, width, and margin-left properties as needed to customize the appearance of the bullets.

 

To our top experts, @DanielSanchez and @Anton any recommendations for @LRrokaj7 matter?

 

Thank you,

Pam

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !