Related Products: Signature Manager Exchange Edition | Signature Manager Outlook Edition | Signature Manager Office 365 Edition | Mail Disclaimers | Template Editor
Scenario
Your signature design requires specific font sizes and styling in order to match your company's brand guidelines.
Resolution
The editor allows you to customise the text and fields you include using the properties available in the template editor.
Typically we recommend you use Active Directory fields to automate the information for each user and where possible, Composite fields for disclaimers, addresses and/or standardised text when building signature templates. You can also add font styles to Conditional fields for the conditional values to inherit.
You can install your own custom fonts, as well as use the Source Code in the HTML editor to add additional styles to further customise the signature.
Any web safe font can be used, such as Arial, Times New Roman, Courier etc. Please refer to our Web Safe Fonts article for further information.
Adding font styles to Active Directory Fields
To add a field, use the Field Menu to choose a field.
The Message Sender Tab, contains all the fields from the Active Directory.
When working with fields, such as the {Display Name}, {Telephone Number}, {Email Address}, {Custom Hyperlink} etc. it is recommended to use the Field Properties on the right hand side of the template editor to set the fonts and colours, based on the design required.
The Appearance section allows you to select and/or type a font name, as well as setting the size in pts. Setting colours is always in a hex value, but you can type in colour names, such as 'aqua', 'Red', 'green' etc. Bold, underline and small caps are also possible. However, if you need a specific field case, you can change this here also.
The Behaviour section allows you to show and hide a field if it is blank in the Active Directory - this also affects the Prefix and Suffix as well.
The Content section allows you to add a prefix and suffix, as well as suppressing lines and adding a fallback value, although suppressing lines and fallback values are not commonly used.
Adding font styles to the Prefix and Suffix
The Prefix and Suffix of a field shows text either before or after the Field Data. They are used specifically for contact details, along with faux smart tables and avoiding blank spaces if a field is empty.
Prefix - Before the Field Data
Suffix - After the Field Data
Typically, the prefix and suffix will inherit the field values set above in the Appearance section. However, you can change the properties by clicking on the arrow, to the left of the 'Prefix' or suffix once clicked on.
Adding font styles to custom hyperlinks
Custom Hyperlinks, {Email (as Hyperlink)} and {web page (as hyperlink} fields will always show as blue and underlined as per the default mail client behaviour. You can override this using the field properties.
Turning the underline setting to false and adding a colour to the field itself will allow the hyperlink to remain a set colour in all mail clients. This will not be displayed with an underline. However, you can choose to leave the hyperlinks to remain blue and underlined if need be.
Changing the case for the hyperlinks can be achieved as per our changing the field cases in custom hyperlinks guide.
Adding font styles to Composite Fields
To add a composite field, select Fields - Dynamic Content - Composite Field:
The Appearance properties of the composite field are the same settings as a normal Field. However, you cannot set the field case, nor add a prefix or suffix.
You can interpret the markup if there is html code inside the field, this will allow the code to display as intended, rather than displayed as html code.
You can have fields within the composite field that has different properties to the rest of the content.
To do this, double click on the composite field, add in the field or another composite field as required.
Then, highlight or click on the field in the window and apply the styling in the properties box in the editor window:
Adding Font styles to Conditional Fields
To add a conditional field, go to Fields - Advanced - Conditional Field.
Styling Conditional fields is exactly the same as a composite field. However, you can also style the fields inside a condition to have different properties.
To change the properties of a field inside a condition, double click on the conditional field in the template, then click on the condition you wish to edit - click edit.
Then, right click on the purple field - select properties to bring out an editing window
Here you can edit the field properties the same way as before.
Using the Font styles in the Editor Window
You can use the font properties at the top of the editor window. However, this is limited and will generate html in the source code that can be difficult to navigate through.
Font tags are generated when using the text properties tab, rather than X-Small, X-Large etc, it will display as Font Size = 6 or a generated number, followed by Face="font".
Font sizes have their own equivalents, for further information in regards to what X-small, X-Large etc. are, please see our conversion guide for a comparison between pts, pixels and x-small / large sizes.
Adding font styles within the Source Code
The source code allows you to add custom fonts using a Font Stack, as well as set other font properties such as font weights, letter spacing, line heights etc. This can be generated in two ways, either by using the Style Editor in the font style properties tag in the field, or inserting html code directly.
Using the Source Code
In this example, we use a span tags to style 'Kind Regards', using a font-family, line-height, font-size and color. Span tags allow you to style the signature as a whole, or target individual elements. This can help to resolve font issues with some mail clients, extra line breaks appearing after being sent from a mobile devices and of course, using custom fonts by using a font stack.
To add a span tag, go to the HTML Tab - Source
Then, select the area you would like to apply <Span></Span>, along with style =, similar to the below example:
This can surround one section or the whole of the template. This depends if the whole signature needs to be one font, or if you need to style this based on multiple values.
The outcome should reflect the code added - in this case 'Calibri', 10pts and Blue. As per the font stack, the font will change depending on device, mail client and the fonts that are available.
Style Editor
The Style Editor allows you to specify that inline style information be included in an HTML tag by use of our tag properties editor.
1. Place the cursor within the text that you want to specify the size of. You will see at the bottom and on the right hand side of the Template Editor window, the list of tags that the cursor is within.
2. While the text is selected, navigate to the Style property in the Properties pane on the right hand side. Then click on the ellipsis '…' to open the style editor
3. Here you can set the font styles, font weights, colors and other styles required
As you can see, the html code is generated automatically inline. If we go to the source code, we can see that this is generated using Style= and this can be applied to a <p> </P>, <font></font> and <span></span> tags to name a few.
This sort of styling can also be used in Tables, Table Cells, Div Tags etc.