Set a custom css signature on your iPhone (updated 4x)

Last week I spent a stupid amount of time figuring out how to set a custom css signature on my iPhone after being ridiculed by a friend for my semi-default “Sent from my iPhone.” tagline.  In the spirit of sharing, I’ve written it up to spread the word.

First, you must have access to the filesystem on your phone.  If you’re on a Mac, I recommend Installer.app Beta.  It couldn’t be easier.  If you’re on Windows, check out Gizmodo’s guide.

Once installed, launch it on the iPhone and install two packages: BSD Subsystem and OpenSSH.  Get your iPhone’s IP address from Settings: Wi-Fi: Your Network: & Tap the arrow.

Now you can SSH into the phone.

ssh root@youripaddress

The password is “dottie”.  Once logged in, change your password using “passwd”.

Now, you can use SFTP with a FTP client like Transmit. Or even use a FUSE filesystem like MacFUSE with sshfs to mount it on your desktop.

At any rate, once you’ve decided how to access the filesystem, you need to copy this file to your Mac:

Firmware 1.0 - 1.1.3
/private/var/root/Library/Preferences/com.apple.mobilemail.plist

Firmware 1.1.4
/private/var/mobile/Library/Preferences/com.apple.mobilemail.plist

On my machine, I just hit command-J in Transmit and it opens in Apple’s Property List Editor (PLE).  This application is installed as part of Apple’s Developer Tools package.  The package comes with every Mac, but is not installed by default.  If you don’t have it, you can grab it from Apple’s developer site.

The reason I recommend PLE is that the plist file is a binary and not plaintext.  Erica Sadun has written an iPhone commandline tool called plist2text.  This is included in her EricaUtilies package in availble in Installer.app.  plist2text is supposed to be able to dump the binary file to a txt directly on the phone avoiding the need for PLE, but in my testing it corrupted the binary.

Once com.apple.mobilemail.plist opens in PLE, click the Root disclosure triangle and observe the SignatureKey value.  If this value is not present, go into iPhone’s Settings: Mail: Signature and change it to anything other than the default.  This should create the key value.

Now onto the design-

For the actual design, you will use html.  Being a CSS convert, I recommend using some tasteful, lightweight css code.  The signature itself is just html with CSS defined inline.  I created a valid xhtml page and used the body portion for mine.  Just take out the html, head and body tag sets.

Mine is simple, clean and designed for the small screen:

David F. Bills
http://dfbills.com
sent from my mobile

Here’s the code:

<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">
<div style="padding: 2px 0 2px 70px; background: url('http://dfbills.com/images/avatars/iphone.jpg">
<strong>David F. Bills</strong>
<br />
<a href="http://dfbills.com">http://dfbills.com</a>
<br />
sent from my mobile
</div>
</div>

Since it has become commonplace for email clients to deny http downloads in the body of emails, I’ve decided to go ahead and encode my jpeg image directly into base64 using DataURLMaker.  This is entirely optional and does not display when using clients other than the Apple ones.  For a more compatible signature, check out this post.

Replacing the image reference with the base64 code and compacting the linebreaks gives me:

<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"><div style="padding: 2px 0 2px 70px; background: url('data:image/jpeg;base64,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') no-repeat 0 1px ;"><strong>David F. Bills</strong><br/><a href="http://dfbills.com">http://dfbills.com</a><br/>sent from my mobile</div></div>

Now, my signature is complete, self-contained and ready to load into MobileMail.

Switch over the PLE and paste the your code into the SignatureKey string field, save and reboot the iPhone.  When it comes back up, create a new mail message on the iPhone.  You should now be able to see the results of your handiwork.

Signature

Update: A few people have asked for the iPhone photo frame file used in my sig.  I’ve posted the PSD for download.

comments on this post:

LimitedEditioniPhone said:
November 16, 2007 (late at night)

Can you send me that icon template so I can put my picture in there?

dfbills's avatar
dfbills said:
November 16, 2007 (late at night)

