HTML Signatures on the iPhone Revisited (updated 4x)

Due to popular demand, I’m posting an updated version of my iPhone html email signature that’s more broadly compatible with a range of email clients.  This version of the html code replaces the CSS inline encoded background image with a standard image tag.

The code below has been tested to work (as of 09.29.08) in Apple Mail.app 3.4, iPhone 2.0, Outlook 2003, GMail (new version), Yahoo! Mail (new version), Hotmail and MobileMe.

Please note that when using this version, your recipient will almost certainly have to click a button or link to display the image unless you are already a “trusted sender.” 

<div style=“font: 10px ‘Lucida Grande’,Verdana, Arial, Sans-Serif;
line-height: 18px;
color: #525252;
margin: 6px 0;
padding: 6px;
border-top: 1px #999999 solid;
border-bottom: 1px #999999 solid;
background: #fff;
height: 58px”>

<img src=“http://dfbills.com/images/avatars/iphone.jpg” width=“63” height=“57” alt=“photo” style=“float: left; margin: 0 5px” />

<p style=“margin: 0; padding: 0; float: left;”>
<strong>David F. Bills</strong><br/>
<a href=“http://dfbills.com”>http://dfbills.com</a><br/>
sent from my mobile</p>
</div>

Signature

Too bad you still need a jailbroken iPhone to install this properly.  Thankfully, this particular modification tends to stay in place across upgrades- including 1.4 to 2.0.

For more information on the full hack, see my previous posting: Set a custom css signature on your iPhone.


Update 1: fixed curly quotes in code

Update 2: Another point to note is that the Microsoft HTML renderer, in both Outlook & Webmail, will not allow padding on IMG elements.  In my example, I’ve taken 6px of padding out of CSS and moved it to the actual JPG.

photo

Update 3: Make sure to reboot after updating the .plist file on the iPhone.

Update 4: Updated CSS code to finally wrap properly.  Thanks to Patrick Crowley for the help.

comments on this post:

DarkunderdoG said:
August 18, 2008 (late at night)

Testing this the image seems to go higher on the left with the bottom level to the David F. Bills is this normal? I changed one part in the text above - Subsituted ‘ for ' as otherwise it would not work properly. - Tested in HTML on webserver looks like yours. Key Below any ideas?

  <key>SignatureKey</key>
  <string><div style=“font: 10px 'Lucida Grande',Verdana, Arial, Sans-Serif;line-height: 18px;color: #525252;margin: 6px 0;padding: 6px;border-top: 1px #999999 solid;border-bottom: 1px #999999 solid;background: #fff;”><img src=“http://dfbills.com/images/avatars/iphone.jpg” alt=“pic” style=“float: left; padding: 0 6px 0 0;”><strong>Luke E. Kalbert</strong><br/><a href=“http://www.url.com”>My URL.Com</a><br/>sent from my mobile</div></string>

dfbills's avatar
dfbills said:
August 19, 2008 (late at night)

Are you saying that it displays poorly on the phone?  Looks fine on my laptop.

http://dfbills.com/images/blog/sig_key_kalbert.jpg

dfbills's avatar
dfbills said:
August 19, 2008 (late at night)

I’m making another tweak to address the fact that microsoft’s html renderer won’t allow padding on IMG.  Pretty much just adding whitespace into the JPG on the right side and removing the CSS value.

DarkunderdoG said:
August 19, 2008 (late at night)

Attached is the image of what your code looks like on my iphone (2.0.1) as well as the plist file. let me know what you think.

http://www.darkunderdog.com/~underdog/com.apple.mobilemail.plist

http://www.darkunderdog.com/~underdog/sign.jpg

tinybrandsrock said:
August 20, 2008 (late at night)

I have followed your instructions to the tee, but can’t seem to get this to work under 2.0. After uploading the .plist file, rebooting iphone, when I try to send an email, the default “sent from my iphone” sig shows up. When I download the .plist, it seems to have stripped out the changes I made. Any thoughts?

tinybrandsrock said:
August 20, 2008 (late at night)

Nevermind,

Turns out that after uploading the modified .plist file (before trying to write a new message on the iphone) I needed to restart the iphone. I think I read someone else had the same problem and fixed it by restarting.

Great info, Thanks

dfbills's avatar
dfbills said:
August 20, 2008 (late at night)

DarkunderdoG: I can’t test right now because I just restored my iPhone software and it went to 2.0.2.  No jailbreak available yet.

Grazu said:
September 24, 2008 (late at night)

As I use a Windows PC, could you please post your plist file?
That would be great…
Thxs,
Gerald

radioreject said:
September 27, 2008 (late at night)

I have tried a number of things but can not make it work 100%.  If I use the above then it moves the “website.com” and “sent from…” beneath the picture.  If I use the background method then it shows up right on the iphone but, I can’t see the image in Outlook 2007 or Gmail.

