Tips for basic HTML Editing

Within epaPRO you have a few places where we include screens that you can style using a HTML editor, there is also the option to switch it to 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

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.

<a style="color:#0000EE; text-decoration: underline;" href="https://www.google.co.uk">Click on Google</a>

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

Testing font size 12 to 14 Apple 

Apple

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 it when 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 easiest is to use the formatting options within the screen

Highlighting the specific text and selecting “B” for Bold will amend it to bold type

This has the effect of adding this into the html code,

{{component_name}}

The alternative method to making a phrase or word bold via html is to use the  tag option

This is bold text

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  into the body, also known as <color_name>.

<!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:

https://color.adobe.com/create/color-wheel

https://www.w3schools.com/html/html_colors_hex.asp