I’ve posted it right at the end of the story.

LimitedEditioniPhone said:
November 16, 2007 (late at night)

Also will this not work with text editor?

LimitedEditioniPhone said:
November 16, 2007 (late at night)

how do you compact the line breaks?

Oseary said:
November 16, 2007 (late at night)

David;

I’m REALLY sorry but I cannot get this to work right… Even if I copy & paste your code provided into the plist file, I get your text & link without any issue, but the image is not there.

With my signature, I upload the file from my desktop for example, it is under the 50K request from the site that converts the picture, I replace the image request in the code with base64 code, I save the plist file and upload it to the phone via SSH. However, when viewing on the phone, the image is a blank box where it should be, and my text is there without issue.

I can send an email and when the email arrives at the destination, I get the text of the signature, the top & bottom bars as to where the signature is, but a blank box (no outline) where the image should be.

Can you be of any assistance? I am editing the signature before uploading in TextWrangler (not textedit) on my Mac, using PListEdit Pro.

Thank you so much in advance for your help… It’s an awesome thing to do, I’m just confused!

Oseary said:
November 16, 2007 (late at night)

Cancel that… I figured it out. grin

adam said:
November 16, 2007 (late at night)

Hey Oseary, how did you fix it? I have the same problem.  No matter what I do, the image doesn’t work, whether a link or a base64 image.  Also, when I try to change it to an img tag, I have a hard time formatting it properly without lots of work.  What was the magic fix? I always end up with a blank space where the image should be.

Oseary said:
November 16, 2007 (late at night)

Adam!

I was able to figure it out by doing a lot of piddling as to how to properly place the base64 code.

The code that I was copying via the site was NOT doing the trick.

However, I was able to take the code from his up above, that is between the ” ’ “, after it says, “URL(” and at the end of the code where you have to scroll over, near the “Z’)”

What has to be done, is you have to keep those ticks in place, but you still need to get the code generated… What I then did, was get the code generated via the website provided, as your image that was converted will show up on the code page… I simply right clicked and did a “properties” of the image (I’m in Firefox), and copied the long bit of code that was in the “location” area of the image properties.

What I also did was to copy his code directly into PLE, and then was able to isolate the ticks inside of that, then delete the crap that was between it, and directly copy it from the image properties, and paste it between the ticks… I edited the rest of it, as I obviously have a different name, and I wanted my phone # in the signature, as well as a different tagline than “sent via mobile.”

I saved, up’d it to the phone via SSH, and there it was!

I was incredibly, incredibly confused, as I was confident that TextEdit and TextWrangler was messing everything up… I also didn’t know how to choose where and how to shorten up the line breaks like he stated above.

Hope that helped! And David, I apologize that I took up so much space! grin

I posted a link on my site (pesosforpenguins.com) linking to yours, and if you don’t want me to, simply shoot me a comment via my site, and I’ll remove it!

Mario said:
November 17, 2007 (late at night)

So, the base64 code should be inserted as follows..

background: url(‘data:image/png;base64,iVBORw0KGgoAAAAN….THE REST OF YOUR CODE…RU5ErkJggg==’) no-repeat 0 1px;”>

After that you insert your name or whatever you feel like inserting.

One notice…the image coded as data doesn’t display in Gmail (neither web nor in email client), and just now I checked Yahoo..no like there either. How come? Otherwise it works..thanks for the tip smile

One more thing..is there any way of setting the encoding as UTF-8 in this piece of html? My last name is Tomić, but when displayed in Yahoo the last, accented letter converts to something totally different. Any solution?

velocitysf said:
November 19, 2007 (late at night)

Any one know of a windows program that will edit the file correctly? Using notepad with a binary file doesn’t appear to work properly.

Mario said:
November 19, 2007 (late at night)

Any xml editor should do it. Notepad2, Notepad Pro, UltraEdit…

shaiss said:
November 20, 2007 (late at night)

for anyone having trouble, heres some referances:
use realtime html to edit your code and view your changes: http://htmledit.squarefree.com/

