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!
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?