using a very standard ch.qos.logback.classic.net.SMTPAppender with
<layout class="ch.qos.logback.classic.html.HTMLLayout"/>
I am getting an email out with Content-Type: text/plain; charset=UTF-8
The SMTPAppender and logger in the logback.xml are identical to a current spring boot project which correctly outputs the email with Content-Type: text/html; charset=UTF-8
In fact this is the template we used for dozens of apps, all of which are sending correct email.
The problem project has been tested with logback-classic + logback-core versions 1.2.6, 1.2.8, and the most recent 1.2.11
The following email is the output of a class annotated with #Slf4j and the following:
log.error("this is a test of the email error logging")
Line 12 of the email below is
Content-Type: text/plain; charset=UTF-8
Thu, 19 May 2022 14:02:29 -0500 (CDT)
Date: Thu, 19 May 2022 14:02:29 -0500 (CDT)
From: document-imaging-ws
To: pinky#nowhere.org
Message-ID: <2122991377.01652986949874.JavaMail.xxxxx#xxxxx>
Subject: Generic Error Occurred
MIME-Version: 1.0
Content-Type: multipart/mixed;
boundary="----=_Part_0_513315676.1652986949851"
------=_Part_0_513315676.1652986949851
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 7bit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Logback Log Messages</title>
<style type="text/css">
table { margin-left: 2em; margin-right: 2em; border-left: 2px solid #AAA; }
TR.even { background: #FFFFFF; }
TR.odd { background: #EAEAEA; }
TR.warn TD.Level, TR.error TD.Level, TR.fatal TD.Level {font-weight: bold; color: #FF4040 }
TD { padding-right: 1ex; padding-left: 1ex; border-right: 2px solid #AAA; }
TD.Time, TD.Date { text-align: right; font-family: courier, monospace; font-size: smaller; }
TD.Thread { text-align: left; }
TD.Level { text-align: right; }
TD.Logger { text-align: left; }
TR.header { background: #596ED5; color: #FFF; font-weight: bold; font-size: larger; }
TD.Exception { background: #A2AEE8; font-family: courier, monospace;}
</style>
</head>
<body>
<hr/>
<p>Log session start time Thu May 19 14:02:29 CDT 2022</p><p></p>
<table cellspacing="0">
<tr class="header">
<td class="Date">Date</td>
<td class="Thread">Thread</td>
<td class="Level">Level</td>
<td class="Logger">Logger</td>
<td class="MDC">MDC</td>
<td class="Message">Message</td>
</tr>
<tr class="error even">
<td class="Date">2022-05-19 14:02:29,828</td>
<td class="Thread">http-bio-127.0.0.1-8085-exec-1</td>
<td class="Level">ERROR</td>
<td class="Logger">org.nowhere.my.Controller</td>
<td class="MDC"></td>
<td class="Message">this is a test of the email error logging</td>
</tr>
</table>
</body></html>
------=_Part_0_513315676.1652986949851--
for completeness I include the logback configurations below, though every other project has the same configuration and works correctly.
<appender name="EMAIL" class="ch.qos.logback.classic.net.SMTPAppender">
<smtpHost>${email.smtp.server}</smtpHost>
<smtpPort>${email.smtp.port}</smtpPort>
<from>${email.from}</from>
<to>${email.to}</to>
<subject>${email.subject}</subject>
<asynchronousSending>false</asynchronousSending>
<layout class="ch.qos.logback.classic.html.HTMLLayout"/>
<filter class="ch.qos.logback.classic.filter.ThresholdFilter">
<level>ERROR</level>
</filter>
</appender>
<root>
<level value="error"/>
<appender-ref ref="CONSOLE"/>
<appender-ref ref="EMAIL"/>
</root>
Related
I'm trying to build an email template based on https://www.muicss.com/docs/v1/example-layouts/html-email.
On top of what they offer, I'd like to have a two solid color background: color A for the top fixed height (say 200px), and color B for the rest of the content, and the table (cards) floating across the two colors, similar to This.
I tried different options using linear-background, but it doesn't show at all, the gradient starts from the bottom of the card, or the card's color becomes transparent when copied to Gmail web client (even after I inlined styles)
This is what I have for now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- NOTE: external links are for testing only -->
<style>
body {
width: 100% !important;
min-width: 100%;
margin: 0;
padding: 0;
background-color: #FFF;
}
.mui-body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #212121;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS";
font-weight: 400;
font-size: 14px;
line-height: 1.429;
letter-spacing: 0.001em;
background-color: #FFF;
}
.mui-container, .mui-container-fixed {
max-width: 600px;
display: block;
margin: 0 auto;
clear: both;
text-align: left;
padding-left: 15px;
padding-right: 15px;
}
.mui-container-fixed {
width: 600px;
}
.mui-panel {
padding: 15px;
border-radius: 0;
background-color: #FFF;
border-top: 1px solid #ededed;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
border-bottom: 2px solid #d4d4d4;
}
</style>
</head>
<body>
<table class="mui-body" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<center>
<!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
<div class="mui-container">
<table cellspacing="0" border="0" width="100%">
<tr>
<td class="mui-panel">
<table id="content-wrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<p>random</p>
<p>text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
</center>
</td>
</tr>
</table>
</body>
</html>
Can someone help me with this please?
If only email clients decided to sit down and strictly follow the RFCs... If only they would use the same html css parsing engine...
The question isn't so much HOW but rather, WHAT type of html and css most email clients support consistently across the board. You will find most clients just do their own thing when it comes to parsing your emails and you could end up writing many templates from scratch for the same email.
To save you some time search Foundation for Emails on Google. See direct Link below.
Foundation for Emails | Responsive Email Templates
Foundation for emails is a framework that helps you develop your own custom email templates from templates they already have. Fluid & Responsive for any device. Very clean.
In the process, you will learn which CSS and HTML tags you can use and which aren't supported. Many aren't supported.. To give you an idea, html layouts in emails are created using <table></table> instead of <div></div>. The DOCTYPE you're using is also not ideal; think early 2000's.
Example of correct doctype for all universal emails you will ever write:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Email clients does not support all the css properties. So in short better you use images for linear gradient.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="store.css">
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<ul class="navBar">
<li>Home</li>
<li>Hours</li>
<li>About</li>
</ul>
<div class="centered-container">
<h1 class="centered-text sansSerif-text">About the store</h1>
<p>Here is the information about the store</p>
<img class="open-sign-img" src="images/testpic.jpg" alt="open sign">
</div>
</body>
</html>
css files
.orange-text {
color: orange;
}
.blue-text {
color: blue;
}
#red-header {
color: red;
}
.navBar {
list-style-type: none;
margin: 0;
padding: 10px;
background-color: pink;
}
.navBar li {
display: inline;
}
.centered-container {
max-width: 100%;
width: 80%;
height: 90vh;
margin: auto;
background-color: yellow;
}
.centered-text {
text-align: center;
}
.sansSerif-text {
font-family: sans-serif;
}
.centered-container .open-sign-img {
width: 50%;
display: block;
margin: auto;
}
enter image description here
the rest of my code works fine. In the chrome devTool it shows that the CSS class doesn't connect with the img tag in my html file. I am so confused, why the rest works except this one. I search a lot on goole but it seems I cant find out the correct answer.
The web server that's serving your site currently sends the following headers along with your CSS file:
HTTP/1.1 200 OK
Date: Fri, 15 Mar 2019 22:56:07 GMT
Server: Apache/2.4.18 (Ubuntu)
Last-Modified: Fri, 15 Mar 2019 22:19:04 GMT
ETag: "22c-584296d30e600-gzip"
Accept-Ranges: bytes
Vary: Accept-Encoding
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/css
Transfer-Encoding: chunked
Due to the Last-Modified header the browser is going to cache this file to avoid having to request it from the server again. I have a feeling this is the issue in your case, as the site loads perfectly fine when I visit it right now.
If you don't want this to happen most browsers' developer tools have a checkbox that lets you disable caching while the tools are open.
In Chrome this can be found by opening the DevTools using F12, then clicking the Network tab, and checking "Disable cache". Alternatively, you can use CtrlShiftR to do a hard reload that will force all cached assets to be re-requested without having to use the DevTools.
In your fiddle the css is correct:
with a background-color:
.centered-container .open-sign-img {
background-color: red;
width: 50%;
display: block;
margin: auto;
}
https://jsfiddle.net/4ug89r61
Did your clear your cache ?
I've been struggling with email templates and images for quite a while now.
I've successfully managed to make the images appear in the mail but they do not take the css into account.
Backend/Spring :
This is a simple Spring service used to send mails.
import org.springframework.mail.javamail.JavaMailSender;
import javax.mail.MessagingException;
import javax.mail.internet.MimeMessage;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
private JavaMailSender emailSender;
#Autowired
private Configuration freemarkerConfig;
public void sendResetPassword(Utilisateur utilisateur, String password) throws MessagingException {
String title = messageService.getMessage("user.mail.resetpassword.title");
String titleStrong = messageService.getMessage("user.mail.resetpassword.titleStrong");
String logoImg = imgPath+"/mail/mail_password.png";
Map<String, Object> templateVars = new HashMap<>();
templateVars.put("subject", title + " " + titleStrong);
templateVars.put("title", title);
templateVars.put("logo",logoImg);
templateVars.put("titleStrong", titleStrong);
templateVars.put("password", password);
String sendTo = "";
for(String recep : mailService.getRecipientsFromString(utilisateur.getEmail())) {sendTo=recep;break;}
this.sendMail("reset_password.html",templateVars,Arrays.asList(logoImg),sendTo,title+" "+titleStrong);
}
private void sendMail(String tmplName,Map<String,Object> vars,Collection<String> imgs,String recepient,String subject) {
MimeMessageHelper messageHelper = this.getMailHelper();
try {
messageHelper.addTo(recepient);
messageHelper.setSubject(subject);
messageHelper.setFrom(from);
messageHelper.setReplyTo(replyTo);
this.initTemplateForGeneralInfos().entrySet().forEach(e -> vars.put(e.getKey(), e.getValue()));
Template template = freemarkerConfig.getTemplate(tmplName, Locale.FRENCH, "UTF-8");
String processedTemplate = FreeMarkerTemplateUtils.processTemplateIntoString(template, vars);
messageHelper.setText(processedTemplate, true);
globalImgs.forEach(str -> {
try { messageHelper.addInline(str, new ClassPathResource(str)); } catch (MessagingException e) {
throw new IllegalArgumentException("Error while processing image ["+str+"] in template " + tmplName, e);
}
});
imgs.forEach(str -> {
try { messageHelper.addInline(str, new ClassPathResource(str)); } catch (MessagingException e) {
throw new IllegalArgumentException("Error while processing image ["+str+"] in template " + tmplName, e);
}
});
messageHelper.addInline("globalLogo.png", new ClassPathResource(imgPath+"/logo/globalLogo.png"));
} catch (IOException e) {
throw new IllegalArgumentException("Template " + tmplName + " not found or unreadable", e);
} catch (TemplateException e) {
throw new IllegalArgumentException("Error while processing template " + tmplName, e);
} catch (MessagingException e) {
throw new IllegalArgumentException(e);
}
emailSender.send(messageHelper.getMimeMessage());
}
HTML Template:
<#macro layout subject>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${subject}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width">
<style type="text/css">
/* Fonts and Content */
body,
td {
font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
font-size: 14px;
}
body {
background-color: #F2F2F2;
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}
.highlight {
color: #58CB7E;
font-size: 22px;
}
.small {
color: #9B9B9B;
font-size: 12px
}
#media only screen and (max-width: 480px) {
img {
height: auto;
}
}
p {
padding-bottom: 0.5em;
}
#body,
#footer {
background-color: white;
}
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust: none;">
<table style="border-spacing: 0; margin:0 5em">
<tbody>
<tr>
<td><img id="logo" src="cid:globalLogo.png" style="display: block; margin: auto; padding: 50px 0;" /></td>
</tr>
<tr>
<td id="header" style="color: white;
text-align: center;
background-color: #92D051;
color: white;
padding-top: 15px;
padding-bottom: 35px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 22px;">
<img src="cid:${logo}" style="display: block; margin: auto; padding: 30px 0;" />
<span>${title} <b style="text-transform: uppercase;">${titleStrong}</b></span>
</td>
</tr>
<tr>
<td id="body" style="font-size: 18px; padding: 1em 5em; background-color: white;">
<#nested />
</td>
</tr>
<tr>
<td id="ecos" style="justify-content: space-around; display: flex; padding-bottom: 20px;background-color: white;">
<#list globalImgs as source>
<img src="cid:${source}" style="height: 30px; padding: 0 1em;" />
</#list>
</td>
</tr>
<tr>
<td id="copyright" style="background-color: #273826;
color: white;
text-align: center;
padding: 35px;
letter-spacing: 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;">Company
⋅ Copyright © ${date?string.yyyy}</td>
</tr>
</tbody>
</table>
</body>
</html>
</#macro>
So the problem is that with outlook ,the style doesn't seem to apply to the images. It works great with thunderbird however.
So I guess Outlook is loading the images after the styles.. ? Do you guys have any information about this and do you have any fix for this issue?
Thank you!
Outlook ignores padding and margin applied to img.
The solution is to apply padding to the td surrounding the image.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td style="padding: 10px;">
<img src="http://example.com/example.png" width="100" height="50" alt="" border="0">
</td>
</tr>
</table>
Good luck.
I am attempting to get data in XML as well as HTML format using curl.
curl --data "<xml>" --header "Content-Type: xml" http://example.com
curl --data "<html>" --header "Content-Type: html" http://example.com
Both cases I get the following output.
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p>More information...</p>
</div>
</body>
Which is clear HTML.How can I get the data in XML and in JSON too if possible.
You can ask to the server to return you xml or json, but its up to the server whether they will return you data in that format or not(also, the server must have that mechanism implemented).
You can do a request for xml in this way:
-H 'Accept: application/xml'
For json:
-H 'Accept: application/json'
FYI: example.com doesn't have that implemented. So you'll always get html from them.
I'm currently working on some simple gallery, that should show thumbnails of a fixed size of 148px.
When I specify <!doctype html> at the very beginning of the file it messes up my style so that it looks like on this picture.
Without this line (I guess the browser is working in HTML4 mode then) it looks correct:
Take a look at the file by yourself: http://ablage.stabentheiner.de/2013-08-10_gallery.html
New file version: http://ablage.stabentheiner.de/2013-08-10_gallery2.html same file with different doctype: http://ablage.stabentheiner.de/2013-08-10_gallery2_html4.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Gallerie</title>
<base target="Hauptframe">
<style>
body {
background-color: #CCFFCC;
background-image:url(../background.gif);
}
table {
border:none;
border-spacing:0;
}
img {
border:none;
}
A:hover {
color: #FF0000;
font-weight: bold
}
.imagefloat {
border: medium solid #FFF;
float: left;
margin-top: 0px;
margin-right: 16px;
margin-bottom: 20px;
margin-left: 0px;
}
.nowrap {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 16px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.nowrapline2 {
font-size: 12px;
}
.nowrapline3 {
font-size: 10px;
}
.error {
font-weight: bold;
color: #F00;
}
.caption_cell {
background-color: #FFF;
width: 148px;
height: 80px;
}
</style>
</head>
<body>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p><p class="nowrap nowrapline3">Copyright</p>
</td>
</tr>
</table>
</div>
<div class="imagefloat">
<table>
<tr>
<td><img src="http://placehold.it/148x148" width="148" height="148" alt=""></td>
</tr>
<tr class="caption_cell">
<td>
<p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p>
</td>
</tr>
</table>
</div>
</body>
The solution is simple enough. Images by default are handled as inline objects. For inline rendering, a minimum vertical clearance between rows is generally required and this is added by the browser for better readability. To remove this additional clearance try applying 'display: block' to these images.
Okay, your problem here's simple: you aren't using valid HTML5. The first thing you should always check is that your code validates as well-formed HTML, which yours doesn't. After that, check your CSS too; but just be aware that if the problem is that your site displays more nicely in HTML4 mode than HTML5 mode, then that's not a bug, that means that you've done something wrong writing your code.
Your first step here is to fix all of the glitches which the W3C validator has pointed out; if that doesn't fix the problem, then take another look at your CSS.