Custom CSS Signatures in Mail (UPDATED)
Posted on Friday, April 14th, 2006 at 11:13 am under Mac Geekery, Tutorials.
The default interface for Mail signatures allows you to do rich text signatures using the fonts and colors palette. You can even drag an image into the compose signature window and it will be included in every email as an attachment. This is fine for most people, but attachments should be just that, an attachment of a file I am sending, not an image in my signature. So here’s an easy guide on how to do CSS signatures referencing images on an outside server and not as an attachment.
This tutorial covers Apple Mail in Mac OS X Tiger v.10.4
STEP 1: Create a new Mail signature
Launch Mail, located in the Applications folder. From Mail’s top menu, select ‘ Mail > Preferences ‘ and go to the Signature pane. From the Signatures pane, click the plus icon underneath the middle column to create a new Signature. In this example I cleared all my previous signatures for the purpose of clarity but this is not required. Once your signature is created, quit Mail by selecting ‘ Mail > Quit Mail ‘ from the top menu.
Step 2: Create your new signature in a text editor
Using a text editor application, create your signature using html and css.
TextEdit can be used for this, just make sure save as HTML and not rich text. If you want to use my signature style, just download my html sample file and use it as a starting point.
UPDATE: After publishing this, some of you have discovered that GMail will not display any of the CSS unless it’s inline. So here’s a new revised sample file that has all the CSS inline including the image as an img file instead of a a background css attribute. When using this method, GMail will show a link giving the user the option of showing the embedded images.
If you are starting one from scratch check out A List Apart’s article on CSS in emails. In summary, do not use html, head or body tags, use divs instead. Use embedded CSS not extarnal. Do not use classes that start with a dot, but u can do #div .class instead. The same goes to the a: tag.
Step 3: Create Web Archive from signature
Open the signature html file you just created in Safari. You can do this by dragging the actual file icon into the Safari icon in your dock. This should look exactly as you want your signature to look like.
To save this as a web archive, from Safari’s top menu select ‘ File > Save As… ‘ and save the signature as a Web Archive by selecting ‘Web Archive’ on the Format pulldown menu. Saving to the Desktop makes it easy to find for the next step.
Step 4: Replace old signature with the new one
From the finder, navigate to ‘ your home folder > Library > Mail > Signatures ‘. Since I only have one signature in Mail, there’s only one ‘.webarchive’ file in this folder. If you have more than one signature, you need to find the one we created on step 1. Open the web archives in Safari to find the one we created in step one. Copy the file name of the archive file and paste the name in the new archive file on the desktop to rename it. Now drag the new signature archive from the desktop into the Signatures folder. It should prompt you asking if you want to replace the file, which you do.
Step 5: Activating the new signature
Launch Mail and select ‘ Mail > Preferences ‘ from the top menu then go to the Signatures tab. You can rename the signature name here by double clicking it’s name and renaming it. Notice that Mail will not properly render the html in this Signature window but it will render it properly in the compose window.
Now drag the signature to the mail accounts you want it available for.
Then select the account from the left column and select the new signature from the ‘Choose Signature’ pulldown menu. This will make it the default signature for that account.
Step 6: Testing our new CSS signature
To test our new signature, compose a new email and send it to yourself. You should be able to see the signature in the compose window.
Click the send and receive button to receive you new email. You should get a new email with your spanking new fancy signature that contains no image attachments. What a concept!
UPDATE: Guide to CSS Signatures on jail broken iPhone by Jiradett
Apr 14th, 2006 at 1:27 pm
Ok, I’ve tried this twice, starting from scratch – here’s the signature:
http://media.amacgenius.com/signature.html
Neither time did it give me the HTML – always gave me the default stuff from when I made my “new signature” in like step 1.
Apr 14th, 2006 at 1:31 pm
Good stuff. Thanx for the little tutorial.
I’m curious, in the text email you receive, there’s a little “luggage tag” next to your avatar. What’s that for, or is it part of your pic in Address Book/.Mac?
Thanx.
Apr 14th, 2006 at 1:32 pm
er, that should read “in the TEST email”, not TEXT.
Apr 14th, 2006 at 1:33 pm
Nevermind, I started over – forgot to close Mail in Step 2, all is working well.
Apr 14th, 2006 at 1:36 pm
tony, that mail tag is from the awesome MailTags plugin.
Apr 14th, 2006 at 1:40 pm
Very Cool! Thanks Melvin!
Apr 14th, 2006 at 2:16 pm
Strangest thing – I used your technique and everything came out great for sig #1, but when I made one for my personal account with slightly different CSS, it still loads the other sigs CSS, no matter what I do.
Apr 14th, 2006 at 2:21 pm
Never mind – it seems that Safari caches CSS.
If you start a message and then change the account it comes from, it keeps the CSS from the first account.
If you start a message from the account of the second sig, though, it works. :)
Apr 14th, 2006 at 2:37 pm
Great tutorial! I’ve always wanted something like this to customize my emails. On behalf of everyone, thanks!
Apr 14th, 2006 at 3:08 pm
Thank you! Love this.
Apr 14th, 2006 at 3:08 pm
Great tip Melvin and worked smoothly except for the fact that the image, which works fine in Safari, doesn’t appear in mail or in webmail clients. Any ideas?
Apr 14th, 2006 at 3:20 pm
Hey, fantastic tutorial. I was however wondering how I could use the sig but increase the picture size. I have no CSS / coding experience whatsoever and cant seem to figure this out. Any help would be greatly appreciated :)
Apr 14th, 2006 at 3:25 pm
[...] Melvin, over at AllForces.com (one of my personal favorites), has put together a great tutorial on how to spice up your email signatures in Apple’s mail.app, using CSS. He walks you through the steps, and it’s actually really easy. He even gives you a sample CSS file to get you started. [...]
Apr 14th, 2006 at 3:31 pm
euan,
the picture works in mail as you can see in the screenshots. it also works in webmail clients but you might have to explicitly set the preferences to show html and images. i tried it in squirrel mail and had to set these two for it to work.
lonely canuck,
you can use any image size you want since it’s no explicitly set. however u might have to add change the margin on the left by changing “padding-left: 30px;” to a higher number of pixels.
Apr 14th, 2006 at 3:45 pm
Looks and works great. Thanks !
Apr 14th, 2006 at 3:50 pm
For some reason the css signature does not appear, the default text appears instead.
Apr 14th, 2006 at 4:10 pm
[...] Melvin Rivera has written an excellent illustrated tutorial on how to create a CSS signature in Mail.app. [...]
Apr 14th, 2006 at 4:25 pm
This is similar to how it works in thunderbird (and other email clients) but the use of DIVs and CSS allows you a lot more control.
Apr 14th, 2006 at 4:27 pm
[...] Custom CSS Signatures in Mail » All Forces Cool Cool! Create a unique sig in Apple’s Mail.app (tags: mail.app mail email signature sig css custom mac macintosh macinfo apple) [...]
Apr 14th, 2006 at 4:59 pm
[...] CSS, for those who don’t know, is a way of styling web pages. Melvin Rivera has a step-by-step tutorial on using CSS in your Mail.app signatures. You may want to learn a little CSS first, if you’ve never tried it before. I just added a CSS mail signature to my email account and have to say it looks really good. [...]
Apr 14th, 2006 at 5:24 pm
Yeah, but, can only other Apple Mail clients see the CSS? It looks great in my Mail client, but outlook and gmail users can’t see the pics or most of the formatting beyond fonts… :(
Apr 14th, 2006 at 5:25 pm
so sweet!
Apr 14th, 2006 at 5:34 pm
[...] Oh, I found this post at All Forces and basically it’s a tutorial on adding custom CSS signature in Mail. It’s for Mac only though. =) [...]
Apr 14th, 2006 at 6:46 pm
that’s a ton of junk mail
Apr 14th, 2006 at 7:04 pm
If, like most people, you have chosen to not display HTLL images, to avoid validating your address to spammers, then the CSS background image will not be displayed either.
You can avoid this problem by using a “data” url (see http://en.wikipedia.org/wiki/Data:_URL for more info). Here is an online tool to encode in base64 your images :
http://www.sveinbjorn.org/dataurl_generator
Other problem : if your styles aren’t “inline”, they will be discared by various webmail clients. This works for Gmail, I haven’t tried with the other major ones.
Gmail will also discard all images (including the data: ones), so no luck there.
Another enhancement: for the AIM link, you can use the aim: URI scheme to create a new chat window. Learn about them here: http://journals.aol.com/juberti/runningman/entries/131
(Unfortunately, Gmail will also strip those links away).
HTH !
Apr 14th, 2006 at 7:15 pm
Melvin,
Just wanted to say that I love the diggs you got here on your site. Awesome tutorial btw, rock on. God Bless you my brother.
-Jonathan
Apr 14th, 2006 at 7:21 pm
Very cool.
Thanks. I sometimes wonder how people can find neat little tricks like this.
Apr 14th, 2006 at 8:04 pm
Very nice! I think I will try this soon to spice up my signature.
Apr 14th, 2006 at 8:14 pm
ned, thank you so much for shedding some light on this gmail subject. i revised the file and got it to work on gmail.
Apr 14th, 2006 at 8:19 pm
This is so rad man, you don’t even know. Great job.
Apr 14th, 2006 at 8:20 pm
What text editor is that? It looks like it’s probably better than what I’m using.
Apr 14th, 2006 at 9:00 pm
This tip is excellent and exactly what I have looking for! Thanks.
And like Dave, I too am curious to know which editor are you using? I don’t recognize the GUI.
Apr 14th, 2006 at 9:06 pm
i use skEdit and it rocks. specially good editing css because it has autocomplete.
Apr 14th, 2006 at 9:09 pm
Hey Melvin GREAT tip, Everything works except in mail I cant see my image
I just see alittle blue question mark like the image cant be found, when I have the correct link. Anyone know how to fix it?
Apr 14th, 2006 at 9:31 pm
image not found. if u are positive u have the right url, try restarting the app to clear the cache and also double check your syntax.
Apr 14th, 2006 at 9:43 pm
All fair and square but:
a) you can never guarantee that every e-mail client displays it correctly. Outlook for instance is notoriusly crap but alas, 90% of the people use it and it will not display this properly.
b) the usefulnes of HTML formatted email (and sigs) is questionable. Wouldn’t it be more friendly to have the user receive plain text-based email and have them decide what it looks like themselves? (by using their client’s settings).
c) signatures are a PITA. When the internet was not main stream a sig used to be 1 or 2 lines of pain text with just a name and number, but nowadays we seem to need avatars, disclaimers, promotional messages, legal messages and wotnot.
Great tip, but people, please think of the one you send your emails to and what you are doing to them by throwing in all of this extra bloat.
Apr 14th, 2006 at 9:56 pm
[...] read more | digg story [link] [...]
Apr 14th, 2006 at 9:56 pm
[...] read more | digg story [link] [...]
Apr 14th, 2006 at 10:50 pm
Hey Aaron b –
I think the fix is sending the mail to yourself first, so the image can be set in the app’s cache or whatnot.. that was my problem.. now, works great.
Melvin –
Thanks for the awesome tip.
Apr 14th, 2006 at 11:12 pm
Hey Melvin,
Great tutorial. Just wondering what that last item is in ur main Mail window? (mosaic.org) – it’s got a different icon?
Cheers,
Ben
Apr 14th, 2006 at 11:21 pm
ben, the last icon is for my connection to mosaic’s exchange server. it shows the items from the exchange calendar as email posts with links to the web exchange for details. it is practically useless. but the email part of exchange works great and it shows up in my regular inbox.
Apr 15th, 2006 at 12:03 am
Hey Melvin, thanks for this tutorial.
I was wondering where did you get that Lost Dharma logo icon?
Apr 15th, 2006 at 12:27 am
Great tutorial Melvin!
Since I’m a Mac-only user though, I’m a bit curious about how Outlook will handle this kind of HTML-signature? I guess also one should “PC-friendly” fonts (i.e. no Lucida Grande)?
Thanks,
Rob
Apr 15th, 2006 at 1:27 am
Great tutorial, it works great. Thanks!
Apr 15th, 2006 at 2:04 am
Good stuff mate, will be sure to try it out!
Apr 15th, 2006 at 2:11 am
Thanks!
Apr 15th, 2006 at 2:25 am
Cojonudo, great job man!!!!
Apr 15th, 2006 at 2:30 am
I don’t know whether this would actually work, but I used the data:image as my src in the image, and then used the original .gif file as the background-image in CSS. Still won’t show up in gmail, but maybe this method would work in hotmail or IE, which won’t display data:image.
Of course this also increases the bloat x2 for the doubled image…
Apr 15th, 2006 at 2:35 am
[...] Custom CSS signatures in Mail: The default interface for Mail signatures allows you to do rich text signatures using the fonts and colors palette. You can even drag an image into the compose signature window and it will be included in every email as an attachment… here’s an easy guide on how to do CSS signatures referencing images on an outside server and not as an attachment. Technorati: css, email, howto, Mac, osx, Quicklinks, tutorial Tags ‘n’ feeds: css , email , howto , Mac , osx , Quicklinks , tutorial [...]
Apr 15th, 2006 at 2:38 am
Tried your solution but i can not see the image photo neither in signature preview not in a new e-mail.
Tried also using your signature html.
It doesn’t work.
Any solution ?
Apr 15th, 2006 at 7:32 am
Superb stuff, as usual.
Apr 15th, 2006 at 8:11 am
[...] Via Digg.com, check out this article about creating CSS based signatures on Apple Mail by Melvin Rivera of All Forces. It’s pretty cool. Although I’m still a purist at heart. I’m quite happy with just the text based signatures. Why? Well for one it’s easier to make and maintain. Two, it’s consistent. Whether you’re reading email with a program capable of rendering images, css, html, etc. or if you’re reading email in plain text version it just works and is consistent. [...]
Apr 15th, 2006 at 9:24 am
Fantastic work. A truly worthy read.
Apr 15th, 2006 at 10:09 am
[...] read more | digg story [...]
Apr 15th, 2006 at 10:30 am
[...] Custom CSS Signatures in Mail » All Forces Need to Read: Make pretty signatures in Mail.app with CSS (tags: css macintosh mail.app) [...]
Apr 15th, 2006 at 4:01 pm
Thanks for the tip. Worked like a charm :)
Apr 15th, 2006 at 4:23 pm
[...] Ever wanted to make your email signature cool? Well Apple Mail, doesn’t let you create you put your own HTML into a document. But you can add HTML to your signature. I found this artical: CSS Signatures Explore posts in the same categories: Other [...]
Apr 15th, 2006 at 7:32 pm
[...] Custom CSS Signatures in Mail (UPDATED) » All Forces [...]
Apr 15th, 2006 at 7:38 pm
Dude
What can I say/type.. You rock!!!
Apr 15th, 2006 at 8:31 pm
[...] Custom CSS Signatures in Mail (UPDATED) » All Forces (tags: css gmail) [...]
Apr 15th, 2006 at 9:21 pm
Hi Melvin,
Fantastic Tutorial
One question though:
I have used msn instead of aim and so have to specify the whole email address instead of just username.
But this creates a mailto:hyperlink in blue color which i want to avoid. (the hyperlink does not get created in safari but only in mail and webmail clients)
Any idea how i do that?
Thanks,
Sharvil
Apr 16th, 2006 at 4:45 am
[...] Until I stumbled across this article about the problem over at AllForces.com. Full details are over there but I’ll break down the short version here: [...]
Apr 16th, 2006 at 5:02 am
Neato torpedo
Apr 16th, 2006 at 5:31 am
Melvin,
Thanks for the tutorial. I often get this question of how to create custom signatures within mail.app from my clients. Often I have simply created a .GIF image and you can “drag” it into the signature file from the desktop.
Your method is substantially cleaner and cooler.
Cheers!
Apr 16th, 2006 at 6:27 am
[...] [...]
Apr 16th, 2006 at 10:09 pm
good looks…did it like it..my frineds are jealous.
Apr 17th, 2006 at 2:08 am
hi melvin, très chic!! love it and your site will be one of my new mac/code-favourites in my sage-feed.
a big THANK U from rainy hamburg.
Apr 17th, 2006 at 8:51 am
[...] I previously posted this article entitled The Definitive Guide to CSS Support in Email, which discussed CSS support within email, and which clients were the best at rendering it. To follow up on that post I thought I would share with you this story Custom CSS Signatures in Mail. [...]
Apr 17th, 2006 at 10:24 am
[...] Cool tutorial on using CSS for your signature in Apple's Mail. Custom CSS Signatures in Mail (UPDATED) » All Forces [...]
Apr 17th, 2006 at 10:54 am
Thanks for the information. Just did mine.
Apr 17th, 2006 at 11:35 am
Chris, the Dharma logo icon is for an application called Lostify I use for adding video podcast tags to video files in iTunes.
Apr 17th, 2006 at 11:57 am
I, for one, am looking forward to see your avatar pictures bloating inboxes all over teh network…
Apr 18th, 2006 at 4:26 am
Hi Melvin, thanks for the useful tip and great tutorial. Can I have a brief or simple translation on my Chinese blog? (I’ll recapture the screenshots and add the post link to that translation.) Thanks again for sharing this. Fantastic signature ;)
Apr 18th, 2006 at 4:34 am
[...] Then all you have to do is follow Melvin Rivera’s instructions for making a CSS signature, but using the HTML code, pasted into a text editor, as your template. [...]
Apr 18th, 2006 at 6:04 am
Ok, now, I know this is for Mail…but…does anyone know of a way to make this work in Outlook? I’d love to do something like this for my work email account. I tried it, and got the sig to load in the signatures management window with no problem, but outlook won’t actually include it in any new wmail. I checked to make sure it was using HTML to compose new messages.
If anyone has any ideas, I’d love to hear them….
Apr 18th, 2006 at 7:42 am
Hello Melvin, thanks for allowing me to translate and share with Mac users here. The Chinese entry is here. Thanks again. :)
Apr 18th, 2006 at 11:09 am
Same proble as gadget here. Love this, but desperately need it to work for my Outlook receivers.
Apr 18th, 2006 at 2:42 pm
I love your signature design. It looks sort of Web 2.0 ish.
Apr 18th, 2006 at 3:18 pm
Melvin, what text editor is that?
Apr 18th, 2006 at 10:09 pm
自訂 Mail 的 CSS 簽名檔
加州一位網頁設計師 Melvin Rivera 提供了一個簡單的教學，讓 Mail 的使用者可以在 Mail 的簽名檔中使用 CSS 來自訂屬於自己風格的簽名檔，透過圖片連結的方式，圖片便不會變成附件，同時讓簽
Apr 19th, 2006 at 4:32 am
Signature en CSS dans Mail.app
Apr 19th, 2006 at 5:27 am
Is it possible to use these signatures in Gmail? I don’t really understand.
I have gotten it to work in Mail.app, but would really love to have it in Gmail.
Apr 19th, 2006 at 10:40 am
Thanx, Melvin you are great!
Apr 19th, 2006 at 12:40 pm
Don’t know about gMail specifically, but for OUTLOOK users …
1. Copy the HTML file to a location you will remember and save as .html
2. Open outlook and under signatures, choose “New…” and then select “Start with a Template…”.
This will open a dialogue box. Select the .html file and enjoy. Once you are all smiles with that, I highly recommend a MacBook Pro. ;) (Had to do it)
Apr 20th, 2006 at 4:57 pm
[...] It’s not the HTML so much as it is the CSS. As you may or may not know, I’m a CSS snob. As I like to say, “yes I can code CSS, no I wont do it for you”. After reading this and this I just couldn’t help myself. Beautiful CSS goodness! In e-mail! I shouldn’t…I must! [...]
Apr 21st, 2006 at 8:00 am
I did all the steps, but when I load it in Safari it only shows the code not the actual signature. Any ideas? I am pretty new to HTML/CSS. Thanks
Apr 21st, 2006 at 2:13 pm
Thank you for this tutorial, very clear and helpful!
Apr 21st, 2006 at 2:29 pm
[...] Enlace: Custom CSS Signatures in Mail [...]
Apr 24th, 2006 at 3:24 am
This sounds like an awesome idea because it bugs me that the icons in my signature always appear as attachments… but I’m not really too computer savvy and so you lose me at Step 2 when I have to open a Text Editor Application… because I don’t know what one is, or if I have one. Is there any way to accomplish this for the lay man?
Apr 25th, 2006 at 4:01 pm
[...] Oggi ho trovato in rete due articoli curiosamente analoghi. Il primo è un tutorial su come includere firme CSS nel programma Mail.app (per chi non lo sapesse, è il programma Mail di OS X, l’estensione .app definisce i programmi per OS X). Il secondo è una descrizione dettagliata e minuziosa su quali elementi di CSS funzionano e quali no sui vari client e-mail. [...]
Apr 25th, 2006 at 4:23 pm
Sweet!
Thanks
Apr 25th, 2006 at 6:37 pm
thanks, I like it very much
May 4th, 2006 at 1:46 pm
I didn’t like it when people replied/forwarded my emails as plain text and my hyperlinks disappeared, so I did a work around using the CSS ‘display’ property:
http://timmargh.net/2006/05/custom_css_signatures_in_mailapp.php
May 5th, 2006 at 12:54 am
when i open the text edit file saved as a html in safari…doesnt show like the example file. shows up as code. am i doing something wrong? i used the sample file and edited the details.
thnk
anoop
May 9th, 2006 at 1:03 am
hi, very nice tut. But I’ve one question, how can I include the icq, aim, sype, yahoo und aim contact link ? So that you click on the link und the user would be added to the Messenger
May 10th, 2006 at 2:33 pm
Hi, really great blog, and site! Maybe this is not the rright place, really, but I’d like to know how did you set up a newsgroup in your Mail.app (I guess i’d see it in your screenshots up this page… mosaic.org…). Thank you!
May 11th, 2006 at 12:11 am
Love it man, eres cojonudo!!! :)
May 11th, 2006 at 2:16 am
Hi Melvin great tut, but does the picture have to be on the web, with a url link or can the pic be embedded from a file on my computer? (not to savy on web stuff)
For the people just seeing code when opening the downloaded file in safari, I had the same problem. I re-downloaded the file on my works pc then attached it on an email and opened the attachment on my mac and it worked. Don’t know why!!!!!!!
May 12th, 2006 at 3:35 am
Seems my workaround for converting signatures to plain text wasn’t so great after all – someone suggested an alternative so I updated my take on your article:
http://timmargh.net/2006/05/custom_css_signatures_in_mailapp.php#update1
May 12th, 2006 at 3:37 am
Oops! Should’ve been ‘update2′ on the end of that link …
May 12th, 2006 at 10:15 am
If I want an image to be a hyperlink, what would the code be?
May 13th, 2006 at 2:04 pm
<a href="http://www.yourlink.com/" title="Click here!"><img src="http://www.linktoimage.com/" alt="Alternative text" style="[styling goes here]" /></a>
May 13th, 2006 at 8:08 pm
I used your code and some other ideas to create a CSS Signature to tell things about me and give my iChat status.
Here it is:
Marco Antonio Silveira Brandão
Veja meu site em http://Mac.com/marco.brandao//
Entre em contato comigo usando user.server@mac.com ou marcoantonio.brandao@gmail.com por email.
Meu status no iChat, AIM, ICQ e MSN é:
May 13th, 2006 at 8:13 pm
You can see the result here, some words are in Portuguese:
http://www.prodata.com.br/signature-inline.html
May 13th, 2006 at 8:18 pm
The iChat Status code and images I got from Matthew Wanderer in his site: http://homepage.mac.com/cherrypop/iblog/C1900478167/E20060301171845/index.html
May 18th, 2006 at 12:19 pm
Ok, I must be way lost. I copy the source code, edit to suit my needs in Text Editor. Then save as an HTML file. Then the problem occurs. When I open the file in Safari all I see is the code… not my fancy signature.
What am I doing wrong?
May 19th, 2006 at 6:11 pm
Hey Melvin,
This is the greatest tutorial I’ve seen in a long long time! Thanks so much. I’ve always hated having an attachment with my signature.
Is there anyway to add a hover color over links? I’ve done it with CSS, but then the signature doesn’t work properly. I’ve tried it many ways but nothing seems to work. If it’s not possible, no big deal because this alone is worth a ton.
Thanks again,
Brent
May 20th, 2006 at 4:27 am
Hi,
I got it all to work fine, but it never uses the fonts I specify nor the size. And, I tried common fonts that are supported by my browser such as verdana and georgia. It keeps showing up the same large Times font.
May 21st, 2006 at 4:53 am
My sig looks great now, except i found out earthlink’s mail program (that task bar thing) cannot see the image nor the alternate text.
May 21st, 2006 at 11:02 am
Awesome!
May 21st, 2006 at 11:18 am
Ok codeing is not my strong suite but I mannage to get the code to show up just how I wanted it in html, hten I went back and found that since I use gmail it needs to be inline so I managed to get ti pretty close to how I want it that was but it was over 1000 charictors so gmail would not alow it. so I cut some more out and wha la 1000 or less done but I cant get it to to dispaly in an email so I downloaded the sample code again to se if I could get the sample to work in gmail and then peice out what I did wrong from there… no dice the sample code is more then the max of 1000 charictors, can some one help me?
the top is how I want it to look and the bottom is inline code that gmail requires I use.
#sig {
font: 15px ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
line-height: 135px;
color: #000000 ;
margin: 6px 0;
padding: 6px;
border-top: 1px #999999 dotted;
border-bottom: 1px #999999 dotted;
}
#sig .row {
padding-left: 0px;
background: url(’http://img.photobucket.com/albums/v619/faind/Joy-sig.png’) no-repeat 0 1px ;
}
#sig .row a:link, #sig .row a:visited {
color: #5CB0BF;
text-decoration: none;
border-bottom: 1px #999999 dotted;
}
#sig .row a:hover {
color: #999999;
border-bottom: 1px black dotted;
}
Joy Schneider XXXX@gmail.com 916-XXX-XXXX
————————————————-
Joy Schneider: XXXX@gmail.com (916)XXX-XXXX
May 21st, 2006 at 7:11 pm
Gmail Doesn’t Like HTML
I’m a little pissed right now. Earlier today I read a great Digg article on how to create a CSS email signature. I thought it was cool, so I spent about the last hour or so tweaking my signature to perfection. Here’s what I came up with:
L…
May 23rd, 2006 at 5:16 am
has anyone got this work for gmail???????
May 25th, 2006 at 10:39 am
Awesome, just awesome!
Jun 1st, 2006 at 8:54 pm
very cool and professional thanks
Jun 6th, 2006 at 9:43 am
Hi,
I tried it out with gmail, the revised version, and unfortunately it didn’t work out for for me. Are there some extra settings to be set or so?
Jun 8th, 2006 at 10:02 am
Used the tutorial, coded with CSS, but my version of safari won’t let me save as a web archive. Do you have to have OS Tiger to do this, because I’m still running on Panther.
Jun 20th, 2006 at 12:48 am
wow. this is brilliant.
does anybody know if it is possible to load (or adapt) this same .webarchive file for pc so i can use this same customized signature in outlook?
Jun 22nd, 2006 at 3:46 am
When some PC-clients of me recieve my new signature the nordic characters like æ, ø and å get replaced by question marks… Shouldn’t there be any encoding before the DIV…?
Jun 28th, 2006 at 11:28 pm
Great tutorial! What attracts me most about actually creating one of these signatures is the way you laid it out and the style…it looks sleek!
Jun 29th, 2006 at 10:06 am
I still have a problem with my signature using my logo and sending it as an attachment. This confuses my clients because they think that I have sent them an attachment and so forth.
Could you help me please?
Jul 6th, 2006 at 6:34 pm
I noticed a couple of people have asked about how to make this work in Outlook or Gmail. I got here from a Feeburner tech tip (http://forums.feedburner.com/viewtopic.php?p=16731 about how to incorporate their rotating feed headline into your signature. They have instructions for Mozilla Thunderbird, Microsoft Outlook and Outlook Express, Yahoo! Mail and Gmail. They pointed Mac users to this post by Melvin since the process is far more complicated than for the others. I am naively assuming that even if you aren’t using their feed, the general idea of a html signature is the same, and should work for you.
One question though, I’m on 10.3.9, is there a way I can get it to work for me?
Jul 10th, 2006 at 1:01 pm
Dave,
I have the same issue. I’m on 10.3.9 and the Signatures from Mail aren’t in a folder or created from a .webarchive. Instead they are encoded into a file called Signatures.plist in the home > Library > Mail folder.
Has anyone figured out if it is possible to use HTML/CSS with this version of the OS?
Jul 27th, 2006 at 7:39 pm
Cool awesome tutorial.
Jul 31st, 2006 at 1:29 pm
This is awsome but I do have one problem. My images aren’t visible in Mail.app. They show up in the preview in Safari and they show up in the Mail.app preferences/signatures, but when I compose and send them, they just show up as the blue question mark box. I have the images on a local drive and when I tried putting them on remote servers, such as ftp or .mac, they don’t show up at all, even in preview. What am I doing wrong? Thanks
Aug 5th, 2006 at 4:39 pm
Thank you Melvin. Your generosity will always be rewarded with success and happiness.
Aug 7th, 2006 at 8:10 pm
I still have a problem with my signature using my logo and sending it as an attachment. This confuses my clients because they think that I have sent them an attachment and so forth.
Could you help me please?
I wrote this a month or so ago and no answer, and help?
Aug 10th, 2006 at 6:14 am
Exactly what I needed! In fact, using Text Edit: I dropped the banner graphic that I want implanted in my outgoing e-mail directly onto the Text Edit window and was able to save it at a Web Archive straight out of Text Edit thereby bypassing a couple of steps. Very slick. I’ve been trying to accomplish this banner thing forever. Your technique was referred to me thru the Apple discussions forum. My hat is off to you… your knowledge of things Apple is impressive! Thanks for sharing.
Tim
Aug 10th, 2006 at 7:39 am
It all looks really nice, but it’s just not working here its getting me crazy, i’m trying for three hours already, in all kinds of ways, but my mail keeps ignoring the pictures. First used normal img tag, than it says an ? questionmark, whist if i open the .webarchive file in safari it just all works. Now it put it in css but doesnt do anything either.
this is my code
#sig { width:400px;
height:100px;
background-image:url(http://www.studiowij.nl/signature/sig-timo.jpg);}
get me crazy.
Aug 10th, 2006 at 7:41 am
well and then a div tag ofcourse that opens an closes and the style tags but this thing seems to ignore my tags for some reason. So, well it just works in any browser my piece of html, but not in mail. doesnt get my picture
Aug 10th, 2006 at 3:41 pm
To avoid all these image problems, I used the image-to-HTML table converter at http://www.ascii-generator.com/. Set the cell size and width to 1px and you’ve got yourself a good reproduction of your image. Since it’s only a 24px image it’s not completely unwieldy either.
Aug 19th, 2006 at 9:38 am
Hello, very useful tutorial!
Any Outlook 2002 users ou there?
I’ve used Outlook 2002 to place this in my Signature – but it seems to attach the linked image files for me (which I don’t want!). The linked image file (my Avatar) therefore doesn’t update when changed on my server as it’s also attached to the mail.
There doesn’t seem to be any further settings for HTML mail I can tinker with in Outlook 2002 – am I scuppered?
Regards,
Pete
Aug 19th, 2006 at 10:01 am
Scratch my last comment – after half an hour of wrestling with Outlook I have found the checkbox I have been looking for – problem solved!
Aug 21st, 2006 at 8:34 pm
Great Article! Just what I was looknig for… Thanks!
Aug 23rd, 2006 at 1:47 am
Great tutorial, Melvin. Thanks. I’ve created the signature. Only one slight problem. D’ye know where I can find the webarchive files for signatures and the Signatures folder in Panther, rather than Tiger?
Aug 28th, 2006 at 8:26 am
I’m afraid the images are still not showing up for me. What else could it be?
Sep 1st, 2006 at 12:34 am
Great sig – thanks !
Sep 8th, 2006 at 8:21 am
Love the sig and would really like to use it too. Windows user here with Outlook 2003 (flame me if you must). I would love to use this at my company but when I use my larger logo, the first line of text is on the right as it should be and the second line goes under the logo. Viewing the html file with a web browser displays the sig properly. Any thoughts on how to get the text to properly flow out to the right? Screenshot and code–http://www.flickr.com/photos/41908322@N00/237715836/
Thanks
Sep 16th, 2006 at 8:41 am
I’m having the same issue as Wes and a couple of others. I’m trying to add just a small JPG of my logo with a hyperlink to my website. It shows up fine in Mail signature preferences (the link even works from within prefs), but when I compose a message, all I get is the little blue question mark box. I’ve sent email with the sig to myself several times, but it doesn’t seem to cache as others have reported. Would love to figure this out…
Sep 16th, 2006 at 5:18 pm
Awesome tip!
Sep 19th, 2006 at 11:17 am
Help! I just tried it and all was good until step 5, activating it. I’m not getting the option to select it as my main sig. Would this perhaps be another ‘isn’t working yet in mac book pro” I wonder? If anyone has a solution (or knows where I”m going wrong) please let me know.
Sep 25th, 2006 at 1:33 am
I have tried the pre-done files you posted several times and it keeps comming up with a blue square with a questionmark, it will not display the images (the text and links work fine though.. All i want to have it my xboxlive gamertag in the sig, so its dynamically updated from the server, can anyone help?? im not cluey on CSS or HTML or anything but I am following instructions – im running Tiger too..
Thanks
Sep 26th, 2006 at 9:11 pm
This worked beautifully for me. However, I can not seem to figure out how to state the image path to correctly reference an image. All my photos are on my web directory in an image folder. Any advice? I referenced as http://domain.com and left out the www but it still did not work…
Thanks much!
Oct 24th, 2006 at 5:47 pm
I tried this and didn’t get beyond making the html file. I can code a bit–a link, ital and bold, basically, but my TextEdit file didn’t read as html when I dropped it into Safari. Is there an easier way to do this? All I want to do is to include an RSS icon and “subscribe now” button for my blog in my emails, and Apple is making that impossible!
Nov 8th, 2006 at 9:45 am
I do not have a folder with sigs….I have a Signatures.plist……Do I need a newer version of Mail? If I cannot get it, is there a way?
Nov 19th, 2006 at 7:50 am
Markus
It was quite useful reading, found some interesting details about this topic. Thanks.
Nov 20th, 2006 at 11:17 am
Thank you for doing this, very very helpful stuff, and it worked like a charm =)
Adam
Nov 21st, 2006 at 8:26 pm
This is very cool indeed and exactly what I want to do with my email signature. However, as I am only running OSX 10.3.9 my Safari does not have the ability to save a web archive (though perhaps Firefox’s “Save Page As > Web Page, complete” does the same thing?) and my Mail does not have a Folder called Signatures. IT only has a file called Signatures.plist.
Is there any way to do a css-driven signature in Mail 1.3.11?
Many thanks. Even if I can’t use my lovely html signature file right away this info has been very interesting.
Fin
Nov 30th, 2006 at 1:46 pm
DID ANYONE FIND THE SOLUTION FOR THE DREADED BLUE QUESTION MARK? I find it frustrating as others why in the preview signature window you see everything, but in the actual mail message you see nothing.
This is the opposite issue that is mentioned in the tutorial so must be a simple fix…….
Dec 6th, 2006 at 8:53 am
hey chris, you have to put the image file on a server, and then you have to point to it in your html file. hope that helps.
Dec 7th, 2006 at 1:15 pm
Nutica thanks. I actually found out the problem was that the html code I had it in was not simple enough. So even though the images were online the code did not work in the exact email message.
The key is to ensure everything is between the two codes t. The author explains this but to new guys like me did not exactly understand it till I saw it black and white….
The only issue I have now is that a Skype status widget that I included in mine always shows my status as online no matter what. But that has nothing related with this code.
Thanks again.
…….
Of course use your own ref image and change the email address and lins
Dec 15th, 2006 at 9:49 pm
I’ve got Mail 2.1 on Tiger 10.4.8 and my new inline signature webarchive file created. Mail sees the HTML and views it correctly from the preview box in the preferences.
But my new compose messages aren’t showing the sig. I’ve got another text-only sig that I can switch to, and it displays. I go back to the new HTML sig and nothing.
I’ve got some plugins running (MailTags, Mail Act-On, DockStar, Mail.appetizer). Could this be why?
Dec 18th, 2006 at 9:29 am
Rob,
Have you sent yourself an email yet? After a lot of playing around I found it is a good thing if you can’t see the signature in the Preview but when you send it it works. I think it has something to do when you send the mail it than connects to the internet the rest of the time it being an archive file is offline.
You can send me an email at ceo@oeveo.com and I will let you know. I can reply back with an email to see mine work.
Dec 21st, 2006 at 1:46 am
Great!!!! really good!
Dec 23rd, 2006 at 11:17 pm
I was able to get the example signature working – which is great, but I was wondering if anyone was able to get the Feedburner signature to work in their signature picker? I was able to get it to work very briefly once but it stopped working and I have no idea what I’m doing wrong. Any help is appreciated!
Thanks
Jan 6th, 2007 at 10:31 pm
Solution to image not displaying in Draft View:
1. Open Preferences and go to “Viewing”
2. Deselect “Display remote images in HTML messages”
3. Quit Mail
4. Restart Mail
5. Reselect “Display remote images in HTML messages”
6. Quit Mail
7. Restart Mail
With the preferences reset your image should now appear in Draft View. At least my did.
Jan 9th, 2007 at 2:31 am
Thanks so much it is brilliant works fine the updated version i am using.
Got to hand it to you works a treat !!
Been able to do this in the PC using Dreamweaver for the layout etc but that was not in CSS.
Tested on the PC to see if it renders – It does! :P
Jan 11th, 2007 at 3:40 am
Hi,
Thanks for the guidance. Everything works fine except the logo inclusion for Outlook recepients.
When I sent mail to myself on Mac it works fine, but when I send the mail signture to an Outlook recepient, the logo is not shown in signature (all the rest is shown).
My image size is 30×30 and is published on the web with addres inserted in html file. Could size be a problem?
Thanks,
Mario
Jan 12th, 2007 at 1:10 am
Well, I have to say this was the most useful blog post I’ve ever seen. Acute Excessive Superlative Disorder (AESD) aside, I thank you for so cleverly solving this problem for me. Now I get to put my spiffy Feedburner animated headline signatures in mac Mail.app!
Jan 12th, 2007 at 3:04 am
Can someone help me out ?
During the changes with the logo problem, I changed the previous installed mail signature and from now on when I send a mail with attachments (everything looks great before sending), the receiver sees no mail signature anymore as should be but receives it in an attachment and in a simpe format (just text and hypertext).
Thanks for help……getting crazy searching here….
Jan 12th, 2007 at 2:47 pm
It seems that if my attachments are below my nicely made signature everything works out. If I put them before the signature, everything gets scrambled as informed before.
It is very strange to me…Anyone hints for me?
It’ll be too sad and bad to not use this great mail signature!!!
Jan 13th, 2007 at 11:12 am
Mar, is it to every email address or just some. I find that certain friends of mine have trouble reading it based on their program while others have no problems.
If you want send me an email with and without attachments and I can tell you what I see.
ceo@oeveo.com
Chris
Jan 13th, 2007 at 1:46 pm
hi, thank you for this great tutorial, I have succesfully created a signature in the likes of your own, I’m wondering if there’s a way to limit the ‘dotted’ top and bottom border to the limits of my signature text. I would greatly appreciate if anyone could have a suggestion. Thanks :)
Jan 21st, 2007 at 6:09 pm
Your little CSS signature works great! However, I do not see my image in my compose window–it show as a broken link. It DOES come in on teh email I receive in my inbox when I send it to myself. However it always comes into my junk mailbox. Have you found that to be a problem in MAc Mail?
Jan 22nd, 2007 at 9:03 pm
I’m having the exact same problem as Paul…!
First of all I must say that I have successfully managed to include HTML signatures in Apple Mail before, without any graphics though…! Now I was trying to implement FeedBurner’s “Headline Animator” and I thought it wouldn’t be much of a hassle…well, I was wrong…
Actually it worked all the way it should and I created the signature and it is being included in newly composed mail messages — only the graphic doesn’t show up…!? Instead I have that little blue stamp with the question mark, as if it couldn’t find the image…!?
When I move the mouse over there it does show the link though and when I click on it, it takes me to my RSS reader to subscribe to the feed…! It just won’t show that damn image…!
When I open the .webarchive of the sig in a web browser it shows just fine…just not in Mail…!? And also — just as Paul noticed — it does show up on the recipient’s side, which is okay…but I’d still like to see it myself when it’s included in a message…! Any ideas or suggestions…?! Thanks in advance…!
Jan 22nd, 2007 at 9:24 pm
Uhm, well…it seems like my long comment was pointless…!? Actually after sending a few mails back and forth it showed up all of a sudden…!! Weird…
Anyway, now it is being displayed just fine — in the signatures list as well as in the actual message…and (most important) on the recipient’s side…! Cool…! :)
Feb 2nd, 2007 at 2:17 am
MILE, could you please send me an email with that kind of sig? You know my address. ;)
Feb 6th, 2007 at 3:07 am
Hi there…..
this tutorial is great and works fine….. untill you send attached file to mail….
Does anyone have an idea why the signature pic does not appear any more ?
Thanks in advance… :)
Feb 6th, 2007 at 3:30 am
Crackin tutorial, got my Mail sig all HTML’d up, thanks very much :)
Feb 7th, 2007 at 4:49 am
Thank you so much Melvin.
Feb 9th, 2007 at 11:07 pm
Hi guys, I thought I should let you know that I’ve just written a short article about how I make use of this in my mail message and not just signature. Once again, thanks Melvin.
Feb 11th, 2007 at 4:51 am
Thanks melvin! This is the best mail addition I’ve seen yet!
Feb 14th, 2007 at 1:53 pm
with larger images, i found that the image didn’t appear. using a data:URI generator fixed this for me. not certain why that would be, but it’s an easy fix.
Feb 18th, 2007 at 11:01 am
Hmm, been trying to get this working ALL afternoon- getting a small image to display was providing impossible. I thought I’d cracked it (having used data:URI at xurizemon’s suggestion) as everything looked rosey on Mac.
Alas Outlook just displays a missing image X (which is fugly) and doesn’t offer the option to ‘view images.’ Gmail doesn’t render the image either – but at least it doesn’t replace it with a missing image icon.
I am guessing the problem lies in ‘embedding the image’ with data:URL. What are other’s experiences of sending between Macs and PCs? And can I confirm that folk are trouble free sending HTML emails with embedded jpg images from Macs to PCs?
Feb 19th, 2007 at 11:45 am
Great tutorial! The instructions were crystal clear and all worked like a charm. Thank you so much!
Feb 21st, 2007 at 3:44 pm
This was amazing. Thank you. I managed to do it all in apple mail. And love it.
But just today (5 days after insalling the Feedburner Headline animator) my email suddenly started being classified as “Known Spam” and being swept straight into everyone’s spam folders when i sent them an email. When I removed the signature (the feedburn animator) the email once again went into inboxes just fine and was no longer spam.
So it seem the feedburner headline animator is making my email come as spam… have you heard of this issue? had anyone else experience this? is there a solution?
thanks so much
Feb 26th, 2007 at 7:51 am
Melvin, I followed your instructions and your CCS solution worked smoothly from Mail to Mail, though when I send a message to someone using Outlook (either old and new versions) it fails to exhibit the both the formatting and the GIF. In other words, Outlook aparently recognizes the signature as simple text. Can I do something to allow Windows users to preview the signature as it’s intended to be? Thanks!
Mar 1st, 2007 at 10:24 am
The images on my sig are not showing up on the draft or on my recipients emails. I just get that little blue box with a ? in the middle. I am able to view the web archive just fine when i open it in a safari, and the sig shows up fine in the preview. Do i have to save the image to a server and point to it? I thought saving the web archive was all i had to do.
thanks
Mar 4th, 2007 at 3:49 am
Thanks Melvin, works a treat!
Mar 6th, 2007 at 7:20 am
Thank You it works great!
Emile de Cock (Amsterdam)
Mar 10th, 2007 at 3:14 am
So easy when you know how. Thanks.
Mar 15th, 2007 at 3:14 am
Great tutorial, thanks!
But I would prefer to attach my images to the mail, is this possible ?
Mar 19th, 2007 at 1:33 pm
Blair,
I got it working with my Feedburner email signature. I am not sure about posting sample code here, but you can find me on http://www.xero.net. I would be happy to provide you with the code that worked for me.
Mar 20th, 2007 at 3:37 pm
I am having the same prob as Vinh …no image showing up…just updated to 10.4.9…someone help..i used dreamweaver to layout to sig…everything looks great jsut no pic..I even used css to have the pic as a background image in a div with a link to my site on it..the link works fine…no image. HELP..i am doing this for everyone in my co….HELPPPPPPPPP
Apr 6th, 2007 at 7:08 am
Hi Melvin, I used this method a few months back and it worked perfectly!
–roadbump–
Just last night I decided to update my old “allforces-ized” sigs (I had two using your method) and tried to put up new versions. I intentionally deleted my webarchive file from the library/mail/signatures/ folder. Now when I follow the instructions again I cannot get mail to create a new webarchive file in this folder. The plain text file works. I feel like I’m missing a basic step. Any ideas?
I really love these sigs and can’t figure out why it is not working.
Julian
Apr 7th, 2007 at 1:35 pm
@emile
to attach the image using a Data: URI, you need embed the actual image into the URI. Google for “Data:URI Generator” or try the one at http://www.sveinbjorn.org/dataurlmaker.
Cheers. View source on this comment (search for the words ‘red blue green’ to find this comment) and look at the image below … if it appears in this post!)
Apr 7th, 2007 at 1:36 pm
No … It didn’t appear. Scratch that, just follow that link and try it instead :)
Apr 10th, 2007 at 12:29 pm
Hey all you fellow Outlook sufferers,
I discovered a workaround that lets your CSS signatures work in Outlook (2003 anyway which is all I have right now)!
Outlook strips out style tags from the head block when it renders in an email. But if you put your style tags in the body (e.g. right below the body tag) OR use style attributes inside HTML elements (which you’d have to do for body styles), it works like a charm!
Hope it does for you,
Ben
Apr 10th, 2007 at 12:32 pm
P.S. – It seems there may be some formatting issues in the CSS signature when composing an email in Outlook (in my case I created a business-card appearance for my sig and it had extra vertical space at the bottom of my card), but the recipient sees it correctly. (Or I did when I sent it to myself.)
Go figure.
Ben
Apr 12th, 2007 at 6:48 am
Hi there. First off, love the article. Melvin, or anyone, could you please help me with something? I have been trying and trying for countless hours to get my html emails to work but to no avail. I have copied your sample sig that was made to work in gmail, and I have tried everything and it still just displays as plain text. Other people seem to have made it work so that’s why I’m asking for help here. Can anybody help me display the sig that Melvin provided in Gmail?
Thanks,
Jon
Apr 19th, 2007 at 6:16 pm
Melvin. I did the exercise and it worked. However when I sent mail to a Windows machine, in Outlook the signature is missing if I add any attachment. I sent a test pdf along with my email and my signature arrives as a second attachement. If I do not send attachemnts it works fine. Have you seen this before? Any help would be wonderful!!
Apr 25th, 2007 at 5:01 pm
Hi,
I’m having a little trouble with my logo. I can manage a jpeg but I would like it in Html so you can link straight to my website when you click on it. I’ve been playing around for a while and tried a few different methods and am very confused now! I’m using mail on a mac osx 10.3.9. Can you help!? i’ve been through the steps above but its set up slighty differently and I couldn’t find a signature folder in my library??
Cheers
Claire :-)
Apr 30th, 2007 at 6:50 am
Hi
Apologies if the answer is in the blog somewhere but does this work in Entourage and if so how? Am complete novice at this stuff too so clear and easy instructions would really help. Thanks – the results I’ve seen look great btw.
Apr 30th, 2007 at 12:51 pm
Im a designer with a client who wants an image in thier signature – this tutorial seems like a good solution, but I have serious concerns about two things:
1. Won’t the fact that there’s an image (whether its embedded as an attachment OR as an external reference) make my client’s emails likley to be redirected thanks to today’s ever-so-sensitive Junkmail filters?
2. How will this display to people who receive and view emails in plain-text mode only? (and how common is this?) I’m worried that all the HTML will show, making the email look very UNproffesional, which isn’t exactly their goal….
input would be greatly appreciated!
May 21st, 2007 at 9:11 am
Great jobs done here!
For those who are looking for an answer about the blue question mark:
In this case the logo is referenced to an external host. you can put it on your webserver and the recipients will fetch it every time they read your mails
you can put it INLINE
look for the beginning
May 22nd, 2007 at 9:25 pm
Hi ! I had my signature working fine and then had to delete it and do a new one – when I did this it now will not allow me the option to choose signature and the signature appears as none in all my emails – it is on my signature preferences page but the choose me file is grey !!!! Heeeeeeeeelp ! I dont know why it has done this ! I did delete the only 1 signature I had and then had to add a whole new one ?
Thank-You for any help !
Cheers,
Donna.
May 25th, 2007 at 1:09 am
back to the old 10.3.9 question again, is there a way of getting my signature from dreamweaver into the plist folder that mail has on 10.3.9 and to work in e-mails?
i see that many people on here have asked but cannot see an answer, (at least nobody said “no it can’t be done”)
TIA
Jun 1st, 2007 at 3:43 am
Thanks dude! It works fine!
Jun 1st, 2007 at 6:06 pm
Hi Melvin
I’m not very good at this. I get the skill with which you’ve figured this out, but, I can’t figure out (’probably because I’m a bit thick). Where does my image I want to put in reside? on my ISP server or on my desktop?
Regards
dave
Jun 1st, 2007 at 9:14 pm
Hey Dude!
SUPER COOL that you showed us how to do this :0
For the revised CSS sample, is there away to add a HOVER COLOR? If so, how? what is the code for that because it’s not included in the revised sample.
Let me know please.
-Joey
Jun 4th, 2007 at 9:54 am
Just wondering, is there anyway I can send an email with the background being one of my pictures so that when a client ccclicks on the picture it goes straight to my website?
Jun 6th, 2007 at 11:48 am
Tried this method of getting an image into my signature and it worked nicely.
However, a lot of my contacts (recipients of my emails) have complained that their various pop-up blockers intervene on receipt. For people who know me this isn’t a disaster but for new clients and so on it is.
So I had a thought. Since Windows/Outlook users see inline images as an attachment, is there a way to use the CSS suggested but instead of going out to a server somewhere to retrieve the embedded image (http:etc etc), might there be a way to retrieve the image called from the CSS, from an attachment?
In other words could Melvin’s CSS workaround pull the image from an email attachment instead of my web server?
THANKS!
Jun 17th, 2007 at 1:37 am
Worked great for me even I couldn’t get the image on the left side (truly no clue where I went wrong) but I just put it under, small animated icon and it looks good!
Thanks a lot!
Jun 30th, 2007 at 1:19 am
Hi GUys,
OK so I put the .webarchive file in my signatures folder but when i open mail and go to preferences-signatures nothing shows up. Its like mail didnt recognise it? So i thought I must have fucked up the code so I downloaded the exact example used here and my mail app still wont recognize it even though i saved it out as a webarchive file and put it in the signatures folder..
Anyone have any idea what I could have done wrong?
Jul 2nd, 2007 at 8:02 am
You are a star, thanks.
Took a bit of fiddling to get it how I wanted it to view but I’m pleased non the less!!!
: )
Jul 5th, 2007 at 2:06 pm
This was so helpful. Thank you for taking the time to put together such a thorough tutorial. I never would have figured it out without your help. Merci beaucoup!
Jul 16th, 2007 at 2:20 pm
This workaround was great, and quick. I’ve gotten a lot of people at my org to use our feedburner image, which is fabulous. Thanks!
However, some computers in my org are woefully out of date (as in, using Mail 1.3.11 – using the .plist file instead of a .webarchive file) and I can’t figure out a workaround for them. Any ideas?
Jul 17th, 2007 at 3:23 am
Hi I need some help, as it does not give me the option in the drop down menu saying “main signature” what should i do to correct this.
Thanks
Mandy
Jul 18th, 2007 at 5:41 am
Hi!
I’ve done and it is ok! But it dont work when I include any attachment in my message……do u have any idea why??
thanks a lot
regards
Marcos
Jul 19th, 2007 at 11:12 pm
Hi,
thanks for this tip.
It seems to be working fine for me…. except for the IMAGE.
For whatever reason, (I’m not a CSS master, not a real developer either), my image appears as a “Question Mark Icon” in my signature.
It was the feedburner animated gif that I wanted to add.
I wrote :
This works fine on Safari, but not in Mail.
Any idea?
TIA
Pierre
Jul 29th, 2007 at 7:46 pm
pierre, try sending yourself a test message and see
for me, when i write the email it displays that graphic, but the graphic appears when it arrives
from memory, if i’ve viewed an email containing the graphic, it will also appear when i later compose a new message. perhaps it’s a graphics cache issue in mail.app or something.
Aug 10th, 2007 at 11:49 pm
Thanks a thousand times!!!!
Sep 3rd, 2007 at 9:23 pm
Gr8 work, Buddy.
Sep 4th, 2007 at 8:54 am
Thanks Melvin, it works like a charm. Great job on the tutorial.
P.S. Any one who has a question mark icon instead of graphic, make sure that your message format is Rich Text (Mail > Preferences > Composing) and Display remote images in HTML images (Mail > Preference > Viewing).
Sep 13th, 2007 at 4:34 am
I remembered seeing this awhile back. So glad I’ve found it!
Sep 26th, 2007 at 3:17 am
hi there.
i’ve just installed it on like 10 macs, but on number 11 the images won’t work. Tried the “show html-images off / restart mail / html-images on / restart mail” fix, but that won’t work either. Any tips?
J.
Oct 8th, 2007 at 3:33 pm
Hi, this is great, but I noticed several have asked about the problem of saving the TextEdit file as html and it still showing up as code rather than what the sig should look like when drug into Safari. I’m having the same problem. Got a solution for us?
Oct 16th, 2007 at 4:46 am
WOW!! Very cool!!
Can I put
in the html sign?
Thanks
Oct 19th, 2007 at 3:39 am
I’m having the proble that others are.. html signature shows up in the preferneces window but I only get a blue question mark whne I compose please help.
Oct 28th, 2007 at 8:16 pm
I am a absolute novice and I used TextEdit with mac book pro, it did not work for me. I downloaded CreaText, open a new blank document because it has a formulated html header and footer. I then inserted “revised sample file” from you and view your source code and place it in the body and made changes to the code to suit.
You have taught me something today. It worked, many thanks… 3 hours of researching from the web.
Thanks
Nov 1st, 2007 at 2:19 am
Same problem as Evin – I put the .webarchive file in my signatures folder but when i open mail and go to preferences-signatures nothing shows up. Its like mail didnt recognise it? there wasn’t a .webarchive file to replace is this the problem? it didn’t seem to make a file when i made a new sig#
Anyone have any idea what I could have done wrong?
Nov 6th, 2007 at 8:21 pm
Thanks for this tip – works perfectly!
Nov 9th, 2007 at 5:28 pm
[...] to create attractive (and functional) CSS email signatures in Apple Mail. Finally I can settle on a signature format for business email. [...]
Nov 19th, 2007 at 3:03 pm
Excellent tip. Thanks!
Nov 19th, 2007 at 6:18 pm
[...] Custom CSS Signatures in Mail – All Forces One of my holy grails: a way to insert live HTML into an OS X Mail.app signature. Takes a while, but nothing’s especially hard to do. (tags: mail.app osx macintosh apple email signature html css graphics) [...]
Nov 23rd, 2007 at 6:01 am
The Signature I created works fine but is not toaly alligned to the left side of the. Any Ideas why that may be? Sorry cannot post the sig here as it is a company sig but could send it anytime.
Cheers Robert
Nov 27th, 2007 at 7:38 am
This is great, thanks for the simple explanation! At first I also received the dreaded “blue question mark box” but after sending an email to myself the signature image works fine now. I’m off to create more of these for my various email accounts. Thanks so much!!
Nov 29th, 2007 at 12:35 pm
sample of how you can personalize your letters AND CREATE A FREE SINATURE LABEL
Dec 4th, 2007 at 12:43 pm
[...] Eine CSS-Signatur in Mail.App einzubauen, ist nicht so einfach, kann aber manchmal ganz nützlich sein. So bietet Feedburner z.B. unter Publicize/ Headline Animator eine Signatur wie die Obige an. Wie sich das realisieren lässt, zeigt anschaulich AllForces. [...]
Jan 4th, 2008 at 11:51 am
Everything is working great until I open the signature in the mail pain. The image will not show. I am getting a question mark in a blue box. It works in my signature folder on my hard drive though. Any thoughts?
Thanks
Jan 21st, 2008 at 2:51 pm
Here’s a script for the Greasemonkey Firefox add-on that allows you to use several HTML signatures in gmail:
http://userscripts.org/scripts/show/20887
Feb 2nd, 2008 at 11:34 am
Hi there. Did mine, the webarchive shows up fine in Safari. Only the html text shows up, and blah works, but nothing else. No image, not even the font choice.
Any ideas?
Feb 4th, 2008 at 5:36 pm
great little snip for making an e-mail more professional. quick question though, in your initial version you had it so that your clickable text had over and visited states, can that still be done in your revised version? If so where would you place the code to do so? Also After my image i only have oneline of text and want it to stay centered with the image. Trying align = center didn’t seem to work. Thanks for the info and tutorial yo.
Feb 7th, 2008 at 10:20 pm
The image is not showing. I even tried your sig. The text is there but no image. Both in Mail and Hotmail. I can see it in Safari of course.
When I compose there’s a question mark.
Jules
Feb 8th, 2008 at 10:21 am
It sounds like a lot of people are having a bit of confusion with their images not working when they view them in Mail’s Signatures Preferences pane. Don’t be alarmed, external images will never be displayed in Preferences. The only real test is to just compose an actual e-mail with the signature.
It must be remembered that you have to put your image on an actual web server. Linking to an image on your harddrive will never work.
Also, some of the people you e-mail might only receive plain text e-mails (on their BlackBerry, for instance). It is helpful to preview your signature in plain text. To do this, select and e-mail with your signature in it, and press Command + Option + U. This opens the source of the e-mail and, after scrolling down below all of the headers, you will see the plain text version of your e-mail.
Thanks Melvin for this great article. You inspired me to write a few HTML signatures tips of my own.
Feb 10th, 2008 at 3:39 am
My bad. I had to send the mail as html formatted for the picture to work. My Mail was set to plain text e-mails.
New problem: When sending an attachment to a hotmail account the signature acts as and attachment called ATT00001.html. Why is that?
Feb 22nd, 2008 at 4:21 am
I think this CSS signature is the shité – but my business partner uses Entourage … any suggestions? (Apart from the obvious) How can we get this css to work in Entourage?)
Feb 26th, 2008 at 2:22 pm
thanks a ton for this, i guess i’ll put this too really good use.
is this just me or does outlook not show base64 images? whatever i try, they don’t show up – any idead what that might be?
Feb 28th, 2008 at 5:43 pm
Hi….I really really want to get this to work, simply to add the image of my handwritten signature, but the download link of the source code will not work for me. I started to type it from scratch based on the picture, but then realized the note you wrote after about compatibility with Gmail. Could you perhaps send me the updated code?
I really like your picture being in the type right hand corner, how do you do that?
My picture is in my address book, but I don’t understand how to get it to show up in mail. Does it require a .Mac subscription?
Also….how do you have your fm account showing in the side bar of your site?
Mar 1st, 2008 at 4:34 am
Ok, turns out the problem was that I’m dumb. Still a problem, but I figured the signature out. Thanks so much for your time and your post! This makes me such a happy person
I also believe I figured out fm and read an article that I do indeed need a .mac account in order to get my photo in the header…..
but is there anyway I can group my own threads in applemail? When it does it automatically, sometimes not all the messages alike are grouped together. If you have any insight on this, I would be very appreciative.
Mar 5th, 2008 at 8:13 am
LEOPARD ONLY: Once you edit the link. Open it in Safari. Copy and paste it into a blank signature.
I DID NOT have to save it in home folder > Library > Mail > Signatures.
Mar 11th, 2008 at 4:00 pm
[...] Custom CSS signature – http://allforces.com/2006/04/14/css-signatures/ [...]
Mar 12th, 2008 at 12:02 pm
You “shouldn’t” attach an image in your signature? Says who? There’s no semantic reason not to, and it has the distinct advantage that if the recipient chooses to archive the message and come back to it one day when you’ve changed server host, or when you’ve deleted the relevant images from your domain, or when your server has crashed, they’re still going to see the mail as intended without having to rely on your server.
As for using divs – not a good idea. They break in a lot of email clients. They only technique that works reliably across the board is the use of single cell tables. And support for css as you’ve described it is woeful. You need to include ALL css inline, not within style tags, since lots of email services and email clients strip out anything in style tags.
Mar 14th, 2008 at 8:06 pm
You are a GOD!
Mar 21st, 2008 at 12:31 pm
To all the people only seeing code when you drag the file into Safari, the problem that you are having is that when you paste the copied code into a text program such as TextEdit the symbols are converted to the html code for those symbols. For example “<” becomes “<”. So Safari only sees text, not html code and that is why only the code shows. To bypass the problem you could type the code in by hand or try just retype the symbols. I pasted the copied code into Dreamweaver to make the html file and had no problems.
Apr 7th, 2008 at 12:45 am
This is great! Down with boring text signatures!
Apr 7th, 2008 at 2:02 pm
This works prefectly. It’s a bit tricky and you must follow the instructions to the letter. I can now publish a feedburner blog feed widget in my signature. It looks class.
Apr 10th, 2008 at 4:18 pm
Finally worked out the blue question mark problem.
It was very simple… enable rich formating text. And thats it!!!!
Thank you all guys!
Apr 16th, 2008 at 3:22 am
I got this to work as desired, with a FeedBurner Headline Animator (very cool). However, two important aspect for us non-coders to consider.
I’m grateful to Joy (21 May 2006) for providing the main HTML/CSS text (i.e. starting <style media… ). The original instructions don’t provide them nor any reference as to how to get them.
I’m also grateful for Mark Cunningham’s comment (21 March 2008) about trying to use TextEdit as an html editor. I did save my files as .html, as instructed, but Safari just wouldn’t show the desired results. I went over to CREA:TEXT (http://creatext.sourceforge.net/) for a free download of an OS X friendly html editor.
After an hour’s work customising my signature (phew!), I’m there and ultimately grateful to Melvin Rivera!
Apr 16th, 2008 at 10:41 pm
How do you do it i dont know how to do it.
Apr 19th, 2008 at 10:53 am
For people who are trying to use this with Outlook 2007, simply use the inline version, change the div to table, and add a tr and a td. Works like a charm, with a few tweaks.
Apr 28th, 2008 at 2:06 am
Great idea. I’ve found a nice website that provides templates like yours for free on http://www.izysign.com. I found some nice design ideas.
May 7th, 2008 at 8:16 am
[...] em HTML no Mail Encontrei um excelente tutorial que ensina como superar o que eu considero uma limitação do programa de email do OS X, a [...]
May 7th, 2008 at 10:23 am
EASY PEASY!!! NICE!!!! Thanks!!! Just made one myself.
May 10th, 2008 at 12:39 am
[...] Custom CSS Signatures in Mail (UPDATED) » All Forces – An easy guide on how to do CSS signatures referencing images on an outside server and not as an attachment. [...]
May 10th, 2008 at 11:37 am
so i figured out how to get the logo working but it seems to only link to my email address not my website, any ideas?
May 13th, 2008 at 7:28 am
Spam issues!!
Really impressed with the idea of such a stylish signature. All worked as expected following your instructions however having tested the email, when I use this signature my message ends up in the Gmail junk folder.
Here’s the signature : http://www.thebarn.co.uk/signatures/raffleit/pas_sig.html
There’s a couple of images and a few external links – anyone else experienced delivery problems using these signatures??
Cheers, Pascal
May 14th, 2008 at 2:34 pm
Works great, but I can’t get it to work right on an iPhone (the text is far to large)… anyone else having this issue or have any solutions? And I’m using ems.
Jun 2nd, 2008 at 8:14 am
In my case: I can only make it work with Thunderbird. Can’t make it display right with Mail. Something goes wrong when i replace the .webarchive. Also the data instead of the image URL only works if you have the img tag inside the signature. Great tutorial by the way!
Jun 7th, 2008 at 11:06 pm
[...] there is a solution, though quite a tedious one. Already people have written great stuff on it like All Forces, Paradigm Reborn and Gathering in Light. I’ll summerize the [...]
Jun 18th, 2008 at 9:14 am
Tres cool dude. Thanks!
Jun 24th, 2008 at 5:03 pm
I can get it to work in safari, then I save it as a web object, and then replace it with the other one on the Signatures folder, then I open mail, and I can see it correctly, except for the image, it just doesnt show up, it does Not display that blue question mark, it just doesnt show up, it works great on safari, but not in mail.
I have checked the “Display images” on Mail, in fact, it work correctly with the autor signature on the link above, and yes, I also have sent myself the email, but it doesn’t work.
Can someone help me please?
Jul 3rd, 2008 at 5:45 am
I had the same problem as you did MEMO. Test your email sig by sending yourself an email with it attahed. You’ll see the images. I have discovered that once they are linked with absolute links, they don’t always show in the preferences window. The text does but not all the images. Test it and you may find you already have the thing fixed!
Hope that helps!
Jul 3rd, 2008 at 6:05 am
I have made my code, but it doesn’t look right when opened in safari..help!!!!
Shari Simpson: Business Development at iWidgetscontact | shari@iwidgets.com – 847-512-7651 | Skype – shari_simpson | Fax: 574-822-4208
What did I do wrong?
Jul 3rd, 2008 at 6:08 am
So I just posted above and it showed my signature fine…but in safari it just shows as code
Jul 12th, 2008 at 10:31 pm
[...] Custom CSS Signatures in Mail (UPDATED) » All Forces Vil du gerne have HTML signatur og bruger du Apples Mail (mail.app) så skal du kigge på denne vejledning. Den skal følges helt præcist og det tager lidt tid, men det kan lade sig gøre. (tags: css email signature mail mac apple osx) [...]
Jul 20th, 2008 at 10:28 am
[...] there is a solution, though quite a tedious one. Already people have written great stuff on it like All Forces, Paradigm Reborn and Gathering in Light. I’ll summerize the [...]
Jul 22nd, 2008 at 2:00 pm
gMail strips the logo out in the web client and leasves a dotted box see http://bit.ly/1cJ2bC. However, Mail.app show it fine. God knows on Windows clients.
Anybody know why the box on Safari gMail client?
Jul 30th, 2008 at 10:45 am
WOW! Thanks so much for the tutorial!
Aug 6th, 2008 at 3:12 pm
This is great! One question though . . .
Sometimes, when I reply to a message, the sig is placed properly (the picture & text show up fine) but all of the formatting and CSS fails to displayed (no border, no hyperllinks, etc.).
Thought or ideas?
Aug 10th, 2008 at 12:06 am
Thanks Melvin,
This rocked like a 4th of July fire-cracker!
Aug 10th, 2008 at 11:25 pm
This tutorial is great – but does anyone know how to achieve the same thing in Microsoft Entourage on a Mac?
I’m fine with all steps above until I get to step 5 and then I’m stuck!
Cheers!
Aug 12th, 2008 at 2:34 pm
Thanks so much for this.
Great tutorial…with GREAT results.
Aug 14th, 2008 at 12:22 pm
It works perfectly, thanks. :)
Aug 18th, 2008 at 11:21 am
Simply brilliant. ♥
Aug 18th, 2008 at 12:01 pm
It works amazing, but when I send it to a gmail, hotmail, and my website web account the signature goes back to being sort of plain and the image is lost. Is this normal?
Aug 18th, 2008 at 8:58 pm
[...] is the direct link to the instructions. Posted by christian Filed in Mac Related, [...]
Aug 20th, 2008 at 2:09 am
Nice Article! Iam now making one for myself. Thanks.
Aug 21st, 2008 at 11:03 am
That worked great thanks. How do I set my new signature to become the default every time i add an new one in. For example i might have different signatures for different client, i.e 20-30 different ones. When i hit add signature my name and e-mail will appear can this be my new signature which i have created.
Aug 26th, 2008 at 5:22 am
Thumbs up, it worked a treat. Thanks. To everyone who is battling to get it to work, simply follow the instructions to the letter.
Sep 5th, 2008 at 4:58 pm
Mark Cunningham’s comment on March 21 was the magic clue for me. TextEdit does not work for the reasons he stated. I used Dreamweaver, created a CSS layout and the signature now works like a charm! THANK YOU MARK!!
Sep 5th, 2008 at 11:59 pm
[...] http://allforces.com/2006/04/14/css-signatures/ [...]
Sep 6th, 2008 at 11:54 pm
Briliant tutorial. Thinkdave is absolutly right: you have to follow the instruction step by step, word for word and you’ll get it done. First i whent to it a bit freely, and skipped a step here and there, but then it doesn’t work right.
Thanks a lot for the clear instructions Melvin!
Sep 18th, 2008 at 10:22 am
[...] a fancy signature in [...]
Sep 19th, 2008 at 12:42 pm
[...] 1. Préparer la signature.2. Ouvrir ce code avec safari, puis l’enregistrer en tant que webarchive.3. Créer une signature zzzz sous mail. Quitter mail. Remplacer /users/xxxxxx/Library/Mail/Signature/zzzz.webarchive par le fichier créé en 2.4. Lancer mail & enjoy ! (source) [...]
Sep 22nd, 2008 at 2:18 pm
[...] you have any questions leave a comment and I’ll do my best to help out. Check out this article by Melvin Rivera for more info if you need. [...]
Sep 25th, 2008 at 2:26 am
Fantastic tutorial, VERY much appreciated and works a treat, thank you.
:)
Oct 1st, 2008 at 2:05 am
[...] Read the tutorial (by All Forces) October 1, 2008 | Filed Under Applications [...]
Oct 8th, 2008 at 1:04 pm
[...] Custom CSS Signatures in Mail (UPDATED)
Oct 9th, 2008 at 5:23 am
You rule!
Oct 9th, 2008 at 8:26 am
Nice tutorial. The only problem is when you send an email with any file as an attachment. It causes your signature to be an attachment as well for Outlook. This is a real pain.
Oct 10th, 2008 at 11:02 pm
[...] Custom CSS Signatures in Mail (UPDATED) " All Forces – How to include custom html + css signatures in Apple Mail. [...]
Oct 13th, 2008 at 9:01 am
Any ideas how that cool stuff could work for the most important PC clients as well? Thanks
Oct 17th, 2008 at 4:18 am
[...] detailed tutorial: Custom CSS Signatures in Mail Original post: Create HTML signatures for [...]
Oct 19th, 2008 at 11:33 am
Thanks for awesome tutorial
Oct 21st, 2008 at 11:39 pm
Hi, i did the same but it is showing a blue question mark instead of the picture,
can u pls help me what i am missing
thanks
Nov 1st, 2008 at 4:04 am
[...] Here’s a link to a site that explains how it’s supposed to work, but again, no dice for me: http://allforces.com/2006/04/14/css-signatures/ [...]
Nov 6th, 2008 at 4:01 am
[...] Custom CSS Signatures in Mail (UPDATED) » All Forces (tags: mail css tutorials) [...]
Nov 9th, 2008 at 9:39 am
[...] found this on Google. Google is good at finding things. Mac Mail CSS Signatures __________________ portfolio I [...]
Nov 13th, 2008 at 4:18 pm
It is not working 100% of the time for me…
Whenever I hit new it works 100%… but is intermittent when I hit reply to a message…sometimes it will work sometimes none of the CSS is rendered…
any clue?
Nov 17th, 2008 at 4:30 pm
[...] a imagem para dentro da área de edição de assinaturas no Mail ou tente decifrar o tutorial do All Forces Written by murilocardoso in: geek | Tags: mac, macbook, macintosh, macxpc, [...]
Nov 25th, 2008 at 11:08 pm
For those of you who follow the steps above but your logo disappears every time you send your email – make sure you are sending rich text emails and nt plain text. Plain text strips the image file.
It took me far too long to suss this one out (~_~)
Nov 28th, 2008 at 2:09 am
Thanks for this article Custom CSS Signatures in Mail
Just what i needed to create a good signature
Nov 28th, 2008 at 9:58 pm
Dude, THANK YOU for this – I shamelessly took your code and put togther a complete guide for rich apple mail signatures.
Check out my post http://www.paininthe.net/?p=292
I did give you heaps of kudos though!
Thanks again.
Dec 1st, 2008 at 3:06 pm
Perfect!
Thank you
Dec 9th, 2008 at 6:23 pm
I read almost all the comments and wonder if anyone tried using microsoft outlook 2003 to create this email sig. I tried and cannot avoid the attachment when I use an image stored in a server and the divs and css it is not retained because not matter what I do the html file does not get imported as an email signature file in outlook. Can someone help?; I been searching and trying every possible way and you know there some designers out there that need to deal with pc’s and microsoft to survive in their jobs; plus it would be nice that my boss notices how much effort I am taking to make my work outstanding.
Thank you
Maria
Dec 15th, 2008 at 5:10 pm
Voi la! Bravo! Very good tut, man! Thank you! I was almost crazy for this thing! Thank you again!
Dec 16th, 2008 at 3:28 pm
Thanks! Worked brilliantly! M!
Dec 17th, 2008 at 5:56 pm
[...] having found some great info here and here, I was still presented with the problem: When the HTML signature is rendered into plain [...]
Jan 12th, 2009 at 1:06 am
Hi!
The html works fine, and it’s awesome!
The picture though, does not show up.
How do I use my webarchive file WITH the picture in attachement?
If I just drag it, the signature gets messed up…
Any help is welcome!
Gr.
heinz
Jan 13th, 2009 at 2:33 pm
Thank you! Great article. :)
Jan 13th, 2009 at 5:55 pm
It shows up as an attachment, what did I do wrong?
Jan 18th, 2009 at 9:07 am
[...] have that ability of having a really nice signature. Here’s an example of what I would like to do: http://allforces.com/2006/04/14/css-signatures/ my best, [...]
Jan 21st, 2009 at 2:06 am
If one haves a html-signature already, you can open the file in safari, save as webarchive and go on as described above. just replace the existing mail-signature with the new webarchive and be sure to use the .webarchive suffix.
Michael
Jan 21st, 2009 at 9:02 am
[...] If you’re still excited, then read on. But be warned, depending on your level of geekiness, this process may or may not be easy for you. [Disclaimer: this tutorial is actually an improved version of this one] [...]
Jan 25th, 2009 at 8:33 am
great tip!!
do u know how this would work in thunderbird?
Jan 25th, 2009 at 9:01 am
hey! do you know how this would work in the “openmail” service?
Jan 28th, 2009 at 6:07 am
Is it possible that older versions of Apple Mail receive the image used in the html signature inline and as attachment?
Feb 10th, 2009 at 7:30 am
Hello,
I did every single thing you said, but it is not working as it should be.
everything works until “step 5″.
A little question mark shows up at the place where my signature should be standing in my e-mail…
Do you have any idea or do you know what’s wrong..?
Greetz
Feb 14th, 2009 at 9:32 am
Awesome Tutorial! Very easy to follow – just have to read everything carefully and go step by step! Works like a charm! Thank you!
Feb 16th, 2009 at 1:44 pm
[...] @andysowards: RT @Krftd CSS signature for Apple Mail http://allforces.com/2006/04/14/css-signatures/ « előző | következő » Tamas Bogdan — 2009. 02. 16. [...]
Feb 19th, 2009 at 11:59 pm
[...] 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/) [...]
Feb 27th, 2009 at 4:47 am
nice howto, thx a lot!
Mar 1st, 2009 at 11:39 pm
Awesome tute!!!
I tried this but the dotted lines don’t stretch across the page, any ideas?
IceCube
Apr 19th, 2008 at 10:53 am
For people who are trying to use this with Outlook 2007, simply use the inline version, change the div to table, and add a tr and a td. Works like a charm, with a few tweaks.
Mar 4th, 2009 at 11:25 am
Great resource, Melvin. You saved me hours of anguish. With gratitude, DH
Mar 4th, 2009 at 2:46 pm
Have to tell ya, it’s 2009 and this is still the best signature tutorial out there. I love it and use a modified version that has my pic, google maps to my address and linked to my Web site. So sweet.
Mar 8th, 2009 at 11:10 pm
Hello,
I did every single thing you said, but it is not working as it should be.
everything works until “step 5″.
A little question mark shows up at the place where my signature should be standing in my e-mail…
Do you have any idea or do you know what’s wrong..?
Greetz
Mar 10th, 2009 at 3:27 am
Great tutorial I hadn’t even thought to check what format the signatures are stored as. Simple and works a treat.
Mar 26th, 2009 at 5:06 am
hi milind – thanks for doing this! i’m having a problem (non-coder here). after everything is done and saved, when i open it in safari, it comes out as the code itself, and not the html image. when i paste the code in the html snippet of iweb, it works perfectly. you can see it here: http://web.mac.com/rjstarr/unity/sig.html any ideas? thank you – rj starr
Mar 26th, 2009 at 5:36 am
never mind – i figured out what i was doing wrong. thanks again for this awesome guide. peace & love & consciousness
Apr 2nd, 2009 at 5:46 am
Thanks! This tutorial is so great!
I used most of the tutorial but created the html and clickable image through Photoshop, after that I added text (name and number) in Dreamweaver.
I had a minor problem when my (a bit larger) jpeg was nog showing up in my mail signature, there was the very-well-know blue box with question mark.
My idea was that my apple and therefore the computers of people I might send mail could not find my jpeg, therefore I looked up how I could make a hyperlink to that jpeg on idisk.
(As I am a non-coder) I struggled myself through Dreamweaver again and added the hyperlink to the jpeg on my idisk.
That link looks like this: http://homepage.mac.com/UserName/.Pictures/filename.jpg
greetz,
Sure we can! greetz from Utrecht, Holland
Apr 6th, 2009 at 2:19 pm
This was so helpful. I’m really glad my husband made me learn html so I could just read your blog and make myself an awesome signature within minutes. So cool – thanks!
Apr 20th, 2009 at 10:37 am
Awesome. This was perfect. Thanks for the post.
Aaron
Apr 27th, 2009 at 4:59 am
Cool, I did have some problems updating it once I had installed it though – had to create a completely new sig! But otherwise worked a treat, thankyou!
Apr 27th, 2009 at 8:40 am
I use a MAC. I am starting a business and want to appear as proffessional as possible. I’d like to attach my logo to my emails.
I use Mac Mail.
When I send an email with my logo in the signature the logo gets striped and is shown as an attachment.
Do you have any suggestions how to fix this?
Kind regards,
Sam from London
May 1st, 2009 at 12:45 am
Sam … Hmmm … Not sure why you ask the question … this webpage is precisely instructions to just do what you ask.
Simply follow Melvin’s instructions and you’ll get what you want. Two critical notes:
1) You need to place your logo on a webserver
2) Once the logo is on the server, you need to insert the URL to that logo location into the code which Melvin proposes.
MELVIN … Big Ups mate … a BRILLIANT bt of code … as if you have not heard that enough times :)
R-
May 11th, 2009 at 3:12 pm
UPDATE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
You CANNOT use TextEdit to write an HTML file. At least not on a macbook running 10.5.6! Or an ibook running 10.4.11!
After hours of trying and looking for patchy solutions, I finally read Mark Cunningham’s post above and realised it was beacause I using TextEdit!!!!!
I thought they’d be a few disgruntled comments on here if the actual instructions were wrong!!! So I struggled and struggled, only to find I could do it in seconds when I used Text Wrangler instead!!!!
Ps. sig works perfectly on the macbook but I’m getting the blue question mark even when composing a message on the ibook. It does work when sent but….
Melvin, darling…..UPDATE!!!!!!!
Jun 9th, 2009 at 7:41 am
I had a signature for a while now because it is a great way of getting free traffic to your sites or getting new leads. But I have encountered the following problem. Having links or even pictures in the signature can sometimes make your email end up in the spam box on mail sites like yahoo or hotmail. So everybody be careful with this.
Nonetheless the presented method is wonderful, I never thought of styling my signature until I saw this post. Wonderful, thanks!