Within epaPRO you have a few screens where we include screens that you can style using a HTML editor, there is also the option to amend the screen to be HTML code 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
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.
Open the HTML editor in epaPRO by clicking on the <> icon
Once you amend to the HTML editor you can see where the font sizes are listed
</p><p>Testing font size 12 to 14 </p><p><span style="font-size:12px;">Apple </span></p><br>
<p><span style="font-size:14px;">Apple</span></p>
Allowing you to check and if needed change, the font to all the same size.
Changing Font colours and adding bold text
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 easiest is to use the formatting options within the screen
This has the effect of adding this into the html code,
<strong>{{component_name}}</strong>
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).
<!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>
It would appear as:-
You can also use the these alternative methods
hex_number: It sets the text colour by using colour hex code. For example: “#0000ff”. (More info on Hex codes below)
rgb_number: It sets the text colour by using rgb code. For example: “rgb(0, 153, 0)”.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | <font> color Attribute
</title>
</head>
<body>
<font size="6" face="verdana" color="green">
Testing Colours1
</font>
<br>
<font size="6" face="arial" color="#008000">
Testing Colours 2
</font>
<br>
<font size="6" color="rgb(128, 128, 0)">
Testing Colours 3
</font>
</body>
</html>
This would have the effect of appearing as:-
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
To locate what a colour is in hex code e.g. #000123A you can use sites such as:
Add Comment