dfbills's avatar
dfbills said:
September 29, 2008 (late at night)

I’ve updated the CSS code to wrap properly.  Thanks to Patrick Crowley for the help.

Let me know how it looks for you.

radioreject said:
September 29, 2008 (late at night)

So far I am not able to get this particular one to take.  It’s overwritten by the default on reboot.  I’m not sure what it is.

radioreject said:
September 29, 2008 (late at night)

Sorry for the repost but, here’s what I’m trying to do:

radioreject said:
September 29, 2008 (late at night)

<div style=“font: 10px ‘Lucida Grande’,Verdana, Arial, Sans-Serif;
line-height: 18px;
color: #525252;
margin: 6px 0;
padding: 6px;
border-top: 1px #999999 solid;
background: #fff;
height: 58px”>

http://www.broadcastworks.com/staff/iphone.jpg


Wesley S. Smith ::<br>
broadcastworks.com<br>
sent from my phone
</div>

dfbills's avatar
dfbills said:
September 29, 2008 (late at night)

You should really try the new code above (I updated earlier today).  It treats the text portion as a block-level element, allows the alignment to work properly and forces a proper width to avoid wrapping.

I found that it works well to:

1.  go to your home screen
2.  upload the new file
3.  check the signature in Settings: Mai, Contacts, Calendars: Signature
4.  double check in MobileMail by creating a new message (make sure to close this and cancel before making additional changes)

radioreject said:
September 29, 2008 (late at night)

Yeah, that’s what I did.  I grabbed the text up top and used it.  When I pasted the above I kept hitting enter prematurely.  I used the new posting and changed my info but, it wouldn’t work for me so I reverted to my base64 version.  It and the other versions I used work fine but, something I’m doing I guess is breaking it.

<quote><div style=“font: 10px ‘Lucida Grande’,Verdana, Arial, Sans-Serif;
line-height: 18px;
color: #525252;
margin: 6px 0;
padding: 6px;
border-top: 1px #999999 solid;
background: #fff;
height: 58px”>

http://www.broadcastworks.com/staff/iphone.jpg


Wesley S. Smith ::<br>
broadcastworks.com<br>
sent from my phone
</div></quote>

pixelAFECT said:
November 30, 2008 (late at night)

So, has this been tested with 2.2 yet? :o) I would love to have a simple, but custom, signature.

dfbills's avatar
dfbills said:
December 01, 2008 (late at night)

Not that I know of, but I’d expect that it works exactly the same.  Also once you set it, it tends to stick- even across upgrades.

pixelAFECT said:
December 01, 2008 (late at night)

So, should I use the Firmware 1.1.4 or older with version of mobilemail on the Firmware 2.2?

I’d like to not brick it lol

orionpower said:
December 01, 2008 (late at night)

Ok I have a good one for you.
Im old school and I like the Ascii art one
so how would I add a custom signature with this.
(so the dude looks like a real dude)

Have A Great Day!!!

Cheers,
Chris
——————————————————————————————————————-
          \ l /
        (@ @)
  —-oOO-(_)-OOo—-
“Better than a thousand days of diligent study is one day with a great teacher”

dfbills's avatar
dfbills said:
December 02, 2008 (late at night)

pixelAFECT: As far as I know it works with all the shipping versions up to 2.1 and I expect that it works fine on 2.2 as well.

dfbills's avatar
dfbills said:
December 02, 2008 (late at night)

orionpower:  I’d just use that with a monospaced font applied in the html.

orionpower said:
December 02, 2008 (late at night)

Thanks but what is a monospaced font applied in the HTML.
I can crack your chest open and massage the life back into you. but I don’t understand what a monospaced font is?
i know its asking a lot but can you please copy paste the file or text and I will upload it to my iPhone first gen running 2.2 (5g77)
cheers
Chris
            \ l /
          (@ @)
  —-oOO-(_)-OOo—-

dfbills's avatar
dfbills said:
December 11, 2008 (late at night)

orionpower:  I finally had a chance to look at this.. try one of these.  (I don’t have my phone jailbroken right now, so I can’t actually test if for you.)


<div style=“font: 10px ‘Courier New’, Courier, monospace;”>
<pre>
    \ l /
    (@ @)
—-oOO-(_)-OOo—-
</pre>
</div>

or this…

 

<pre>
    \ l /
    (@ @)
—-oOO-(_)-OOo—-
</pre>


One of the two should do the trick.

J.Soutar said:
January 02, 2009 (late at night)

Ok, Tried this… I need a serious idiots guide for this using 2.2 Cus everytime it just puts back the “sent from my iphone” sig even after reboot… I’m completely jailbroken, I’ve got erica utilities and am on XP, as well as using winscp, having OpenSSH installed as well. Can ya help a brotha out? I’m an actor and I’d love to be able to link my sig to a pic and my demo reel link, possibly even a mailto: for my email?

