How do I style the colors of bullets?

  • 0
  • 2
  • Question
  • Updated 5 years ago
  • Answered
  • (Edited)
I would like to be able to put in a <UL> item for an e-mail template that has a different color for the bullet. I see many ways to do this with a style but not inline. And once inline, I'm seeing that the style persists when hitting enter to create a new <li> item. Can someone point me to a good solution using inline, or let me know how to edit style sheets used by the e-mail template?
Photo of Anthony Yandell

Anthony Yandell

  • 1 Post
  • 0 Reply Likes

Posted 5 years ago

  • 0
  • 2
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Hey Anthony! I jumped into your account and made a copy of your most recent campaign (saved as EMMA COPY) and you can see the code I’ve added in there. For other folks following along here is an example with that color style applied in the HTML

<ul style="color: #60F60F; font-size: 15px"><li>Bullet 1</li><li>Bullet 2</li><li>Bullet 3<br></li></ul>

Hopefully this helps, but please let me know if you have any questions.
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
Hey Tyler....I'm also trying to do this in my Campaign: MPS - XANTREX Battery Chargers - Text heavy

In the first block of text I have the code:
<ul style="color: #fff; font-size: 15px"><li>Bullet 1</li><li>Bullet 2</li><li>Bullet 3<br></li></ul>

Even if I highlight the text and try to change it to white, the bullet points don't change.

In the second block of text is the actual bullet-ed list, I want the bullet points white, along with the text.  I have the background set in emma to the blue color #003366.

The third block is without a colored background to my text box.

While I have a workaround and can set this up in Photoshop as an image, I'd rather have the text set up in the mailing so the mailing is mobile responsive.

Thanks!!!!
Brandi
Photo of Paul Zimmerman-Clayton

Paul Zimmerman-Clayton, Official Rep

  • 400 Posts
  • 34 Reply Likes
Official Response
Hey Brandi! I'm not sure why that's not working for your list, but I did find a workaround for you. You can change the styling of the individual bullets by adding the styling to each individual list item. For each of the <li> tags starting new items, change that tag to the following:

<li style="color: #FFF">

Feel free to use the Emma Copy in your account, where I've already made those changes. Let me know if you have any more questions!
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
That'll work Paul thank you for the workaround!! :) Hope you have a great day! :)
Photo of Cummins Mellor

Cummins Mellor

  • 71 Posts
  • 14 Reply Likes
This reply was created from a merged topic originally titled Can you change the colour of bullet points?.

Im working on a black background e-shot and want to add bullet points to be the colour #ef3c76 but I cant seem to figure out how to change the colour.

Can anyone help with this?
Photo of Cummins Mellor

Cummins Mellor

  • 71 Posts
  • 14 Reply Likes
But where would I put this coding?
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
Official Response
In the text block editor click this symbol at the far right to edit the code: </>
Photo of Cummins Mellor

Cummins Mellor

  • 71 Posts
  • 14 Reply Likes
Ahh! Thank you very much Brandi!
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
You're welcome! :)
Another work around would to be to create your text block in photoshop or gimp (gimp is free) and then drop it in as an image.  Your text won't be live text but it will still render like you want it. 
(Edited)
Photo of Cummins Mellor

Cummins Mellor

  • 71 Posts
  • 14 Reply Likes
Yeah that was my next option if it couldn't be done haha!
Photo of Cummins Mellor

Cummins Mellor

  • 71 Posts
  • 14 Reply Likes
Sorry to be a bit dumb about this, but does it matter where I enter this code?
Photo of Cummins Mellor

Cummins Mellor

  • 71 Posts
  • 14 Reply Likes
Also, just to throw a spanner in the works. We would like the bullet points to be a different colour to the text. We currently already have one image inserted.
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
I'm working on a reply for you, just want to get my ducks in a row, but here's a link to get you familiar with the code....
http://www.w3schools.com/html/html_lists.asp
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
Can you copy and paste your code in here so I can copy and paste it and try and edit it for you, please. :)
Photo of Cummins Mellor

Cummins Mellor

  • 71 Posts
  • 14 Reply Likes
<p style=""><span class="e2ma-style" style="font-family: &quot;Century Gothic&quot;, &quot;Apple Gothic&quot;, &quot;URW Gothic L&quot;, Futura, Arial, sans-serif; font-size: 24px; color: rgb(239, 60, 118)">Basic Advertising Package</span><br></p><ul><li><span class="e2ma-style" style="font-family: &quot;Century Gothic&quot;, &quot;Apple Gothic&quot;, &quot;URW Gothic L&quot;, Futura, Arial, sans-serif"><strong><span class="e2ma-style" style="color: rgb(255, 255, 255)">You send your advert to us<br></span></strong></span></li><li style=""><span class="e2ma-style" style="font-family: &quot;Century Gothic&quot;, &quot;Apple Gothic&quot;, &quot;URW Gothic L&quot;, Futura, Arial, sans-serif"><strong><span class="e2ma-style" style="color: rgb(255, 255, 255)">We will advertise your vacancy on our dedicated job boards for 1 week</span></strong></span></li><li style=""><strong><span class="e2ma-style" style="color: rgb(255, 255, 255)"><span class="e2ma-style" style="font-family: &quot;Century Gothic&quot;, &quot;Apple Gothic&quot;, &quot;URW Gothic L&quot;, Futura, Arial, sans-serif">All applicants will be forwarded to you to organise interviews</span></span></strong></li></ul>

Thank you!

The colour code we want the bullet points is #ef3c76 and the text white.

Thank you so much for your help!
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
<p style=""><span class="e2ma-style" style="font-family: &quot;Century Gothic&quot;, &quot;Apple Gothic&quot;, &quot;URW Gothic L&quot;, Futura, Arial, sans-serif; font-size: 24px; color: rgb(239, 60, 118)">Basic Advertising Package</span><br></p><ul style="color: #ef3c76"><li style="color: #ef3c76"><span class="e2ma-style" style="font-family: &quot;Century Gothic&quot;, &quot;Apple Gothic&quot;, &quot;URW Gothic L&quot;, Futura, Arial, sans-serif"><strong><span class="e2ma-style" style="color: rgb(255, 255, 255)">You send your advert to us<br></span></strong></span></li><li style="color: #ef3c76"><span class="e2ma-style" style="font-family: &quot;Century Gothic&quot;, &quot;Apple Gothic&quot;, &quot;URW Gothic L&quot;, Futura, Arial, sans-serif"><strong><span class="e2ma-style" style="color: rgb(255, 255, 255)">We will advertise your vacancy on our dedicated job boards for 1 week</span></strong></span></li><li style="color: #ef3c76"><strong><span class="e2ma-style" style="color: rgb(255, 255, 255)"><span class="e2ma-style" style="font-family: &quot;Century Gothic&quot;, &quot;Apple Gothic&quot;, &quot;URW Gothic L&quot;, Futura, Arial, sans-serif">All applicants will be forwarded to you to organise interviews</span></span></strong></li></ul>
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
Official Response
ok try that.  What I did was for every <li> I replaced it with  <li style="color: #ef3c76">
Photo of Cummins Mellor

Cummins Mellor

  • 71 Posts
  • 14 Reply Likes
Thank you so much!

It has worked perfectly.
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
Awesome!!!!