What You Will Need

• Your Mac
• Your iPhone (it needs to be jailbroken)
• PlistEdit Pro (or another application capable of editing plists)
• Coda (or another application for editing HTML)

Before We Begin

To use a custom CSS signature, we will be modifying a preference file on your iPhone. Simply using copy and paste within the new 3.0 OS will not maintain the HTML and formatting of our signature. Your iPhone should already be jailbroken and capable of mounting as an Apple File Protocol (AFP) share on your Mac. For instructions on this process, see here.

Step One

Once you have logged into your iPhone over AFP, browse to the following location:

/private/var/mobile/Library/Preferences

Copy the file com.apple.mobilemail.plist to your Mac. Go ahead and duplicate this file, appending “backup” to the end of the filename so you have a clean copy in case something goes wrong.

Step Two

Open your email signature that we created (see the original post here) in your HTML editor and copy the contents to the clipboard.

Step Three

Use PlistEdit Pro to open the file you copied earlier in Step One. Towards the bottom of the list, you will see an entry called “SignatureKey.” The value for this string will match your current iPhone signature.

Double-click this value to highlight the contents and delete what’s there. Now paste the HTML code for your email signature that we copied in Step Two. Save this file back to your desktop.

Step Four

Browse back to the Preferences folder on your iPhone. Copy our new edited plist file and replace the original on your iPhone.

Step Five

All done! Create a new email and you should see your HTML email signature at the bottom.

Limitations

Unfortunately, due to limitations in the iPhone 3.0 OS, Mail on the iPhone only supports one signature. There are third-party applications available on the App Store that address this issue, but I have not tested them with HTML email signatures. Hopefully in a future OS update, Apple will allow users to have unique signatures for multiple mail accounts.

This process and file location has remained the same since iPhone OS 1.1.4 and will likely remain the same, meaning as new OS updates come out, they should not break this functionality (unless Apple adds support for multiple signatures at some point). However, if an update does break your signature, the process outlined above should still work to put it back.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Mobile Q4: All Eyes Were on Android, 4G and the Rising Tablet Tide
• Report: A Mobile Video Market Overview
• In Q3, the Tablet and 4G Were the Big Stories

As any person who frequently uses email will tell you, email signatures are very important as they usually provide more information than just a standard name and email address from the sender. You can spice up an email signature since Mail offers support for HTML signatures. If you are fairly comfortable with getting your feet wet with HTML & CSS, they are a snap to create. Read on for how you can make one!

A Note on iPhone Support

This how-to is written specifically for Apple’s Mail in OS X. Also, these signatures will display on an iPhone, but currently there is no method (aside from jailbreaking) to support these signatures on outgoing emails originating from an iPhone. Depending on the amount of content in your email signature, you may need to further tweak the CSS to get something that looks the way you want it to. For those who have already jailbroken their phone, look forward to an upcoming article on how to accomplish these signatures on your iPhone.

Let’s Get Started

Here is a quick example of what we will be creating.

For this how-to, you will need Mail, Safari and some type of HTML editor; my preference is Coda. Our email signature is simply an HTML page with some CSS styling. The code for mine is included below.

<style>
#sig a:link{color: #690;}
#sig a:visited{color: #690;}
#sig a:hover{color: #690;}
</style>
<div id="sig" style="-webkit-text-size-adjust:none;line-height: 14px; margin: 6px 0; padding: 8px; border-top: 1px #999 dotted; border-bottom: 1px #999 dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 10px; color: #555;" >

<strong style="color: #690;">Chris Ryan</strong> Blogger, Designer, Thinker & Nerd
web: <a href="http://www.theappleblog.com" style="color: #690; text-decoration: none; border-bottom: 1px #999999 dotted;">theappleblog.com</a> email: <a href="mailto:chris@theappleblog.com" style="color: #690; text-decoration: none; border-bottom: 1px #999 dotted;">chris@theappleblog.com</a></div>

Copy this code (tweaked for your own purposes) into a new HTML document and save it as signature.html. Now open this file in Safari and inspect it to ensure that everything is correct as you would like it to appear in the bottom of your emails. Be sure and click the links to make sure they work correctly as well (and link to your content and not mine!).

If everything looks good, then go to File and pick “Save As” and save the file as a .webarchive. This is the same format that Mail uses to save your signature files.

Our next step is to go into Mail and create a new blank signature. This is found under the Mail menu and by clicking on Preferences. In the Signatures tab, you can click the plus icon to add a new signature. By default, Mail will pre-populate this signature with your name and email address. What has really happened is Mail has created a new .webarchive file with that signature content. We’re going to replace it with the file we created earlier.

