In working with email notifications the last couple days, I finally came up with a custom look for them that, so far, *fingers crossed*, seems to work as expected with Microsoft Outlook. 

The key was in building all of the customized look using tables and inline CSS. Outlook is pretty fussy about what it will decide to display. Although I didn’t find much in the community on this topic - I figured I couldn’t be the only one running into issues formatting the emails so I thought others might benefit from a template to get started.

I chose to make one for posting a new comment as it was quick and easy to trigger new emails.
Now I can copy this over to other notifications and just change out the message and shortcodes.

All you really need to do is make appropriate adjustments for your own color scheme, logo, and shortcodes. I recommend doing this in your favorite editor and then pasting it into the HTML editor provided by Docebo as you will lose formatting and readability when you save out.

Here is a shot of the final test email in Outlook. I covered some particulars in the footer. The code is below - I changed a few items there as well. Feel free to use this - I commented it heavily to provide guidance.

Hopefully this is helpful to someone. Feel free to ask questions about it.

<!-- Table-based template for email notifications. -->
<!-- This is a 3-column and 5-row table to offer some space around the body. -->
<!-- Border options are a must if you want to render well in MS Outlook. -->
<table style="width: 100%; border-spacing: 0px; border: 0px; border-collapse: collapse;">

<!-- Top Row -->
<!-- Adjust the height to fit your logo -->
  <tr id="logo" style="height: 150px;">

<!-- Row 1 Column 1 -->
<!-- Adjust background color as desired for your branding -->
    <td style="width: 15%; background-color: black; border: 0px; border-collapse: collapse;"></td>
<!-- Row 1 Column 2 -->
<!-- Adjust the source URL for your logo location and color as needed -->
    <td  style="width: 70%; background-color: black; text-align: center; border: 0px; border-collapse: collapse;">
      <img src="https://path/to/your/logo/logo.png" alt="" />
    </td>
<!-- Row 1 Column 3 -->
<!-- Adjust background color as desired -->
    <td style="width: 15%; background-color: black; border: 0px; border-collapse: collapse;"></td>
  </tr>

<!-- Second Row -->
<!-- Message Header. -->
  <tr id="contentHeader">
<!-- Row 2 Column 1 -->
<!-- Adjust background color as desired -->
    <td style="width: 15%; background-color: black; border: 0px; border-collapse: collapse;"></td>
<!-- Row 2 Column 2 -->
<!-- Adjust background color as desired -->
<!-- Swap out text as your company desires -->
    <td style="width: 70%; background-color: white; padding-top: 10px; padding-left: 10px; padding-right: 10px; border: 0px; border-collapse: collapse;">
      <h3 style="text-align: center; color: black;">Learning Portal Notification</h3>
      <h4>Congratulations!</h4>
      <hr style="width: 70%; text-align: center;">
      <br />
<!-- Row 2 Column 3 -->
<!-- Adjust background color as desired -->
    <td style="width: 15%; background-color: black; border: 0px; border-collapse: collapse;"></td>
  </tr>

<!-- Third Row -->
<!-- Main body. -->
  <tr id="content">
<!-- Row 3 Column 1 -->
<!-- Adjust background color as desired -->
    <td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
<!-- Row 3 Column 2 -->
<!-- Swap out your own message, shortcodes, and closing-->
<!-- Adjust background color as desired -->
    <td style="width: 70%; background-color: white; padding: 10px; border: 0px; border-collapse: collapse;">
      <p>If you are receiving this email - it is because you have been selected to help me verify that notifications are working and that the customization of the message looks the way it was intended.</p>
      <p>A new comment has been posted in a forum!</p>
      <p><strong>Course Name:</strong><br />
         course_name]
      </p>
      <p><strong>Forum Name:</strong><br />
         forum_name]
      </p>
      <p><strong>Comment:</strong><br />
         comment]
      </p>
      <p>Thank you,<br />
        The Learning Team
      </p>
      <br />
    </td>
<!-- Row 3 Column 3 -->
<!-- Adjust background color as desired -->
    <td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
  </tr>

<!-- Fourth Row -->
  <tr id="footer">
<!-- Row 4 Column 1 -->
    <td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
<!-- Row 4 Column 2 -->
<!-- Adjust background color, text color, and text size as desired -->
<!-- Swap out your own contact information -->
    <td style="width: 70%; padding: 10px; background-color: #5f6369; border: 0px; border-collapse: collapse;">
      <p style="text-align: center; color: white; font-size: 10pt;">
        Your Company Name<br />
        A Super Company<br />
        555 Main St, Your City, State 55555
      </p>
      <p style="text-align: center; color: white; font-size: 10pt;">
        +1 555-123-4567<br />
        Your email address here
      </p>
    </td>
<!-- Row 4 Column 3 -->
<!-- Adjust background color as desired -->
    <td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
  </tr>

<!-- Fifth Row -->
  <tr id="endTable">
<!-- Row 5 Column 1 -->
<!-- Adjust background color as desired -->
    <td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
<!-- Row 5 Column 2 -->
<!-- Adjust background color as desired -->
    <td style="width: 70%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
<!-- Row 5 Column 3 -->
<!-- Adjust background color as desired -->
    <td style="width: 15%; background-color: lightgrey; border: 0px; border-collapse: collapse;"></td>
  </tr>
</table>