Customising HTML email

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

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

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