[ZendTo] An update for HTML email templates and body tag

Tue Jan 22 16:03:45 GMT 2019

I don’t have a copy of Windows to test on in my office but it looked like it rendered ok on the Mac version of Outlook (ver. 16.21), so maybe there was a recent change or the Mac version uses a different renderer.

Well thanks for all the hard work, too bad you can’t use it. I know what pain CSS/HTML dev can be, I spent a number of hours getting the logo to position correctly and after a lot of googling found out about the newish Flexbox CSS that finally allowed me to right justify and center the image in the header div in the template I sent in my earlier email.

------------------------------------------------------
Travis Zimmerman tzimmerman at fsu.edu<mailto:tzimmerman at fsu.edu> 850-645-8030
Linux Enterprise Applications & Systems its-linuxadmins at fsu.edu<mailto:its-linuxadmins at fsu.edu>
Information Technology Services, Florida State University

On Jan 21, 2019, at 11:09 AM, Jules Field <Jules at Zend.To<mailto:Jules at Zend.To>> wrote:

On 17/01/2019 16:57, Travis Zimmerman via ZendTo wrote:
We encountered a weird problem that only occurs when forwarding or replying to emails from ZendTo using Thunderbird. The background color from body defined in local.css would get applied to the message from the person forwarding or replying. At my university that means the background was set to a dark garnet, which makes black text hard to read. So this sent me down a whole rabbit hole of looking at the HTML email templates, which brings up two changes that I think would be great for ZendTo.

1) Set the body tag in the website code (header.tpl) and emails (email_header_html.tpl) to have id=“zendtobody” or whatever you would like to name the id for the body css. It would mean local.css needs a minor change from body to #zendtobody. All around I think a pretty easy minor change that clears up the weird Thunderbird interaction.
I can do that, no problem.

2) I’ve attached some edits I made to email_header_html.tpl and email_footer_html.tpl. My uni’s gold logo looked a bit off on the grey background so I changed it to match the garnet we use on the website, which is when I realized that the email style was set manually instead of using the local.css that it imports and that the rounded corners were images. So I made changes to the templates to use fully use the local.css branding and I converted one of the tables into divs and set the content div (#container) to have rounded corners without using images. Let me know what you think, I think I managed to keep the design you created but made it to automatically use the branding we define in the local.css. I only had my uni logo and the default ZendTo logo to test against, so I didn’t get to do an extensive amount of testing.
Sadly, a lot of mail clients (hi, Outlook for starters!) display HTML *very* poorly. Believe it or not, Outlook uses Word's HTML renderer, rather than a web browser's one. If you try hard enough, you can get Outlook to draw page breaks in an HTML email. I *wish* I could have done the email styling with nice rounded corners and everything.

It took me a long time to produce a version that would render in every email app and webmail service I tried. I hate and detest that I had to do it with a table of nasty little images embedded with data: URLs, but that's the only way to do it. Had it been possible to do it the same way I did with the web pages, it would have saved me days figuring it out.

------------------------------------------------------
Travis Zimmerman tzimmerman at fsu.edu<mailto:tzimmerman at fsu.edu> 850-645-8030
Linux Enterprise Applications & Systems its-linuxadmins at fsu.edu<mailto:its-linuxadmins at fsu.edu>
Information Technology Services, Florida State University

_______________________________________________
ZendTo mailing list
ZendTo at zend.to<mailto:ZendTo at zend.to>
http://jul.es/mailman/listinfo/zendto<https://urldefense.proofpoint.com/v2/url?u=http-3A__jul.es_mailman_listinfo_zendto&d=DwMDaQ&c=HPMtquzZjKY31rtkyGRFnQ&r=TZ3x4Nnv5Pp03uwRWF9UlLOaC296m8a1MGVEkWJljsg&m=v_Nna0QI7l_bYzoE1tIv3RTC1z9pvRH3Uo_KudyijG8&s=nmBeh8deFv-3ZGnObOJ_qTxvC03UgU1ZjC5Uff8oNBs&e=>

Jules

--
Julian Field MEng CEng CITP MBCS MIEEE MACM

'There is one thing stronger than all the armies in the world;
 and that is an idea whose time has come.'

www.Zend.To<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.Zend.To&d=DwMDaQ&c=HPMtquzZjKY31rtkyGRFnQ&r=TZ3x4Nnv5Pp03uwRWF9UlLOaC296m8a1MGVEkWJljsg&m=v_Nna0QI7l_bYzoE1tIv3RTC1z9pvRH3Uo_KudyijG8&s=Laa23EP1N3n0Jr0LCthKgLNeHxpJRO1AezUl09m4jWg&e=>
Twitter: @JulesFM

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://jul.es/pipermail/zendto/attachments/20190122/8594084b/attachment-0001.html>