Close the Signature window and quit Mail (changes should be saved automatically). Now go to your home folder and then open the Library folder. Inside you will find a Mail folder and inside of that, yet another folder called, you guessed it, Signatures (Home → Library → Mail → Signatures). Inside of here are the .webarchive files for your signatures. If the signature you created above was the very first one, there should only be one file in here. If you already have multiple existing signatures, you can double click these files and use Safari to inspect their contents.

Locate the file that matches the simple new email signature we just saw in Mail. With the icon selected, press return as if you were going to change the file name. When the file name highlights, copy this to the clipboard (Command + C) and press return again to switch out of file renaming mode.

Go back to the desktop where you saved the .webarchive of your signature file and rename it using the filename you copied to the clipboard. You should now have a file with a very cryptic filename (such as “AAD4FDB4-8AE3-49F2-8079-161E16525CC0.webarchive”).

Now, drag this file back into the Signatures folder and Finder will alert you that it wants to overwrite this existing file. Click “Replace” to accept and when the transfer is complete, your Signature should be ready to go.

Launch Mail and go back to your preferences to verify the new signature is showing up. If you have multiple email accounts setup within Mail, make sure you drag the signature to the appropriate email accounts.

Create a new message and viola! Your new signature is there (or if you do not have them turned on by default, they are accessible from the Signature menu in the upper right area of a new email message window).

One Last Word On Coding

One special piece to note about the example code above is the usage of -webkit-text-size-adjust: none; which overrides the iPhone’s default attempts to re-scale the signature. This was essential in making my signature look best on the iPhone. Again, with the amount of content you have in your signature, you may need to play around with the CSS to get something that displays the way you want when you view your sent or received messages on the iPhone.

Depending on your comfort level with CSS, you can tweak the signature a bit more and even add a small picture. Some HTML based email browsers, like Yahoo or Gmail, will not display this picture by default though. There are other solutions to this, such as using Data URLs to represent your picture and for more information on that, check out this how-to.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Why iPad 2 Will Lead Consumers Into the Post-PC Era
• The Near-Term Evolution of Social Commerce

Installation

To ‘install’ them, go to /System/Library/CoreServices/Dock and click on the gear icon in the Finder window.

Select “Show Package Contents” and then go to Contents/Resources/ and copy these files in. They will replace the system images, so be sure to backup the originals!

Download Sky
Download Wood

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Why iPad 2 Will Lead Consumers Into the Post-PC Era
• The Near-Term Evolution of Social Commerce
• Content Farms: The Players, The Benefits, The Risks

Anyone else tired of a Dock’d Applications folder that seems to be a link to Address Book?

I’m hearing a lot of complaints in various forums and reviews about the icons of stacks in the dock, and not much in the way of solutions, so I thought I’d suggest the one that’s working for me. (There is a bigger post upcoming with a lot of tricks to Leopard, but I wanted to get this one out first, so that at least some people might be happier.)

The problem is simple: Stacks in the Dock show a pile of icons, with the topmost one being the one most recently accessed, or first in the alphabet, or whatever. This is frustrating a lot of people who have custom icons for the folders in their docks, as instead of the custom icon, the stack icon is a changeable picture, usually of the object that starts with A. Many are grumbling about bad UI design with this, as we are used to the icons that we had representing the folders that were plainly used so much that we thought they deserved a place in the dock. And yes, in my opinion, it is a design flaw. There’s a reason for distinctive icons in the Dock – they’re a mnemonic toy, and a representation of everything under that icon. (I know I’m not alone in thinking that Address Book, which I hardly ever use, is not a good symbol for my applications folder.)

The simple fix? First, find that icon that you liked so much before. Now, rename it. Try something like “_ Proper Applications Icon” – anything with a non-alphanumeric character should do. When you put that icon in the stacked folder, so long as your stack is set to sort by name (command-click on the stack, and choose ‘Sort by’), that icon will stay on the top of the stack. To illustrate my point, to the left is my Dock, after I added a better icon to the Utilities stack, and to the right is a snip of my Applications stack’s grid view after I put an icon in there. There’s still the slight aberration of the other icons sticking out from behind the folder in the Dock, true, but it’s much better than staring at Address Book.

Icons from David Lanham’s Agua set.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Why iPad 2 Will Lead Consumers Into the Post-PC Era
• The Near-Term Evolution of Social Commerce
• Content Farms: The Players, The Benefits, The Risks