Skip to main content
M
MotorIB
Known Participant
May 19, 2021
Question

Text hyperlinks colour in outlook html email

  • May 19, 2021
  • 3 replies
  • 4152 views

Really struggling to override the nasty blue colour that outlook defaults to when having hand-coded HTML emails to send out via outlook. How do you guys override it?

 

I have this, but it's not working:

 

<a href="123@abc.com"><span style=3D"color: #0A802B">123@abc.com</span></a>

 

Note the 3D in there which I have taken from an email received in outlook that has got the override in place and working. I've tried it without 3D too. My CSS in the header also stipulates a colour of #0A802B for text-based hyper links

This topic has been closed for replies.

3 replies

AmySykes
AmySykes
Known Participant
May 19, 2021

Hi MotorIB,

The mark-up is wrong. Try taking the letters 3D out and see if that works. 

 

    AmySykes
    AmySykes
    Known Participant
    May 19, 2021

    and the style="text-decoration: none" needs to go on the a tag, vs. the span tag.

     

    Jon Fritz
    Jon Fritz
    Community Expert
    May 19, 2021

    I think you're banging your head against the wall for no real reason here. Outlook is probably one of the worst clients when it comes to reading the styling in html emails.

    Take a look...

     

    https://www.campaignmonitor.com/css/


    In your situation, you probably have something like a default :visited style, within whichever version of outlook you're testing, coming into play on the URL but not on the @ links.

    O
    osgood_
    Brainiac
    May 19, 2021

    Doesnt inline css styling work:

     

    <a href="123@abc.com" style="color: red; text-decoration: none;">Text Here</a>

    M
    MotorIBAuthor
    Known Participant
    May 19, 2021

    Nope... I have used inline, span and both. I've even tried it with and without p tags to see if that makes a difference.

     

    The only thing that seems to work is editing the problem areas in outlook once the email is ready to send. 

     

    The really stupid thing is this works:

     

    <a href="#" target="_blank" id="Ts and Cs" style="color:#666666; text-decoration:none;">Terms of Use</a>

     

    but this doesn't:

     

    <a href="mailto:123@abc.com" style="color: #0A802B; text-decoration:none">CustomerEnquiries@123@abc.com</a>

     

    Apart from having a target and ID which are irrelevant to styling (no styling in header css either for target and ID), I can't see what's different!

     

    UNLESS... could it literally be that outlook treats URLs differently to email addresses? Is that the problem?

    Liam Dilley
    Liam Dilley
    Inspiring
    May 20, 2021

    Inline anchors are treated differently in a number of outlook versions.

     

    You have to wrap the text inside the anchor with the old school font markup...

    <font color="#ffffff">1800-000-0000</font>

     

    And also have the style on the anchor for other clients/browsers.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices