{"id":119,"date":"2022-10-20T23:04:05","date_gmt":"2022-10-20T12:04:05","guid":{"rendered":"http:\/\/localhost:10138\/?p=119"},"modified":"2022-10-22T15:01:09","modified_gmt":"2022-10-22T04:01:09","slug":"styling-emails-totara-lms","status":"publish","type":"post","link":"https:\/\/dev-train-well.pantheonsite.io\/styling-emails-totara-lms\/","title":{"rendered":"Styling emails in Moodle & Totara LMS"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

I have branded the below email template and made it responsive and accessible.<\/p>\n\n\n

\n\nClick here to Download my HTML Email Template<\/a>\n\n<\/div>\n\n\n
<\/div>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

I first published this post at Styling emails in Totara LMS | LinkedIn<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n

How to update your email templates in Totara LMS<\/h3>\n\n\n\n

Your current email template can be found at \/theme\/mytheme\/templates\/core\/email_html.mustache<\/em><\/p>\n\n\n\n

To modify your email template, connect to the LMS server in Filezilla or another FTP tool.<\/p>\n\n\n\n

Note:<\/strong> You will need to have permissions and credentials to access the server.<\/p>\n\n\n\n

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

\"\"<\/a><\/figure>\n\n\n\n

There you will find the \u2018email_html.mustache\u2019 file that you should update, please do not update the other files. <\/p>\n\n\n\n

Download your email_html.mustache file and save it to a safe location. It may simply contain the code {{{body}}}<\/p>\n\n\n\n

Download my email template<\/a> (and view Source Code)<\/p>\n\n\n

\n
\"\"
Right-click mouse and
select View Page Source<\/strong>
or Save Page<\/strong> (as HTML)<\/figcaption><\/figure><\/div>\n\n\n

<\/p>\n\n\n\n

I find it easy to work with .html file since I can open it with my browser to visualise how my emails would look.<\/p>\n\n\n\n

Open it with your code editor (my current favourite it VS Code) and make the required changes.<\/p>\n\n\n\n

You would need some basic HTML skills<\/a> to structure your email templates and CSS skills<\/a> to style them.<\/p>\n\n\n\n

I use HTML tables and inline CSS to ensure that my emails are styled properly in Outlook and other email clients.<\/p>\n\n\n\n

I split the header image into 3 pieces:<\/p>\n\n\n\n