Mail app and iPhone mail CSS signature

CSS signature in mail app is pretty cool. It’s small, neat and less problem displaying on other email clients. I managed to have both my signatures on the Leopard mail app and iPhone 3G mail app. Here is what I did. (The idea is from http://allforces.com/2006/04/14/css-signatures/)

Mail

  • Create one signature on Mail app to act as a dummy
  • Download or copy the CSS signature for Mail app (*.html) and then edit as you want (I used Coda, my favorite editor)

<div id=”sig” style=”line-height: 13px; margin: 6px 0; padding: 8px; border-top: 1px #999999 dotted; border-bottom: 1px #999999 dotted; font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif; font-size: 11px; color: #333333;” >

<img src=”http://img.skitch.com/20081103-eaj7pa3pmdym38kd4ra3m4gk1x.jpg” alt=”me” width=”29″ height=”29″ style=”float: left; padding: 2px 6px 0 0;”>

<strong style=”color: #333333;”>Jiradett Kerdsri SQNLDR</strong>: Blog: <a href=”http://www.kerdsri.com” style=”color: #999999; text-decoration: none; border-bottom: 1px #999999 dotted;”>Kerdsri.com</a> <a href=”http://mosaic.org” title=”visit mosaic.org” style=”color: #339999; text-decoration: none; border-bottom: 1px #999999 dotted;”></a>| <a href=”http://kerdsri.com/Jiradett%20Kerdsri.vcf” style=”color: #999999; text-decoration: none; border-bottom: 1px #999999 dotted;”> VCARD</a><br />

contact | <a href=”mailto:jiradett@gmail.com” style=”color: #999999; text-decoration: none; border-bottom: 1px #999999 dotted;”>jiradett@gmail.com</a> – 6681-407-7024 | Twitter – <a href=”http://twitter.com/Jiradett” style=”color: #999999; text-decoration: none; border-bottom: 1px #999999 dotted;”>jiradett</a></div>

  • Now go to ~Users/Library/Mail/Signatures you should see your dummy signature (*.webarchive) that you just created. Remember the file name, you’ll need it afterward.
  • Open the signature file with Safari, it should be displayed exactly as you want in your Email.
  • In Safari go to File > Save as . Under the Format, choose Web Archive

Save as in Safari

  • In Export As, make sure that it’s the same name as your dummy file. Overwrite the existing file with the new one.
  • Done, now in your Mail app, you should be able to see your new CSS signature appended at the end.

Css Signature in Mail app

iPhone

It’s much easier in iPhone to edit the signature to replace the boring ‘Sent from my iPhone’ signature (from http://www.dfbills.com/display/686). We just need to edit, /private/var/mobile/Library/Preferences/com.apple.miblemail.plist . However, you’ll need a Jailbroken iPhone to edit that file. (I’m using iPhone 3G with 2.2 firmware and Fugu to SSH into the iPhone)

Edit file in iPhone

First we have to create the HTML code iPhone CSS signature shown below.
iphonesignaturecode


Now we need to add this code to com.apple.miblemail.plist signature.

The image showing on iPhone is encoded into base64 using http://www.sveinbjorn.org/cgi-bin/dataurlmaker-cgi.pl

plist fileI download this file using Fugu to edit on my Mac with Property Editor then upload this file back to iPhone. It’s work very well so far.

Signature in iPhone