Here are some advanced HTML formatting tips to create beautifully styled signatures in Postbox! To get started, go to Options or Preferences / Composition / Signatures and click the Plus (+) button. Next, click on the code button, which looks like this: </>
Now we’re ready to enter our HTML, so let’s first create a simple signature, wrapped within the DIV tag:
<div> Sto Akron: Button Pusher at Postbox, Inc.<br> phone: 415-526-2339<br> web: www.postbox-inc.com<br> twitter: @postbox </div>
Sto Akron: Button Pusher at Postbox, Inc.
phone: 415-526-2339
web: www.postbox-inc.com
twitter: @postbox
Next, let’s add some links:
<div> Sto Akron: Button Pusher at <a href="http://www.postbox-inc.com">Postbox, Inc.</a><br> phone: <a href="callto:415-526-2339">415-526-2339</a><br> web: <a href="http://www.postbox-inc.com">www.postbox-inc.com</a><br> twitter: <a href="http://twitter.com/postbox">@postbox</a> </div>
Sto Akron: Button Pusher at Postbox, Inc.
phone: 415-526-2339
web: www.postbox-inc.com
twitter: @postbox
Not terribly interesting, and kind of bobo isn’t it? So let’s add an image. As you’ll see below, we’ve added margin, padding and line-height properties to the DIV style, and also some padding around the image itself. In this example we’ve used a remote image, but you can also use a local file as well:
<div style="line-height:16px; margin:6px 0; padding:8px 8px 8px 8px;"> <img src="http://farm6.static.flickr.com/5247/5343867277_d35595a2c6_z.jpg" style="float:left; padding:0px 12px 15px 0;"> Sto Akron: Button Pusher at <a href="http://www.postbox-inc.com">Postbox, Inc.</a><br> phone: <a href="callto:415-526-2339">415-526-2339</a><br> web: <a href="http://www.postbox-inc.com">www.postbox-inc.com</a><br> twitter: <a href="http://twitter.com/postbox">@postbox</a> </div>
Clik here to view.
Sto Akron: Button Pusher at Postbox, Inc.phone: 415-526-2339
web: www.postbox-inc.com
twitter: @postbox
Next we’ll add some font styling to the DIV tag, and let’s jazz up the name a bit by transforming the text to uppercase and making it bold:
<div style="line-height:16px; margin:6px 0; padding:8px 8px 8px 8px; font-family: 'Lucida Sans', Lucida Grande, Verdana, Arial, Sans-Serif; font-size:11px; color:#555555;"> <img src="http://farm6.static.flickr.com/5247/5343867277_d35595a2c6_z.jpg" style="float:left; padding:0px 12px 15px 0;"> <strong style="color:#333333; text-transform:uppercase; font-size:10px;">Sto Akron</strong>: Button Pusher at <a href="http://www.postbox-inc.com">Postbox, Inc.</a><br> phone: <a href="callto:415-526-2339">415-526-2339</a><br> web: <a href="http://www.postbox-inc.com">www.postbox-inc.com</a><br> twitter: <a href="http://twitter.com/postbox">@postbox</a> </div>
Clik here to view.
Sto Akron: Button Pusher at Postbox, Inc.phone: 415-526-2339
web: www.postbox-inc.com
twitter: @postbox
To make the signature feel more modern, let’s color the links with a softer blue. If you use a HEX color value in Postbox, it will automatically convert to RGB. Also, the !important tag is really… umm… important, so be sure to include that:
phone: <a href="callto:415-526-2339" style="color:rgb(0, 136, 204) !important;">415-526-2339</a>
Clik here to view.
Sto Akron: Button Pusher at Postbox, Inc.phone: 415-526-2339
web: www.postbox-inc.com
twitter: @postbox
Next, let’s soften the underline on the links a bit by adding the following styles to each link:
phone: <a href="callto:415-526-2339" style="text-decoration:none !important; border-bottom:1px dotted #AAA;">415-526-2339</a>
Clik here to view.
Sto Akron: Button Pusher at Postbox, Inc.phone: 415-526-2339
web: www.postbox-inc.com
twitter: @postbox
Finally, we’ll add some borders to the top and bottom of our signature within the DIV tag:
<div style="border-top:1px #aeb1a6 dotted; border-bottom:1px #aeb1a6 dotted;">
Here’s the final code and finished product:
<div style="line-height:16px; margin:6px 0; padding:8px 8px 8px 8px; border-top:1px #aeb1a6 dotted; border-bottom:1px #aeb1a6 dotted; font-family: 'Lucida Sans', Lucida Grande, Verdana, Arial, Sans-Serif; font-size:11px; color:#555555;"> <img src="http://farm6.static.flickr.com/5247/5343867277_d35595a2c6_z.jpg" style="float:left; padding:0px 12px 15px 0;"> <strong style="color:#333333; text-transform:uppercase; font-size:10px;">Sto Akron</strong>: Button Pusher at <a href="http://www.postbox-inc.com" style="color:rgb(0, 136, 204) !important; text-decoration:none !important; border-bottom:1px dotted #AAA;">Postbox, Inc.</a><br> phone: <a href="callto:415-526-2339" style="color:rgb(0, 136, 204) !important; text-decoration:none !important; border-bottom:1px dotted #AAA;">415-526-2339</a><br> web: <a href="http://www.postbox-inc.com" style="color:rgb(0, 136, 204) !important; text-decoration:none !important; border-bottom:1px dotted #AAA;">www.postbox-inc.com</a><br> twitter: <a href="http://twitter.com/postbox" style="color:rgb(0, 136, 204) !important; text-decoration:none !important; border-bottom:1px dotted #AAA;">@postbox</a> </div>
Clik here to view.
Sto Akron: Button Pusher at Postbox, Inc.phone: 415-526-2339
web: www.postbox-inc.com
twitter: @postbox
Do you have tips or code samples to share? Let us know in the comments!