Chris10an said:
May 19, 2009 (late at night)

I can’t seem to get the image to show.. Can some1 help?

I’m on 2.2, my code looks like this:

<div style=“font: 10px ‘Lucida Grande’,Verdana, Arial, Sans-Serif; 
line-height: 18px; 
color: #525252; 
margin: 6px 0; 
padding: 6px; 
border-top: 1px #febf0f solid; 
border-bottom: 1px #febf0f solid; 
background: #fff;
height: 58px”>

http://chris10an.no/div/sign.jpg width=63 height=57 alt=photo style=float: left margin: 0 5px  


Christian Buvik<br> 
<a href=“http://www.posemedchips.no”>http://www.posemedchips.no</a><br> 
Sent from my iPhone 3G
</div> 


This is how it looks on my phone: http://chris10an.no/div/signature.jpg

Chris10an said:
May 19, 2009 (late at night)

Don’t know if maybe this will be more helpful: (image of the code I pasted into the .plist file)

http://chris10an.no/div/code.jpg

Hope some1 can help me! smile

jgATL said:
July 22, 2009 (late at night)

Have you gotten this to successfully work on the 3.0 firmware?  I’ve tried both editing on the iPhone with iFile and on my mac using PLE Pro.  Erica’s iFile utility won’t accept any chagnes other than the addition of a div open and close command (no div style…).  On the mac, I’ve used your code (minus the URL) and even tried a simple <DIV Style=“color:69999”>myname</div> without any luck.  It appears the newest version overwrites the plist file whenever you reboot the iPhone. Any help would be appreciated.

dfbills's avatar
dfbills said:
July 28, 2009 (late at night)

I haven’t jailbroken 3.0 yet to test, but I will eventually.  Has anyone else on this thread tried under 3.0?

LimitedEditioniPhone said:
August 12, 2009 (late at night)

Yes it still works under 3.0!  I am in the process of posting a video tutorial to help others out: http://limitededitioniphone.com/guide-custom-iphone-css-signatures/

Chris10an said:
August 23, 2009 (late at night)

The signature follows my phone through firmware updates! smile

I just bought a 3GS though, and I forgot to make a copy of the signature string - so now I need to do this again..

iPhone_guru said:
November 17, 2009 (late at night)

Hello there. I see some have been meeting with lots of success with thehtml signatures but I have not been so fortunate.
The CSS signature with the dataURL stuff I have hands down. I got no problems with that.
This is what it looks like when I’ve finished doing it and added it to my iPhone, jailbroken of course. I haven’t had to do safe from text edit with that <string> stuff cause I got the plist application and everything is pasted in there after working in text edit.

http://lh6.ggpht.com/_BqIzPv7CiYg/SwJDqc6-jlI/AAAAAAAAAhM/5s-Shd9uhH0/IMG_0616.PNG

Now I was getting a bit fed up of the css signature because when I email people, only those with iPhones (sometimes) and the fortunate crowd of Apple users with Mail will see these beautiful signatures. I heard about the html signatures and I thought I will love it because now if I do it that way, everyone will be able to see my lovely signature: I won’t have to worry about my signature showing only in the Maill app. In doing the signature, I changed the image (http://idisk.mac.com/kofster/Public/kofster.jpg) but everything else stays the same.
This is what the code in the plist string looks like:
<div style=“font: 10px ‘Lucida Grande’,Verdana, Arial, Sans-Serif;
line-height: 18px;
color: #525252;
margin: 6px 0;
padding: 6px;
border-top: 1px #999999 solid;
border-bottom: 1px #999999 solid;
background: #fff;
height: 58px”>
<img >

Kofi M. Blades<br>
<strong>+1 (868) 399-6999<strong><br>
<a >http://twitter.com/kofster</a><br>
Sent via my iPhone3GS
</div>

and it turns out looking like this: http://lh6.ggpht.com/_BqIzPv7CiYg/SwJDqjzF2AI/AAAAAAAAAhQ/5GvAxOsMqv4/IMG_0615.PNG

Think you can help me out here, dfbills? Anybody?

dfbills's avatar
dfbills said:
November 22, 2009 (late at night)

You’re missing the image url from the code you posted.  Your image line (right above your name) needs to read:

<img src="http://idisk.mac.com/kofster/Public/kofster.jpg" />

Also, you could try tables for layout and font tags for formatting to see if those older methods would be more compatible with a variety of email clients.

SomeRandomGuy said:
July 16, 2010 (late at night)

Anyone try this with the iphone 4 yet?

You must be logged in to comment on this post (damn those spammers)

Already registered?

Username

Password

forgot password?       register