Within epaPRO you have a few screens places where we include screens that you can style using a HTML editor, there is also the option to switch it to amend the screen to be HTML code display the content in HTML and code it manually.
These screens are:-
Communication Templates - The Communication Templates area allows the style attribute against links. This will allow users to customise emails further with link colour, font size, etc when editing the template using the HTML editor.
News
| Info |
|---|
It is worth mentioning that email clients (e.g. Outlook) do tend to struggle to render code in a consistent format, so what may look fine on the preview screen may be appearing differently once your email client has interpreted it. |
HTML Code Useful Tweaks
Ensuring a URL appears underlined/in blue
To ensure a URL appears in your mail client, as the typical underlined/blue link you could use the HTML editor option on the template - highlighted in yellow
e.g. as Click on Google
...
and enter the URL like this.
<p><a style="color:#0000EE; text-decoration: underline;" href="https://www.google.co.uk">Click on Google</a></p>
Ensuring the font is all the correct sizes
if you have written your communication template or news article and when viewing it the font appears in different size you can cross reference to check.
...
Allowing you to check and if needed change, the font to all the same size.
Changing Font colours and adding bold text
HTML code uses the American spelling of colour i.e. color so be sure to use itwhen setting that attribute.
You can amend the text to be bold within the HTML editor screen in the communication templates in epaPRO in one of two ways.
...
The alternative method to making a phrase or word bold via html is to use the <b> tag option
<b>This is bold text</b>
To amend the colour
There are a few different ways to amend the text to another colour, one of the easiest is to use the <font color="INSERT COLOR HERE"> into the body, also known as color_name (and yes these are the US Spelling) <color_name>.
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html> <html> <head> <title>Adding color in HTML without CSS</title> </head> <body> <h3>Using font tag with color attribute</h3> <h1> <font color="green">Welcome to My Email </font> </h1> <h2> <font color="pink">My sub heading is in pink</font> </h2> </body> </html> |
...
Word to HTML converters can help you create your html code, but they can add a lot of junk to the generated code, which could cause a conflict with the styling. It is also heavily dependent on the email client, as some of them will ignore styling in order to fit it into the style of the email client etc.
External Sites that you may find useful
Identifying hex colour codes
...