How to implement css for email templates for outlook and gmail?

Hello ,

I create email template in email section of outsystem.But i am unable to apply css for my email template. Because outsystem email template adds its own dynamic id before css class which i given to perticular element.also email template not looks good in outlook. Is there any way to apply css for different platforms e.g like for outlook, for gmail etc...Need your help..thanks in advance...

Hi Bharat,

You can make a new theme, which isn't based on any other theme and put the css that you need in your emails in there.

For the email templates you create a new WebFlow and in the properties of the WebFlow you can set the new just created theme to avoid loading the whole default theme too.

Kind regards,

Remco Dekkinga

I create new theme and apply my new css but it works only for gmail not for outlook.Is there any way to implement css for outlook email templates like in html  we create css for outlook .Plz check the below css for outlook which we can use in normal html emailer template.

<!--[if gte mso 9]>
    <style type='text/css'>
    /* Your Outlook-specific CSS goes here. */
    img
{
padding-top:20px !important;
}
table
{
   border-collapse: separate !important;
   border-spacing: 0px 8px !important;

}
    </style>
<![endif]-->

bharat koshti wrote:

Hello, bharat koshti.I'm having the same problem as you. Have you found any solution to solve this yet?

I create new theme and apply my new css but it works only for gmail not for outlook.Is there any way to implement css for outlook email templates like in html  we create css for outlook .Plz check the below css for outlook which we can use in normal html emailer template.

<!--[if gte mso 9]>
    <style type='text/css'>
    /* Your Outlook-specific CSS goes here. */
    img
{
padding-top:20px !important;
}
table
{
   border-collapse: separate !important;
   border-spacing: 0px 8px !important;

}
    </style>
<![endif]-->



Hi Bharat,

I found I had to make changes to the email template.

I opened the email template, and cloned the template module, then copied it and some of its dependencies into my own module.  Then I could modify it.

The email template is quite good, but I had some problems with fonts, particularly when applied to hyperlinks. I also found differences when I opened the email in IE 11 and Edge.  Edge was generally good.

To add Outlook specific markup, I used an expression with Escape Content = "No" with the following content:

"<!--[if mso]>
<style type=""text/css"">
body {
 color: #4e4e4e;
 font-size\: 14px;
 font-weight: normal;
}

.CustomLayoutEmail table, .CustomLayoutEmail td, .CustomLayoutEmail a, body, table, td, a {
  font-family:Arial,Meiryo,sans-serif !important;
}
</style>
<![endif]-->"

I had alot of trouble with images, particular attempting to reduce a double sized image to 50% for high resolution devices. In the end I gave up and used the image at 100% because the image widget prevents adding width and height as image element attributes.

Be sure to create your emails in a separate UI Flow specific to emails and use a specific Email theme.  Otherwise, your emails will contain the complete CSS of the whole web application, which is definitely not what you want.

As you are likely aware, there are lots of restrictions on HTML email to make sure it looks right. Using tables for layout is one.

Here is a useful page for checking the HTML of emails. https://www.htmlemailcheck.com/check/

I pasted your example in and here are some of the warnings it reported this for border-spacing.

The border-spacing style is not supported in 11 known email clients and should be avoided from implementing.

I hope this helps!

Kind regards,

Stuart


(Please note the backslash after the font-size attribute above is being added by the forum html editor and I have not been able to remove it, it is not valid CSS)

Bear in mind there are inconsistencies on how Outlook native app and Outlook Web display emails. Basically, Outlook is a mess.