Follow

Advanced HTML Signature Code Example

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:&nbsp;Button Pusher at Postbox, Inc.<br>
phone:&nbsp;415-526-2339<br>
web:&nbsp;www.postbox-inc.com<br>
twitter:&nbsp;@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:&nbsp;Button Pusher at <a href="https://www.postbox-inc.com">Postbox, Inc.</a><br>
phone:&nbsp;<a href="callto:415-526-2339">415-526-2339</a><br>
web:&nbsp;<a href="https://www.postbox-inc.com">www.postbox-inc.com</a><br>
twitter:&nbsp;<a href="https://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="https://farm6.static.flickr.com/5247/5343867277_d35595a2c6_z.jpg" style="float:left; padding:0px 12px 15px 0;">
Sto Akron:&nbsp;Button Pusher at <a href="https://www.postbox-inc.com">Postbox, Inc.</a><br>
phone:&nbsp;<a href="callto:415-526-2339">415-526-2339</a><br>
web:&nbsp;<a href="https://www.postbox-inc.com">www.postbox-inc.com</a><br>
twitter:&nbsp;<a href="https://twitter.com/postbox">@postbox</a>
</div>
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>:&nbsp;Button Pusher at <a href="https://www.postbox-inc.com">Postbox, Inc.</a><br>
phone:&nbsp;<a href="callto:415-526-2339">415-526-2339</a><br>
web:&nbsp;<a href="https://www.postbox-inc.com">www.postbox-inc.com</a><br>
twitter:&nbsp;<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

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:&nbsp;<a href="callto:415-526-2339" style="color:rgb(0, 136, 204) !important;">415-526-2339</a>
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:&nbsp;<a href="callto:415-526-2339" style="text-decoration:none !important; border-bottom:1px dotted #AAA;">415-526-2339</a>
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>:&nbsp;Button Pusher at <a href="https://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:&nbsp;<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:&nbsp;<a href="https://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:&nbsp;<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>

 

Sto Akron: Button Pusher at Postbox, Inc.
phone: 415-526-2339
web: www.postbox-inc.com
twitter: @postbox