4

I'm using Outlook.com and have a custom HTML signature using their inbuilt editor which if you've used it you'll know what a pain it is. I have two phone numbers in the signature which I want to style the colour on instead of the ios blue but still retain the tap to phone functionality. After some research I've tried these:

<style>
a[href^=tel]{ color:#000000; text-decoration:none;}
</style>

which the editor strips out on save

<style>
.tel{color:#000000;text-decoration:none;}
</style>

<span class="tel">Tel 000000</span>

which the editor changes to this and ios doesn't recognize it

<style>
.ExternalClass .ecxtel{color:#000000;text-decoration:none;}
</style>

<span class="ecxtel">Tel 000000</span>

this

<a href="tel:000000" style="color:#000000;text-decoration:none;">Tel 000000</a>

which again the editor changes to this and ios doesn't recognize it

<a style="color:#000000;text-decoration:none;">Tel 000000</a>

Any suggestions are welcome.

migrated from superuser.com Jun 9 '15 at 8:35

This question came from our site for computer enthusiasts and power users.

2

All email clients restrict the types of HTML you can include so as to ensure any HTML is safe to use.

Of course, this tends to mean that "newer" or custom elements tend to be stripped.

An addition, there is an error in your code <span style="tel"> should be <span class="tel"> which should be recognised.

You could also define the style using an ID rather than a class:

<style>
  #tel{color:#000000;text-decoration:none;}
</style>

<a id="tel" href="tel://00000">Tel 000000</a>

UPDATE:

To remove the underline, you have to override a:link so something like:

<style>
  #tel:link{color:#000000;text-decoration:none;}
</style>

If you are not able to specify an href then you are forced to make sure you put the text in a form that iOS understands it to be a phone number. This is quite specific, sorry I can't quite remember the exact format but iOS is more picky than Android in this regard.

UPDATE 2:

OK, a second attempt. This time I actually had the time to go try it first :/

The following at least gets close to your actual question I think, sorry about the false starts. It adds color to the text and removes the underscored link.

<br><hr>Tel: <a href="tel://01234-567-8901" style="color:red;text-decoration:none">01234-567-8901</a><br>
  • Apologies, I have tried span class, span style above is a typo. I've also tried the href=tel but as stated the href is stripped out by the editor. – user95713 Jun 9 '15 at 11:48
  • Thanks for your efforts with this, unfortunately as per my last example in my original question the editor strips the href out and IOS applies it's blue underlined link. I should add although it may seem I'm looking for a IOS fix it's only because I'm using an iphone, I'm after the same look in Android but don't at present have a device to check on. #w3d – user95713 Jun 10 '15 at 7:59
  • Poo! Too focused on getting outlook.com to play nice & forgot to check iOS, sorry. Looks like iOS email client totally ignores your formatting! Annoyingly, the Outlook client for iOS does the same. The new Windows Mobile 10 Outlook client (beta) even ignores the embedded link and formatting altogether! – Julian Knight Jun 10 '15 at 8:14
  • @user2870393 Regarding Android (using the Gmail app - the default on Android 5 AFAIK) - the telephone number does not appear to be styled in any way. By default it is black, no underline. However, it is still "clickable". The Gmail app on iOS does not style the telephone number either, but neither is it "clickable" (tested iPad iOS 8.3). – MrWhite Jun 10 '15 at 11:45
  • @w3d thanks that useful info, I've spent some time on this today and achieved nothing, I've designed and been running my website for several years now and the advances made have been tremendous, it's a pity HTML emails/signature are still stuck in the 90's and haven't advanced at the same pace. – user95713 Jun 10 '15 at 16:12
1

I was able to change the colour by simply editing the "Rich text" version and toggling to view the HTML ("Edit in HTML"). However, this did not remove the text underline on the link in iOS Mail (which probably overrides this):

<div>Tel: <font color="#000000" style="text-decoration:none;">01234 567 890</font></div>

This resulted in a black, clickable, telephone number in iOS (8.3) Mail. However, it was still underlined.

  • Thanks, I think we can sometimes scratch our heads for to long and miss the simple things. At least the awful blue has gone, I would still like to lose the underline, I tried !important after the none which didn't help. Will continue and post back if fixed. – user95713 Jun 9 '15 at 12:07
  • See the update to my answer in regard to the underline. – Julian Knight Jun 9 '15 at 15:47
  • @JulianKnight Unfortunately Outlook.com screws with any style blocks you try to embed, making everything a descendent of .ExternalClass (as mentioned in the question). But trying to use a parent DIV with class ExternalClass gets "magically" changed to ecxExternalClass and the styles then get even more messed up - a never ending cycle it seems. Trying to apply inline styles to an anchor seem to be ignored, probably because the HREF attribute is stripped - iOS then seems to generate another anchor to wrap the telephone number which applies the default style! Bit of an uphill battle! – MrWhite Jun 9 '15 at 16:44
  • Sorry about the false starts, found time to log in and actually experiment this time. Think we may be close, see my Update 2. – Julian Knight Jun 9 '15 at 21:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy