Styling emails in Totara LMS

All emails from Totara LMS (v10 and above) are dependent on a single template. Email clients like Outlook are notoriously difficult to style. Save yourself the pain of coding your HTML email template from scratch.

I have branded the below email template and made it responsive and accessible.

Styling emails in Totara LMS

I first published this post at Styling emails in Totara LMS | LinkedIn

How to update your email templates in Totara LMS

Your current email template can be found at /theme/mytheme/templates/core/email_html.mustache

To modify your email template, connect to the LMS server in Filezilla or another FTP tool.

Note: You will need to have permissions and credentials to access the server.

Once connected, browse to the directory /var/www/vhosts/**lmssite.com**/httpdocs/theme/**mytheme**/templates/core in the right hand side window pane under Remote Host.

Access Totara LMS moustache files via FTP

There you will find the ‘email_html.mustache’ file that you should update, please do not update the other files. 

Download your email_html.mustache file and save it to a safe location. It may simply contain the code {{{body}}}

Download my email template (and view Source Code)

view page source - Styling emails in Totara LMS
Right-click mouse and
select View Page Source
or Save Page (as HTML)

I find it easy to work with .html file since I can open it with my browser to visualise how my emails would look.

Open it with your code editor (my current favourite it VS Code) and make the required changes.

You would need some basic HTML skills to structure your email templates and CSS skills to style them.

I use HTML tables and inline CSS to ensure that my emails are styled properly in Outlook and other email clients.

I split the header image into 3 pieces:

  • Logo (png image)
  • Email Subject in text format and
  • Full width banner image (hidden).

If the images fail to load, users will see the ALT text. Also {{{subject}}} will get replaced with email subject (i.e. the title).

I also set the email width to 640px wide.

I have used 2 placeholders. The LMS will replace the {{{body}}} placeholder with the email contents.

There are several placeholders available when constructing the template. Some useful ones are:

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

You can improve this template further… for example, improve included links to raise tickets if they are unable to access LMS or view help docs.

If not, simply replace the colours I have used (e.g. #fdd9db) with your brand colours.

Totara-LMS-email-template-code

Once you are happy with the changes, rename the html email template file as ’email_html.mustache’

Totara LMS - Rename file as .moustache format

Upload the file to your LMS server and replace your current email template.

Hope that helps! Let me know in comments how that went for you.

For more information on customising email template design like this have a read of the Totara guides on customising HTML email and overriding mustache templates.

VJ - Vijay Rudraraju

Vijay Rudraraju (VJ)

I am a passionate Learning Management Systems (LMS) Administrator with 10+ years experience in administering learning systems, teaching, motivating, and directing learners. I am an experienced professional with a background in devising easy-to-use solutions for improved efficiency. 

I publish articles and tips in managing LMS, building eLearning packages, project management and data analysis and reporting.

Leave a comment

 

Get in touch

Affordable and creative web solutions from Melbourne, AU. I build robust fast-loading WordPress sites for a fraction of the price. Call VJ on +61389867186
Address :
106 Alamanda Blvd,
Point Cook,
VIC - 3030
Australia.
Tel : +61389867186
Email : hello@vjdesign.com.au

 Logo

Image of

$600-12000