/
Tips for basic HTML Editing
  • Complete
  • 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.

    <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

     

    image-20240614-155003.png

     

    image-20240614-155126.png

    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

    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

     

    image-20240614-160115.png
    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,

    <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>.

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

    image-20240619-150054.png

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

     

    image-20240619-151827.png

     


    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