Creating custom Outlook stationery
I made some custom Outlook stationery with my new logo:
Making your own custom Outlook stationery is pretty easy if you know some basic HTML and CSS. All you have to do is make a really simple web page and move the .html and graphic files into a specific Documents and Settings folder. Here’s what I did:
1. Design a very basic tables-based web page.
The more basic, the better. Complex layouts might break depending on the email client the recipient uses. Some email clients aren’t very good with interpreting CSS, so you’ll want to go back to old-school tables instead of using fancy divs. My stationery basically has two one-cell tables — one with extra padding for the body of the email, and one to hold the footer info. (Put a paragraph tag inside the email body table cell to reserve some space for the actual email.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”10″>
<tr>
<td>
<p> </p>
</td>
</tr>
</table>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
<img src=”emailgraphic” width=”340″ height=”110″ border=”0″>
<!– you can substitute text here, instead, if you want a text footer… or a do a combination of text and images –>
</td>
</tr>
</table>
</body>
</html>
2. Apply CSS to style the email and table cells.
Basic CSS seems to work pretty well with emails, so I add some styles to the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style text=”text/css”>
body { background: #ececec; margin: 0px; padding: 0px; color: #000; font: 10pt Verdana, sans-serif; }
.address { background: #fff url(’emailbg.gif’) repeat-x top; font: 8pt Verdana, sans-serif; }
</style>
</head>
<body leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”10″>
<tr>
<td>
<p> </p>
</td>
</tr>
</table>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td class=”address”>
<img src=”emailgraphic” width=”340″ height=”110″ border=”0″>
<!– you can substitute text here, instead, if you want a text footer… or a do a combination of text and images –>
</td>
</tr>
</table>
</body>
</html>
My table cell now has a background graphic applied (to give the illusion of the shorter white strip) and some basic font and color properties defined.
For the record, these are what my two email graphics look like:
Main email graphic
Table cell background graphic
3. Add an inline style to the body tag.
Sometimes Outlook won’t recognize the body font that you’ve specified (I haven’t really tried to figure out why) and will use your default Outlook font instead. But adding an inline style to the body tag will usually fix this, if that bothers you:
<body style=”font: 10pt Verdana” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
4. Move files into Outlook stationery folder.
Now, move your HTML file and image files into your Outlook stationery folder. Mine is under C:\ Documents and Settings\ yourprofile\ Application Data\ Microsoft\ Stationery.
You might want to name the HTML file so that you can recognize it, as Outlook uses the file name as the “title” of the stationery.
5. Set up Outlook to use the stationery.
If you want to use this stationery as your default stationery, go to Tools > Options.
Click the Mail Format tab.
Click the Stationery Picker button and find your new stationery (by file name) in the list.
Or, use multiple stationery.
I have multiple stationery for different email accounts. You can go to Actions > New Mail Message Using… > More Stationery… which brings you to the Stationery picker. The cool thing is after picking your stationery this way, Outlook makes a shortcut in the New Mail Message Using… menu so that you can select it more easily.
