Hello all,

I am trying to add css into the email template.

While designing template it looked like html doesn't gets created like web screen in Outsystems.

Somehow I managed to create template with using table in almost every section of template.

I want to add styles to it - I tried many styles to apply including padding, margin. None of the styles are getting applied to template when I open email in Outlook.

Only background-color is the style that has worked till now.

Does any body have any solution/suggestions for the same.

Thanks in advance.

Durgesh.

Hi Durgesh,

I do not use Outlook, nor have I ever had to support sending emails to Outlook users, but: different email clients process HTML email messages differently. It's usually a long process of trial and error to figure out what works for a certain client and what doesn't (or how to work around quirks).

My suggestion is you design your template as you would in OutSystems, send an email using it and analyse the message source in Outlook to understand how is it transforming the HTML+CSS received. Then start adjusting your email design to address those issues. But keep in mind that by targeting one particular email client (like Microsoft Outlook, Apple Mail or Gmail, for instance), you may end up with an email that renders poorly on other clients.

You can check this post for some more information on the topic, I'm sure there are other posts on the Forums regarding this as well, if you search with the right keywords.

Styles work fine with Outlook. If you send your OML we can look and offer some guidance.

J.Ja

Thank you Jorge, Justin for your replies.

@Justin - I tried with many styles on outlook but only style that was working was the background-color, it accepts all styles and shows those on studio but actual email is completely different.

Attached is the oml file  - EmailToHCP is email template used.

Durgesh -

Strange... this looks like it should work? If you open it in Outlook and do a "View Source", what do you see? Can you paste that or attach it? (It took me a while to find the function... double click the email in Outlook to open it in a separate window, then go to "Actions", choose "More Actions", then "View Source")

That said, I recommend using a separate theme for emails, just to avoid having the entire CSS from the theme included, most of which does not apply to emails.

J.Ja

Thanks Justin.

I have attached source file with this.

Thanks,

Durgesh.

Durgesh Rokade wrote:

Durgesh -

Looks like it is working fine to me, if you look at the source, you will see the contents of the "CrossCountryInternal_Theme" and I believe some RichWidgets and SilkUI theme stuff as well.

THAT SAID...

I think maybe the confusion is that you are expecting CSS from the "DealCalc" theme to be used and it isn't. The reason for that is that the Emails flow is using "CrossCountryInternal_Theme" as its theme, not DealCalc (see screenshot below). If you change that to "DealCalc" it will also include the CSS from "DealCalc". If that is the problem you are seeing, making that change will solve your issue.

J.Ja

Thanks Justin for your time.

I can see styles are present, but for some reason those are not getting applied.

I changed theme to DealCalc, also created another new theme to work.

it seems only one style is getting applied to email and not all that are present with tags. 

Not sure how it overrides styles.

Hi Durgesh,

I've ran into some issues with my CSS in email templates and outlook as well.

Here is a full list of the supported CSS for outlook:

https://docs.microsoft.com/en-us/previous-versions/office/developer/office-2007/aa338201(v=office.12)#supported-html-elements-attributes-and-cascading-style-sheet-properties

I can't quite remember exactly what the specific issue/answer was to my problem, but I remember it being around background colors and certain styles not working correctly in the version of outlook I was testing the email.

The same styles worked across other email platforms (i.e. google).

I suggest taking a look at that list, and the specific styles that aren't working and see what the alternative is to make it work.

Hope it helps,

Justin

EDIT: Realizing that article is for office 2007, will try to find an updated version. But the core issue was the same idea, some CSS didn't work as expected in outlook and needed to be altered to a supported style.

Durgesh Rokade wrote:

Durgesh -

If you take the source of the email, save it to an HTML file, and open it in a browser, does it look right? That will be a quick way to make sure the problem is Outlook.

As Justin Babel said, Outlook ignores a lot of styles, it can be hard to make things look exactly right in it. :(

J.Ja

Yes Justin Outlook is ignoring styles, I can see those in the html.

I think we need to follow the outlook rules of styles for this.

Is it possible to capture image by creating colorful screen and then paste that in an email and just send it instead of doing these lot of things ?

Hello Durgesh,

Unfortunately, Outlook doesn't really behave properly with CSS.

You can see an older discussion about that in this topic: https://www.outsystems.com/forums/discussion/15219/email-formating/

In this discussion please notice Samuel's quote: 

"When creating emails, imagine that you are coding in the year 2000: Use tables instead of Divs. CSS3, what's that?

Basically, you need to keep your emails HTML and CSS as simple as possible. 

In order to make your life a bit simpler, we created some UI Patterns specific for emails and 2 sample emails that you can copy and reuse."

Also here's a link about CSS compatibilities in Outlook https://www.campaignmonitor.com/css/email-client/outlook-2007-16/.

About converting your HTML to an image in order to send it to outlook, you would lose any adaptiveness of the email, and we aren't aware of any implementation of the sort, or any forge component that could help you achieve that scenario. Maybe it would be possible by implementing this javascript library https://github.com/bubkoo/html-to-image, but we haven't tested it.

F.Sousa

Thanks Frederico for your reply.