Relevant Products: Signature Manager Exchange Edition | Signature Manager Outlook Edition
Scenario
You are looking to create a banner within your signature template that has clickable locations or dynamic data overlaid on a background image.
Resolution
As well as the images being web-hosted, they must be uploaded at the exact size that your signature is going to be. For example: 600px by 100px.
Part 1 - Inserting the background image
- To begin creating this design, you will need to insert the following code into your signature where ever you require this to display. You will need to enter this information in the Source tab.
<!-- BEGIN : CTA / Background image -->
<TABLE role=presentation style="WIDTH:;" cellSpacing=0 cellPadding=0 width= bgColor=#303e3d border=0>
<TBODY>
<TR>
<TD style="BACKGROUND: url(INSERT WEB LINK) no-repeat; background-size: contain" bgColor=#303e3d vAlign=middle background="INSERT WEB LINK" align=center>
<!--[if gte mso 9]>
<img src="INSERT WEB LINK" alt="" border="0" width="" height="" style="display:block;" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:; height:; position:absolute; top:0; left:0; border: 0; z-index: 2">
<v:fill color="#ffffff" opacity="0%" style="z-index: 1;" />
<div><![endif]-->
<!-- Containing Table START--><!-- Containing Table END-->
<!--[if gte mso 9]>
</div></v:fill></v:rect><![endif]-->
</TD>
</TR>
</TBODY>
</TABLE>
<!-- END : CTA / Background image --> - Once the code has been added to your signature template, within the Source tab you will need to update three locations with the "Web Hosted Image URL" of your background image. Locate "INSERT WEB LINK"
- After adding the image URL to your source code, locate the Width & Height inputs in the source view. Once you have located these, you will need to insert the image dimensions to the exact size that the image is.
- Finally, locate the "bgColor" within the code and set this to a background colour similar to your background image. This simply acts as a "fallback" should the background image not display.
Part 2 - Creating the signature
- Locate <!-- Containing Table Start --> and <!-- Containing Table End --> and create a new HTML table with the required number of rows and columns.
- Insert the required fields, information and links into your signature. Apply any styles to the fields, information and links as required.
- Finally, locate the TD tag that contains the "BACKGROUND" and on the "Style" add some additional padding to ensure there is some spacing around the content of your signature template.