use http://140.124.181.188/~khchung/cgi-bin/plutil.cgi to convert the encrypted com.apple.mobilemail.plist

worked great for me, thanks david!

LimitedEditioniPhone said:
November 20, 2007 (late at night)

how can I change sent from my mobile to a lower font?

shaiss said:
November 20, 2007 (late at night)

in the first line look for “<div style=“font: 10px”
change that to “<div style=“font: 8px”

or whatever other # you want

LimitedEditioniPhone said:
November 20, 2007 (late at night)

I want the name to be 10px and the sent from mobile to be 7px

Mario said:
November 20, 2007 (late at night)

Just instead of “sent from my iPhone” insert this

<div style=“font: 7px ‘Lucida Grande’,Verdana, Arial, Sans-Serif”>
sent from my mobile
</div>

This rule applies to all further changes regarding color, size, border.. of any of signature’s elements smile

shaiss said:
November 20, 2007 (late at night)

using david’s example above heres the code:
http://pastie.caboo.se/120379

yu’ll notice:
<style type=“text/css”>
<!—
.style1 {font-size: 7px}
—>
</style>

in the begining.  This is where you set your font size for “style1”

then before and after the “sent from my mobile” you’ll see:
<span class=“style1”>sent from my mobile</span>

so your specifinf that text as style1 which before you said was 7px.

I’m no CCS guru, but this works on any webpage so it should work on the iphone too. If not, try defining the style after the first div tag.  This should work

shaiss said:
November 20, 2007 (late at night)

+1 for mario, thats much easier then my idea and he typed that while I was typing my reply wink

Mario said:
November 20, 2007 (late at night)

shaiss, your way is a proper one, that way should be defined all new points of change in code, but since the iPhone sig code is a relatively short one, we can neglect certain rules and apply them directly where needed smile

dfbills's avatar
dfbills said:
November 20, 2007 (late at night)

One thing to note is that if you make the filesize of the sig too large, the iPhone won’t load the whole message.  You’ll always get the “load the rest” widget at the bottom of your received message.

shaiss said:
November 20, 2007 (late at night)

good point David, however with the image at 57x57 its usually 1/2kb and text can’t take too much space.  But I see how ppl could go myspace on there sig

LimitedEditioniPhone said:
November 21, 2007 (late at night)

anyway of getting around the images not showing up in some email clients?

rkisling said:
December 17, 2007 (late at night)

So, I can edit the file, but having trouble uploading it back to my iPhone ... I am using Windows and using Notepad2 isn’t working.  What program can I use to edit the file and get the iPhone to recognize it (in Windows) or do i need to borrow

dfbills's avatar
dfbills said:
December 18, 2007 (late at night)

You need something that can edit binary plist files.  You might try XMLSpear.

InkBlot said:
January 03, 2008 (late at night)

Hallo!  Wanted to write in and say thanks for a wonderful tip, and to let people know it is possible for Windows users to do this.

Use Erica’s Utilities and the program “psutil” to convert the binary plist file to text.

~\bin\psutil -c xml1 com.apple.mobilemail.plist

Transfer it to your PC, and prepare to add your custom signature code.  Before you add it, however, open a blank text file and past it in there.  Before we inject our custom html code for the signature, Windows user’s can’t leave the angle brackets as they are.  We have to replace &#lt; with &lt; and &#gt; with &gt;

Once you do that, add the code into the plist file as described, then transfer it back.  After you do, convert it back to binary format:
~\bin\psutil -c binary1 com.apple.mobilemail.plist

If everything is OK, the file size should be about the same as the text-formated version.  If the file size drops to 0, then there’s still some characters in there breaking the xml.  Changing the angle brackets to their coded versions should be all you need, however.  See this page for more codes.

InkBlot said:
January 03, 2008 (late at night)

Well, my last post didn’t turn out how I expected.  What I was trying to say was, replace left-angle-brackets with &lt; and right-angle-brackets with &gt;

mr.man said:
January 08, 2008 (late at night)

help!
i cant get this thing working…
i’m running ubuntu,
compiled the file to xml format..
edited the signature,,
recompiling it to binary and the file size is 0 (zero)! why?
i’ve tried my signature here: http://htmledit.squarefree.com/ and it’s OK…

i’ve only copyed the html code inside the String section…

what can I do?

dfbills's avatar
dfbills said:
January 08, 2008 (late at night)

Are you compiling on the iPhone?  If so, your sig may be to big and causing the iPhone plist converter to crash.

mr.man said:
January 09, 2008 (late at night)

what’s the size limit? i think that my sig is 7.7K, if it’s too big how can I reduce that side?

InkBlot said:
January 09, 2008 (late at night)

When you compile and it goes to 0, it’s either too big or more likely there’s invalid xml in there.  I had to change the angle brackets to their equivalent &-codes for it to be happy.

rkisling said:
January 09, 2008 (late at night)

I had the same problem; i even tried with a very reduced file size. (am compiling on the iphone with “iputil”, since I only have access to a Windows machine right now) I did change the angle brackets—but there must be something else “corrupting” the file.  I am at a loss on what I am doing wrong

vandal said:
February 26, 2008 (late at night)

i can’t seem to get these nice signatures to show up in outlook - does outlook even support base64- or data-url-images?

c0mputernick said:
April 19, 2008 (late at night)

I have a problem.
I cant see the .plist file when i ssh into my phone or when i use an sftp client like cyberduck.
I installed a program called finder on my iphone and i can see the file there, but there is no way to copy and paste the sig. I even tried changing the permissions on the file to 777 and still cant see it. ive tried downloading the file from another site changing that file and then uploading it, but it doesnt work.
Any Advice?

Thanks

dfbills's avatar
dfbills said:
April 22, 2008 (late at night)

c0mputernick: The reason is that the file has moved in firmware 1.1.4.  I’ve updated the information above, but here’s where it is now:

/private/var/mobile/Library/Preferences/com.apple.mobilemail.plist

c0mputernick said:
April 25, 2008 (late at night)

Thanks for the help, ive found the file.
I took your example, got my url from the Data URL generator, replaced the code from ‘data to the last ’ and then save and upload, but it keeps giving me your sig, not the image i uploaded. ive double and triple checked it and it looks right.  So I dont know what im doing wrong, but im close. Any ideas?

dfbills's avatar
dfbills said:
April 27, 2008 (late at night)

Have you tried rebooting your iPhone?

c0mputernick said:
April 28, 2008 (late at night)

Yes an it had no effect.

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

I’m not sure what to say.  Sounds like that file is not being properly updated.  I’d delete it completely, reboot then replace. 

Also make absolutely sure that you’re using this path with the latest firmware:

/private/var/mobile/Library/Preferences/com.apple.mobilemail.plist

rkisling said:
July 29, 2008 (late at night)

Anyone have any suggestions on making this work with 2.0?  I tried pasting the previous CSS code into the signature key, but to no avail.

rkisling said:
July 29, 2008 (late at night)

Nevermind my previous message… I had to reboot the iPhone after updating the plist file ... don’t recall having to do that before.

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

So i did everything! Signature looks perfect on the iphone! However when i e-mail anyone on (Gmail, Hotmail, Yahoo, Comcast, RoadRunner) The picture is gone! However in the source the Base64 data is there. I took the original version created by dfbills same thing. Has this worked for anyone in any mail client other then macmail?

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

This version only works well with the Apple products.  Check out my newly added how-to with more broadly compatible code.

luislega said:
December 07, 2009 (late at night)

Hi. I’m on 3.1.2 and just need the image part. I got it to show on my iphone’s mail settings as well as the new mail messages after updating my plist. The thing is, it apparently won’t send the image tag.

the signature code looks like this http://www.someServer.com/someImageURL.jpg

Is there anything you can help me with?

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

Already registered?

Username

Password

forgot password?       register