Home Try Buy

30-day free trial for Windows (need Mac OSX?)

Search

BLOG

Advanced HTML Signatures Styling

March 7, 2012

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="http://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="http://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

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:&nbsp;Button Pusher at <a href="http://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="http://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

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="http://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="http://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="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:&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="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:&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

Do you have tips or code samples to share?  Let us know in the comments!

Posted by Postbox