Styling emails in the Email module with templates

0
Hey there! I’m currently trying to figure out how to add custom styles to email templates defined in the Email Template Module. I wrote up some html to match the requirement, but when I transported it over to the HTML section of the template configuration the preview in the rich text section doesn’t match what I’m using when I open my .html doc in a browser. Also, I’ve tried sending a couple of test emails and it’s like it’s ignoring my styling. I’ve tried putting my <style> tags in the body section of the html, and I’m not seeing any difference. It even appears to be ignoring my inline styling (ie <h3 style="text-decoration: underline;">Lorem</h3>). After looking over the docs it doesn’t appear like they touch on this at all, but I did see a couple of forum posts that said it was possible. Any chance anyone has run into this before? Am I doing something wrong or is it not possible to style the html doc as much as I thought? For reference, this is what I’m currently trying to do. It keeps some of my styling, like the header tags, but besides that seems like everything else is ignored.   <style rel="stylesheet" type="text/css"> .head { grid-area: header; } .leftSection { grid-area: left; } .rightSection { grid-area: right; } .footTop { grid-area: footerTop; } .footBottom { grid-area: footerBottom; } .grid-container { display: grid; grid-template-areas: 'header header header header header header' 'left left right right right right' 'footerTop footerTop footerTop footerTop footerTop footerTop' 'footerBottom footerBottom footerBottom footerBottom footerBottom footerBottom'; grid-gap: 10px; padding: 10px; } .subtext { flex: auto; font-weight: 300; font-size: small; } .footerBottom { display: flex; flex-direction: row; align-content: space-between; } .footerImage { flex: auto; padding-left: 16px; } </style> <div class="grid-container"> <div class="head"> <br> <h3 style="text-decoration: underline;"> Order Confirmation</h3> Dear {%CustomerName%}, <br> <br> Thank you for choosing . The following order has been received and will be processed shortly. <br> <br> <b>Order Details</b> Order Date: {%OrderDate%} <br> Order Number: {%OrderNumber%} </div> <div class="leftSection"> <br> <br> <b>Your Shipping Information:</b> <br> {%ShipToAddress%} <br> <br> <b>Shipping Method:</b> <br> {%ShippingMethod%} <br> <br> <b>Your Payment Information:</b> <br> {%PaymentType%} <br> <br> <b>Your Billing Information:</b> <br> {%BillTo%} <br> {%BillToAddress%} </div> <div class="rightSection"> <table> <tr> <td style="padding-left: 10px; padding-right: 100px;"><h4>Item(s) Ordered</h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4>OEM#</h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4>Qty</h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4>Price</h4></td> </tr> {%LineItems%} <tr> <td style="padding-left: 10px; padding-right: 100px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;">Item(s) Subtotal</td> <td style="padding-left: 10px; padding-right: 10px;">{%Subtotal%}</td> </tr> <tr height="10px"> <td style="padding-left: 10px; padding-right: 100px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"></td> <td style="padding-left: 10px; padding-right: 10px;">---------------</td> </tr> <tr height="10px"> <td style="padding-left: 10px; padding-right: 100px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><b>Total for this Shipment</b></td> <td style="padding-left: 10px; padding-right: 10px;">{%Subtotal%}</td> </tr> <tr height="10px"> <td style="padding-left: 10px; padding-right: 100px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><b>Subtotal:</b></td> <td style="padding-left: 10px; padding-right: 10px;">{%Subtotal%}</td> </tr> <tr height="10px"> <td style="padding-left: 10px; padding-right: 100px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><b>Estimated Shipping & Handling:</b></td> <td style="padding-left: 10px; padding-right: 10px;">{%Freight%}</td> </tr> <tr height="10px"> <td style="padding-left: 10px; padding-right: 100px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><b>Estimated Taxes:</b></td> <td style="padding-left: 10px; padding-right: 10px;">{%Taxes%}</td> </tr> <tr height="10px"> <td style="padding-left: 10px; padding-right: 100px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"></td> <td style="padding-left: 10px; padding-right: 10px;">---------------</td> </tr> <tr height="10px"> <td style="padding-left: 10px; padding-right: 100px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><h4></h4></td> <td style="padding-left: 10px; padding-right: 10px;"><b>Total</b></td> <td style="padding-left: 10px; padding-right: 10px;">{%Total%}</td> </tr> </table> <br> </div> <div class="footerTop"> Should you have any questions about your order, contact us at {%SupportNumber%} or <a href="mailto:{%SupportEmail%}">{%SupportEmail%}</a> <br> For faster service, please have your order number available. <br> <br> Please note: This is an auto generated e-mail. Do not reply to this message. <br> <br> <div class="footerBottom"> <div class="subtext" style="flex: auto; font-weight: 300; font-size: small;"> Copmany Name | Company Address <br> Copmany Num | <a href="">CompanyURL</a> <br> is a registered trademark. All rights reserved </div> <img class="footerImage" src="" alt="logo" width="200" height="50"> </div> </div> </div> Any help, tips, tricks is much appreciated
asked
3 answers
4

Hi Austin,

A little late, so maybe you resolved this yourself. I've had to style an e-mail a year ago for a client. What we learned, is that you cannot use CSS in emails as easily as you would expect (actually it is really hard), as not all emailproviders process everything. 

Our main takeaway was using as much inline styling as possible (the reverse of what you would do with Mendix styling) and Google what is and isn't possible (some more information). We just tried what worked by making changes in the HTML and testing by sending real emails. Unfortunately, not all emailproviders are equal, so you will have to check if your styling works on email for phones/Apple/laptops etc seperately.

Hope this helps.

Cheers,

Daan

answered
1

Hi Austin,

I use this trick as I’m sending an HTML email body and it's working fine, copy your HTML body inside the plain text, and when you create the Email object and store the Template plain body into the HTML body.
Basically  what you need to do before sending your HTML body to use the convert to HTML body to plain text same the copy to plain text functionality.

answered
0

If you want to change the table in an email edit page, you need to add your table styling again. Otherwise, the table is showing in the email but without lines. To prevent this add a string in de table which you can replace after changing the table. When sending the email use the 'regexReplaceAll' to find the set string and replace it with the right table styling. This way the table always have the right styling whether you adjust the table or not.

 

String.png

image.png

answered