Timmargh.me

Custom CSS Signatures in Mail.app - UPDATED  21

After reading Melvin Rivera’s excellent tutorial over at All Forces I set about creating my own HTML/CSS signature in Mail.app and came up with:

(Melvin shows how to include an image but I’d rather stick to just text.)

I came across a problem, however: when my signature was converted to plain text, for example when someone replied to one of my emails, it looked like:

Obviously, the text is now a bit pointless as no hyper-links are present. However, there is a way around this using CSS’s display attribute …

First of all, my site address. As I named the site using part of the address I only need to add a bit of extra code - the original looked like:

Read stuff at <a href="/" style="color: #8f2831; text-decoration: none; border-bottom: 1px #888888 dotted;">Timmargh.me</a>

Which, when viewed as HTML, gives us:

Read stuff at Timmargh.me

… which is how it should be, link and all. However, as plain text it looks like:

Read stuff at Timmargh.me

So, we add some extra code (shown in a different colour) like so:

Read stuff at <span style="display: none">http://</span><a href="/" style="color: #8f2831; text-decoration: none; border-bottom: 1px #888888 dotted;">Timmargh.me</a><span style="display: none">/</span>

(The extra ‘/’ isn’t strictly necessary, but I’m anal about that sort of thing.) This, viewed as HTML, gives us:

Read stuff at http://Timmargh.me/

… which is identical to the original, but as plain text we now get:

Read stuff at http://

It doesn’t look as good, but the URL is there for all to see.

A slightly different approach for the link to my Flickr account. The original code:

View my photos on <a href="http://www.flickr.com/photos/timmargh/" style="color: #0000ff; text-decoration: none; border-bottom: 1px #888888 dotted;">Flick<span style="color: #ff0000">r</span></a>

… viewed as HTML looks like:

View my photos on Flickr

… which, again, is how it should be, but as plain text looks like:

View my photos on Flickr

So, again we add some extra code, this time on the end:

View my photos on <a href="http://www.flickr.com/photos/timmargh/" style="color: #0000ff; text-decoration: none; border-bottom: 1px #888888 dotted;">Flick<span style="color: #ff0000">r</span></a><span style="display: none;"> at http://www.flickr.com/photos/timmargh/</span>

… which, when viewed as HTML, looks like:

View my photos on Flickr at http://www.flickr.com/photos/timmargh/

… (identical) but as plain text looks like:

View my photos on Flickr at http://www.flickr.com/photos/timmargh/

And … that’s it. Not particularly clever or neat, but it puts my mind at rest.

Update #1

The entire code for my signature as requested by David, although I’ve coloured and split it onto several lines for easier reading - be sure to remove any line-breaks and spaces from the beginning of lines:

<div id="sig" style="line-height: 14px; margin: 8px 0; padding: 4px; background-color: #ddddbb; border: 1px #999999 dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #000000;">
  <strong style="line-height: 16px; font-size: 12px; padding-top: 8px;">Timothy Griffin</strong>
  <br />Read stuff at <span style="display: none">http://</span><a href="/" style="color: #8f2831; text-decoration: none; border-bottom: 1px #888888 dotted;">Timmargh.me</a><span style="display: none">/</span>
  <br />View my photos on <a href="http://www.flickr.com/photos/timmargh/" style="color: #0000ff; text-decoration: none; border-bottom: 1px #888888 dotted;">Flick<span style="color: #ff0000">r</span></a><span style="display: none;"> at http://www.flickr.com/photos/timmargh/</span>
  <br />Contact me using <a href="mailto:emailaddress@mac.com" style="color: #8f2831; text-decoration: none; border-bottom: 1px #888888 dotted;">emailaddress@mac.com</a> for email, MSN, iChat & AIM
</div>

Update #2

As Ryan pointed out, below, using this method doesn’t always give us the results we want. He suggests an alternative method: format the “hidden” text as white (or the same colour as your background) and in a very small font size. So, using my Flickr link as an example, we’d put:

View my photos on <a href="http://www.flickr.com/photos/timmargh/" style="color: #0000ff; text-decoration: none; border-bottom: 1px #888888 dotted;">Flick<span style="color: #ff0000">r</span></a><span style="color: #ddddbb; font-size: 0.1px;"> at http://www.flickr.com/photos/timmargh/</span>

… which looks like:

View my photos on Flickr at http://www.flickr.com/photos/timmargh/

The hidden text is just about visible (if you look very closely), but in the context of my signature, i.e. with the properly coloured background, it will be invisible.

The only downside of this method is that you can’t really hide long strings mid-way through a line of text as you’d see a gap; e.g. the code:

This text is visible and can always be seen. <span style="color: #ffffff; font-size: 0.1px;">This text is hidden and can only be seen as plain text. </span>This text is also visible and can always be seen.

… looks like:

This text is visible and can always be seen. This text is hidden and can only be seen as plain text. This text is also visible and can always be seen.

It my look different in your browser, but in mine (Safari) it looks like this:

So, if you want to use this technique you’ll have to come to a comprise on the layout and content of your signature. Personally, I think I do actually prefer Ryan’s technique and I’ll be adjusting my signature to fit it in.

Comments