Hi everyone,

Technical share here.

Recently we've been asked how to customise HTML emails within Totara 10.
For those not already aware in Totara 10 a default look was applied to HTML emails, in the form of a surrounding design which includes background colours.
If you've got a custom theme then change those colours, or the whole surrounding design is something you may want to look at.

To do this you can simply create a new file within your theme:

theme/{themename}/templates/core/email_html.mustache

Set the contents of this file to the following:

{{{body}}}

What you've done here is remove all styling from HTML emails, leaving just the content of the email.
From here you can add any HTML you want, in order to style the surrounding design as you wish.
Just remember, because it is being sent as an email you will need to include any CSS as inline style attributes.
The following illustrates a more complex example of what can be done:

<div style='font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;'>
    <div style="clear:both;">
        <div style="display:inline-block;"><h1 style="padding:10px;"><a style="text-decoration: none;" href="{{sitewwwroot}}">{{sitefullname}}</a></h1></div>
        <div style="float:right;"><p style="padding:10px;">{{toname}}</p></div>
    </div>
    <div style="background-color:#e0245d;margin-top:10px;"><h2 style="padding:1em;"><strong>{{subject}}</strong></h2></div>
    <div style="margin:20px;">{{{body}}}</div>
    <div style="background-color:#e0245d;color:#FFF;"><p style="padding:10px;"><strong>{{siteshortname}}</strong></p></div></div>

There are several placeholders available when constructing the template:

• sitefullname The fullname of the site sending this email.
• siteshortname The shortname of the site sending this email.
• sitewwwroot The URL for the site sending this email.
• subject The subject of the email.
• to The email address of the user this is being sent to.
• toname The fullname of the user this email is being sent to.
• from The email address this is being sent from.
• fromname The fullname of the user sending the email (noting this is often no reply, or the support user).

Finally the current template can be found at theme/basis/templates/core/email_html.mustache

The above guide is a copy of our current documentation maintained here. 

For more information on customising design like this have a read of our guide on overriding mustache templates.

Kind regards
Sam