Outlook.com Signature Editor

outlook.com

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.

Best Answer

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>
Related Topic