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:

Placeholder	Description
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

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

Browser not supported