[Tutorial] How to add a custom CSS/HTML Signature in MobileMail (Mac)

Discussion in 'iOS Jailbreak & Cydia' started by therealduckie, Apr 16, 2008.

  1. therealduckie

    therealduckie Member

    Joined:
    Apr 9, 2008
    Messages:
    318
    Likes Received:
    6
    Device:
    4G iPod touch
    [Tutorial] How to add a custom CSS/HTML Signature in MobileMail

    How to add a custom CSS/HTML Signature in MobileMail

    So does everyone hate it when you send them an email that says "Sent from my iPhone/iPod' and call you a conceited jerk or 'FANBOY' (as if that's a bad thing)? Or are you just bored with that default and want yours to stand out? Well, this tutorial will start you off with an all new signature.

    Tools and Requirements Needed:
    • OpenSSH
    • CyberDuck or whatever YOU use to access the file system
    • Property List Editor
    • TextMate (or TextEdit) for Mac
    • Familiarity navigating the iPod Touch/iPhone Filesystem

    First thing we need to do is create the Signature.

    If you do not have CSS/HTML skills, it's ok. I am providing some simple code to get you started:
    Code:
    [COLOR="Blue"]<div style=[/COLOR][COLOR="Green"]"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"[/COLOR][COLOR="Blue"]>
    <div style=[/COLOR][COLOR="Green"]"padding: 2px 0 2px 70px; background: url('http://therealduckie.net/apple-touch-icon.png"[/COLOR][COLOR="Blue"]>
    <strong>[/COLOR]David Wasman[COLOR="Blue"]</strong>[/COLOR]
    [COLOR="Blue"]<br />
    <a href=[/COLOR]"http://therealduckie.net"[COLOR="Blue"]>[/COLOR]TRD.net Design[COLOR="Blue"]</a>[/COLOR]
    [COLOR="Blue"]</div>
    </div>[/COLOR]
    Here's how that looks:

    Please Register or Log in to view images



    Just edit the fields where it has my information and add your own.

    Now, some email clients (I'm looking at YOU gmail and Outlook) like to strip out image tags, so...we can avoid that by converting our image link to Base64 using THIS WEBSITE.

    Follow the instructions they give you, then paste the code replacing the area highlighted here in RED:
    Code:
    url('[COLOR="Red"]http://therealduckie.net/apple-touch-icon.png[/COLOR]">
    Here's what my code looks like after the conversion:
    Code:
    url('[COLOR="Red"]data:image/gif;base64,R0lGODlhHgAaAPf/ABsXFK60uUxLSaWtsnt7e3W29p2ipXBuazqT7jiT8IeOkmhlYlWm+U2j/X259U+i9kui/H18eUug915cW6OxvWyy+SwsLIGBgHV7f2xpZXZzcYG79XNwbGVjYZ2fn3V1dTyV8TyU7SYkIjaR76u/0Za94ZO64FpVUFKk+WpnZjuU72JfXTKR83t8fHp5eXl4eG9ubFFOTCEfHj+W7jiS7zuT7aSzxJzI9bC9y9bX2D2V7zqS7X17eK25xqq8zYa77bO/yt3f4U6l/9vb3UCW7zyU7j2V7kmf9kSd+ESe+jmS7kCY8aWxwp+tuNHS1JTG+j+W76K3y6Sywnx8fIC47z+V7TOP7o6cqZzC54CGiqSqrZ/M9XC0+ZC12JXA6I2hskJAPj6X8o2bp2Sz/1+s+4a767K6v5OhrKGioG+q5W1raYaEgD04NFSn+0Ob9U2g9k+h9kKZ8zqT7Xmz65/C46Wzvn+59KCmqoeIiD+W8Vmo+GNgWlOl+mSw/IqNjqa2wl5YUjc3N1Ci9leo+KKorFBMSGRfWkyh+FxaVZivwiiM8TuV8cLN1J3A3F+p9Ke3xJW835261JvD6oaTnY+Wmk+h8zmS7V+t/Mfj+Xt5dqnG4KisrjyT7lyr+np2csXU34K/+be5trm+v6K/2H6AgKius3+KkkVCQE5KRmhpaa2wr2ptbT+Y84B+ej2b/G20+Ymv0zg2MoO78zWS8qm3w4S884+grlal9USb9Eyg9Xi8/06h9GCt+pGvypbF8FGj94yIgHd1coi77Y6964iEgJCdpaGgnZ3E5z49PJTI9zAuLX269n669Uuh+LjFzFen+W9samiw+Ye35Wuz+jQxLj2W8A8JBS+N71uq+XZwaKWlo1ip+0OY7T2U74K995CRkHBvb1Gk+Hyu3xINB5GisGRiXZqos4mKikqe84O67pimsZCYnTiS7pmXlDSR8UA+PDeS8Hd3dFpYVTMyMqa4yKazxKS3y0Wd+D2U7kyj/D+V7qezxE2k/T6V7kCW7v///yH5BAEAAP8ALAAAAAAeABoAAAj/AP8NASJln8GDCBMq3McER5B/OW7wy8evosWLGDPyawDhiZMeQmro60eypMmTKPvpw5fEhw0I+vzJnEmzps2ZM5BEqZcv5s2fNI0UkTnjnj2ePv2tBFqzxptnKvwVPdpTZghcDHQk/VnDEb0BVBBMReoPX6VRA4ZVY+ovgZdsJ/4cMWKU7IgNwE5oGYRAX5GV7PDJxKdkVgkOK5r8wle3pz53yYh1uKMrQR49cXJx2bWDxoNXl455SkFBEGOq/XQMC0AAnJ8AkrCU0kTCGIlftXp4IOTMxYE6D07zrIHCTIYXBD4sCKVKzZpWKb5h8qABBjQXLYL9Cd4Y3xI62i4Q/ziH5pOBFy54tGMkSgMBD5suTMlEC47wnvjCbGk1wQCoAt+sAMMjc/gSwQTfCDMNBR0ktlhjMY2QDgcCUMJANHgIwIMdiphgSAzmSMBCCXvEoE4498UEzw8LvKMANhWQggwHDrBgwglgrDOGK5EUcsoZKKToDw0/IKJMFp1U8IEyCzhwjSzlzCNAIo2sEkgsYvAhZAJloCIDBmS8kooM8jBjxTbFiGABNWyoKcIkbQhJwwaAjKMAA320YE0GBShBgzfxACCoALEAQE4z/UDoTz/odHGFOJwsIY0YsHADhT6LLPMFBqZA0ostaYilaFmsSCCHP1WAcEg3/RBFQzO83DxiiRtH7CDVqFJtpQ8RNfWjgg5EzAAFUUa9tBVbQOUUBUgipeRsSiu1FNFEGlWrEUceCUTQQtwu1NBDAQEAOw==[/COLOR]') 
    
    Ok, let's move on to adding it to your iPod Touch/iPhone...


    1. On your iPod Touch/iPhone-- open Settings, then click on Mail and scroll to the bottom where it says 'Signature'.

    2. Type anything you want in there. it doesn't matter since we're going to replace it. For this Demo we'll use 'gobblegobble'. Exit out of Mail Settings.

    3. Now, find the following file on your:

    iPod Touch
    Code:
    /private/var/[COLOR="Red"]mobile[/COLOR]/Library/Preferences/com.apple.mobilemail.plist
    iPhone
    Code:
    /private/var/[COLOR="Red"]root[/COLOR]/Library/Preferences/com.apple.mobilemail.plist
    4. Save it to your Mac's Desktop and, as always when editing system, files, MAKE A BACK-UP!

    5. Now, open com.apple.mobilemail.plist (from your Mac's Desktop) using Property List Editor. Immediately Save it. This will convert it from the binary file it is to a XML based file which can be edited.
    (*note: If it won't save, just Save As and name it something else. Just be sure to remember to rename it com.apple.mobilemail.plist before putting it back on your iPod Touch/iPhone )

    6. Next, open com.apple.mobilemail.plist using TextMate (or TextEdit). It should open looking like a standard XML file.
    (The reason we open it in a text editor is because the code we're adding is lengthy and it makes it easier to see)

    Please Register or Log in to view images



    7. Find the following code:
    Code:
    [COLOR="Blue"]<key>[/COLOR][COLOR="Red"]SignatureKey[/COLOR][COLOR="Blue"]</key>
    	<string>[/COLOR][COLOR="Green"]gobblegobble[/COLOR][COLOR="Blue"]</string>[/COLOR]
    8. Go to your newly created CSS/HTML Signature from earlier in this tutorial. Copy all of it and paste it where is says gobblegobble between <string> and </string> and SAVE the file as com.apple.mobilemail.plist.

    9. Upload your newly saved com.apple.mobilemail.plist file to the following folder:

    for iPod Touch
    Code:
    /private/var/[COLOR="Red"]mobile[/COLOR]/Library/Preferences/
    for iPhone
    Code:
    /private/var/[COLOR="Red"]root[/COLOR]/Library/Preferences
    10. Choose yes to overwrite the file.
    (*note: If it will not allow you to overwrite the file, it means MobileMail is running in the background because you recently opened it. You will need to reboot your iPod Touch/iPhone.)

    11. Now open MobileMail and choose 'Reply' to a message to check if it worked. Here's what mine looks like:

    Please Register or Log in to view images



    And you're done. Feel free to share your custom CSS/HTML in this thread for others to use.

    If you liked this tutorial, please show it by adding to my rep. Just click the scales below my name on the left and add your reason.

    Thanks,

    Duckie

    Attached Files:

    1 person likes this.
  2. therealduckie

    therealduckie Member

    Joined:
    Apr 9, 2008
    Messages:
    318
    Likes Received:
    6
    Device:
    4G iPod touch
    RESERVED FOR WINDOWS TUTORIAL

    Feel free to add to this tutorial by including a Windows translation for other users.

    Thanks
  3. micaheljcaboose

    micaheljcaboose Well-Known Member

    Joined:
    Jan 20, 2008
    Messages:
    1,855
    Likes Received:
    82
    /here it is in windows format.

    How to add a custom CSS/HTML Signature in MobileMail

    So does everyone hate it when you send them an email that says "Sent from my iPhone/iPod' and call you a conceited jerk or 'FANBOY' (as if that's a bad thing)? Or are you just bored with that default and want yours to stand out? Well, this tutorial will start you off with an all new signature.

    Tools and Requirements Needed:
    • Installer
    • BSD Subsystem
    • OpenSSH
    • Notepad
    • Familiarity navigating the iPod Touch/iPhone Filesystem

    First thing we need to do is create the Signature.

    If you do not have CSS/HTML skills, it's ok. I am providing some simple code to get you started:
    Code:
    [COLOR="Blue"]<div style=[/COLOR][COLOR="Green"]"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"[/COLOR][COLOR="Blue"]>
    <div style=[/COLOR][COLOR="Green"]"padding: 2px 0 2px 70px; background: url('http://therealduckie.net/apple-touch-icon.png"[/COLOR][COLOR="Blue"]>
    <strong>[/COLOR]David Wasman[COLOR="Blue"]</strong>[/COLOR]
    [COLOR="Blue"]<br />
    <a href=[/COLOR]"http://therealduckie.net"[COLOR="Blue"]>[/COLOR]TRD.net Design[COLOR="Blue"]</a>[/COLOR]
    [COLOR="Blue"]</div>
    </div>[/COLOR]
    Here's how that looks:

    Please Register or Log in to view images



    Just edit the fields where it has my information and add your own.

    Now, some email clients (I'm looking at YOU gmail and Outlook) like to strip out image tags, so...we can avoid that by converting our image link to Base64 using THIS WEBSITE.

    Follow the instructions they give you, then paste the code replacing the area highlighted here in RED:
    Code:
    url('[COLOR="Red"]http://therealduckie.net/apple-touch-icon.png[/COLOR]">
    Here's what my code looks like after the conversion:
    Code:
    url('[COLOR="Red"]data:image/gif;base64,R0lGODlhHgAaAPf/ABsXFK60uUxLSaWtsnt7e3W29p2ipXBuazqT7jiT8IeOkmhlYlWm+U2j/X259U+i9kui/H18eUug915cW6OxvWyy+SwsLIGBgHV7f2xpZXZzcYG79XNwbGVjYZ2fn3V1dTyV8TyU7SYkIjaR76u/0Za94ZO64FpVUFKk+WpnZjuU72JfXTKR83t8fHp5eXl4eG9ubFFOTCEfHj+W7jiS7zuT7aSzxJzI9bC9y9bX2D2V7zqS7X17eK25xqq8zYa77bO/yt3f4U6l/9vb3UCW7zyU7j2V7kmf9kSd+ESe+jmS7kCY8aWxwp+tuNHS1JTG+j+W76K3y6Sywnx8fIC47z+V7TOP7o6cqZzC54CGiqSqrZ/M9XC0+ZC12JXA6I2hskJAPj6X8o2bp2Sz/1+s+4a767K6v5OhrKGioG+q5W1raYaEgD04NFSn+0Ob9U2g9k+h9kKZ8zqT7Xmz65/C46Wzvn+59KCmqoeIiD+W8Vmo+GNgWlOl+mSw/IqNjqa2wl5YUjc3N1Ci9leo+KKorFBMSGRfWkyh+FxaVZivwiiM8TuV8cLN1J3A3F+p9Ke3xJW835261JvD6oaTnY+Wmk+h8zmS7V+t/Mfj+Xt5dqnG4KisrjyT7lyr+np2csXU34K/+be5trm+v6K/2H6AgKius3+KkkVCQE5KRmhpaa2wr2ptbT+Y84B+ej2b/G20+Ymv0zg2MoO78zWS8qm3w4S884+grlal9USb9Eyg9Xi8/06h9GCt+pGvypbF8FGj94yIgHd1coi77Y6964iEgJCdpaGgnZ3E5z49PJTI9zAuLX269n669Uuh+LjFzFen+W9samiw+Ye35Wuz+jQxLj2W8A8JBS+N71uq+XZwaKWlo1ip+0OY7T2U74K995CRkHBvb1Gk+Hyu3xINB5GisGRiXZqos4mKikqe84O67pimsZCYnTiS7pmXlDSR8UA+PDeS8Hd3dFpYVTMyMqa4yKazxKS3y0Wd+D2U7kyj/D+V7qezxE2k/T6V7kCW7v///yH5BAEAAP8ALAAAAAAeABoAAAj/AP8NASJln8GDCBMq3McER5B/OW7wy8evosWLGDPyawDhiZMeQmro60eypMmTKPvpw5fEhw0I+vzJnEmzps2ZM5BEqZcv5s2fNI0UkTnjnj2ePv2tBFqzxptnKvwVPdpTZghcDHQk/VnDEb0BVBBMReoPX6VRA4ZVY+ovgZdsJ/4cMWKU7IgNwE5oGYRAX5GV7PDJxKdkVgkOK5r8wle3pz53yYh1uKMrQR49cXJx2bWDxoNXl455SkFBEGOq/XQMC0AAnJ8AkrCU0kTCGIlftXp4IOTMxYE6D07zrIHCTIYXBD4sCKVKzZpWKb5h8qABBjQXLYL9Cd4Y3xI62i4Q/ziH5pOBFy54tGMkSgMBD5suTMlEC47wnvjCbGk1wQCoAt+sAMMjc/gSwQTfCDMNBR0ktlhjMY2QDgcCUMJANHgIwIMdiphgSAzmSMBCCXvEoE4498UEzw8LvKMANhWQggwHDrBgwglgrDOGK5EUcsoZKKToDw0/IKJMFp1U8IEyCzhwjSzlzCNAIo2sEkgsYvAhZAJloCIDBmS8kooM8jBjxTbFiGABNWyoKcIkbQhJwwaAjKMAA320YE0GBShBgzfxACCoALEAQE4z/UDoTz/odHGFOJwsIY0YsHADhT6LLPMFBqZA0ostaYilaFmsSCCHP1WAcEg3/RBFQzO83DxiiRtH7CDVqFJtpQ8RNfWjgg5EzAAFUUa9tBVbQOUUBUgipeRsSiu1FNFEGlWrEUceCUTQQtwu1NBDAQEAOw==[/COLOR]') 
    
    Ok, let's move on to adding it to your iPod Touch/iPhone...


    1. On your iPod Touch/iPhone-- open Settings, then click on Mail and scroll to the bottom where it says 'Signature'.

    2. Type anything you want in there. it doesn't matter since we're going to replace it. For this Demo we'll use 'gobblegobble'. Exit out of Mail Settings.

    3. Now, find the following file on your:

    iPod Touch
    Code:
    /private/var/[COLOR="Red"]mobile[/COLOR]/Library/Preferences/com.apple.mobilemail.plist
    iPhone
    Code:
    /private/var/[COLOR="Red"]root[/COLOR]/Library/Preferences/com.apple.mobilemail.plist
    4. Save it to your PC's Desktop and, as always when editing system, files, MAKE A BACK-UP!

    5. Next, open com.apple.mobilemail.plist using Notepad. It should open looking like a standard XML file.
    (The reason we open it in a text editor is because the code we're adding is lengthy and it makes it easier to see)

    Please Register or Log in to view images



    6. Find the following code:
    Code:
    [COLOR="Blue"]<key>[/COLOR][COLOR="Red"]SignatureKey[/COLOR][COLOR="Blue"]</key>
    	<string>[/COLOR][COLOR="Green"]gobblegobble[/COLOR][COLOR="Blue"]</string>[/COLOR]
    7. Go to your newly created CSS/HTML Signature from earlier in this tutorial. Copy all of it and paste it where is says gobblegobble between <string> and <string> and SAVE the file as com.apple.mobilemail.plist.

    8. Upload your newly saved com.apple.mobilemail.plist file to the following folder:

    for iPod Touch
    Code:
    /private/var/[COLOR="Red"]mobile[/COLOR]/Library/Preferences/
    for iPhone
    Code:
    /private/var/[COLOR="Red"]root[/COLOR]/Library/Preferences
    9. Choose yes to overwrite the file.
    (*note: If it will not allow you to overwrite the file, it means MobileMail is running in the background because you recently opened it. You will need to reboot your iPod Touch/iPhone.)

    10. Now open MobileMail and choose 'Reply' to a message to check if it worked. Here's what mine looks like:

    Please Register or Log in to view images



    And you're done. Feel free to share your custom CSS/HTML in this thread for others to use.

    If you liked this tutorial, please show it by adding to my rep. Just click the scales below my name on the left and add your reason.

    Thanks,

    Duckie
    1 person likes this.
  4. therealduckie

    therealduckie Member

    Joined:
    Apr 9, 2008
    Messages:
    318
    Likes Received:
    6
    Device:
    4G iPod touch
    Just remember that for Windows, the plist file may appear corrupted. It needs to be converted from a binary file before you edit it.

    plist2text from Erica's Utilities should take care of this for you.

    Or use this tool:

    http://140.124.181.188/~khchung/cgi-bin/plutil.cgi


    Mods: could we have the '(Mac)' removed from the title now that it is Windows compatible?
  5. micaheljcaboose

    micaheljcaboose Well-Known Member

    Joined:
    Jan 20, 2008
    Messages:
    1,855
    Likes Received:
    82
    When I edit .plists it works perfectly fine for me..
  6. therealduckie

    therealduckie Member

    Joined:
    Apr 9, 2008
    Messages:
    318
    Likes Received:
    6
    Device:
    4G iPod touch
    Not everyone has such an easy time with it. I figured I would cover all bases with my post so it would leave very little to be questioned.

    Thanks again for the 'translation'.
  7. Apple Guy

    Apple Guy Well-Known Member

    Joined:
    Dec 24, 2007
    Messages:
    1,992
    Likes Received:
    41
    Device:
    iPhone 4S (Black)
    Now that I finally fixed up your weird code to work on my iPod, I have a question.

    Can you do this on a Mac with Mail.app? It would be sweet if you could
  8. therealduckie

    therealduckie Member

    Joined:
    Apr 9, 2008
    Messages:
    318
    Likes Received:
    6
    Device:
    4G iPod touch
  9. pistolero.nl

    pistolero.nl New Member

    Joined:
    Jul 13, 2008
    Messages:
    5
    Likes Received:
    0
    Device:
    iPad 2 (Black)
    I've tried this now almost a brazilian times but still the original message "Sent from my iPod" comes back... so what am I missing?? I'm using the Windows(Vista) version.
  10. gseale

    gseale New Member

    Joined:
    Feb 9, 2009
    Messages:
    1
    Likes Received:
    0
    New filenames for firmware 2.2.0/2.2.1

    Guys,

    Seems they may have changed the name of the com.apple.mobilemail.plist in the new release of 2.2.0/2.2.1. I have updated the default signature, and when I go into /private/var/root/Library/Preferences and it is not there. I tried creating it, but the file does not get picked up in the email signature.

    Any ideas?

    Greg

Share This Page