Sendgrid template CSS is ignored
I have used Sendgrid to make the following template:
To send this using my Node server I have created the following module:
/**
* Created by root on 6/6/16.
*/
var path = require('path'),
emailTemplates = require('email-templates'),
async = require("async"),
mailConfig = require('../config/email.json'),
templates = require('../config/emailTemplates.json'),
_ = require('lodash'),
sendgrid = require('sendgrid')(mailConfig.sendGridApiKey);
var mymailer = {};
/**
* Sends an email to either one or multiple users
* @param template_id (The id key of the template. Can be found in emailTemplates.json
* @param to String or Array
* @param from String
* @param subject String
* @param keyReplacer Array of objects for keys to replace in the template
*/
mymailer.sendTemplate = function (template_id, to, from, subject, keyReplacer, text) {
var email = new sendgrid.Email();
var templateKey = templates[template_id];
if (templateKey) {
email.setSmtpapiTos(to);
email.subject = subject;
email.from = from;
email.text = text;
email.html = '';
email.setFilters({
'templates': {
'settings': {
'enable': 1,
'template_id': templateKey
}
}
});
email.smtpapi.header.sub = createSub(keyReplacer);
sendgrid.send(email);
}
else {
console.log('incorrect key');
}
};
function createSub(keyReplacer) {
var finalObject = {};
if (keyReplacer) {
_.forEach(keyReplacer, function (value, key) {
var k = ':' + key;
finalObject[k] = [value];
})
}
return finalObject;
}
module.exports = mymailer;
However when I receive my email it is stripped from both CSS and images.
It looks like this:
I guess it's some settings I'm missing but I don't know which. Which ones can I try?
Template html
<!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" data-dnd="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]><style type="text/css">
table {border-collapse: collapse;}
table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
</style>
<![endif]-->
<style type="text/css">
body {
color: #000000;
}
body a {
color: #0071cb;
text-decoration: none;
}
p { margin: 0; padding: 0; }
table[class="wrapper"] {
width:100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img[class="max-width"] {
max-width: 100% !important;
}
@media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
}
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table[class="wrapper-mobile"] {
width: 100% !important;
table-layout: fixed;
}
img[class="max-width"] {
height: auto !important;
}
a[class="bulletproof-button"] {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
// 2 columns
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
<style>
body, p, div { font-family: arial,sans-serif; }
</style>
<style>
body, p, div { font-size: 14px; }
</style>
</head>
<body yahoofix="true" style="min-width: 100%; margin: 0; padding: 0; font-size: 14px; font-family: arial,sans-serif; color: #000000; background-color: #0071CB; color: #000000;" data-attributes='%7B%22dropped%22%3Atrue%2C%22bodybackground%22%3A%22%230071CB%22%2C%22bodyfontname%22%3A%22arial%2Csans-serif%22%2C%22bodytextcolor%22%3A%22%23000000%22%2C%22bodylinkcolor%22%3A%22%230071cb%22%2C%22bodyfontsize%22%3A14%7D'>
<center class="wrapper">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#0071CB">
<tr><td valign="top" bgcolor="#0071CB" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" role="content-container" class="outer" data-attributes='%7B%22dropped%22%3Atrue%2C%22containerpadding%22%3A%220%2C0%2C0%2C0%22%2C%22containerwidth%22%3A600%2C%22containerbackground%22%3A%22%23FFFFFF%22%7D' align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
<tr><td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#FFFFFF" width="100%" align="left">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0;" class="module preheader preheader-hide" role="module" data-type="preheader">
<tr><td role="module-content"><p></p></td></tr>
</table>
<table class="module" role="module" data-type="wysiwyg" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td role="module-content" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div><%body%></div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module wrapper" role="module" data-type="imagetext" data-attributes='%7B%22dropped%22%3Atrue%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22textbackground%22%3A%22%23ffffff%22%2C%22textmargin%22%3A%220%2C0%2C0%2C0%22%2C%22imagealignment%22%3A%22left%22%7D'>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table role="module" data-type="image" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" class="wrapper" data-attributes='%7B%22child%22%3Atrue%2C%22link%22%3A%22%22%2C%22width%22%3A%22250%22%2C%22height%22%3A%22333%22%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22url%22%3A%22https%3A//marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg%22%2C%22alt_text%22%3A%22%22%2C%22dropped%22%3Atrue%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22alignment%22%3A%22%22%2C%22responsive%22%3Afalse%7D'>
<tr>
<td style="font-size:6px;line-height:10px;background-color:#ffffff;padding: 0px 0px 0px 0px;" valign="top" align="" role="module-content">
<img class="max-width" width="250" height="333" src="https://marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg" alt="" border="0" style="display: block; color: #000; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; " />
</td>
</tr>
</table></td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="rightColumnContent" role="column-two" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div>Hello world</div> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A2%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22cellpadding%22%3A0%2C%22containerbackground%22%3A%22%22%7D'>
<tr><td style="padding: 0px 0px 0px 0px;" bgcolor="">
<table class="columns--container-table" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td style="padding: 0px 0px 0px 0px" role="column-0" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area empty">
</td><td style="padding: 0px 0px 0px 0px" role="column-1" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area ">
<table class="module" role="module" data-type="button" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22borderradius%22%3A6%2C%22buttonpadding%22%3A%2212%2C18%2C12%2C18%22%2C%22text%22%3A%22Your%20Bulletproof%20Button%22%2C%22alignment%22%3A%22center%22%2C%22fontsize%22%3A16%2C%22url%22%3A%22%22%2C%22height%22%3A%22%22%2C%22width%22%3A%22%22%2C%22containerbackground%22%3A%22%23ffffff%22%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22buttoncolor%22%3A%22%231188e6%22%2C%22textcolor%22%3A%22%23ffffff%22%2C%22bordercolor%22%3A%22%231288e5%22%7D'>
<tr>
<td style="padding: 0px 0px 0px 0px;" align="center" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile">
<tr>
<td align="center" style="-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 16px;" bgcolor="#1188e6">
<a href="" class="bulletproof-button" target="_blank" style="height: px; width: px; font-size: 16px; line-height: px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding: 12px 18px 12px 18px; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 1px solid #1288e5; display: inline-block;">Your Bulletproof Button</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module footer" role="module" data-type="footer" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A1%2C%22padding%22%3A%2210%2C5%2C10%2C5%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td style="padding: 10px 5px 10px 5px;" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="100%" height="100%" class="templateColumnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Afalse%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
This email was sent by: [Sender_Name] [Sender_Address], [Sender_City] [Sender_State] [Sender_Zip]
</div>
<div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
To unsubscribe click: <a href="[Unsubscribe]">here</a>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
</tr></td>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</td>
</table>
<![endif]-->
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</tr></td>
</table>
</div>
</center>
</body>
</html>
Solution
The problem with your code is, email clients does not support embedded css. Therefore all styles that you need must be inline with the tag. Also ugly as it might be, but the best way to layout an email template is by using tables.
However, here are some things that might help you with this problem.
TIPS
This will not work:
<style media="screen">
h1{
color: red;
}
</style>
<h1>I like turtles</h1>
This will work:
<h1 style="color:red;">I like turtles</h1>
HELPFUL SOURCES
You can read this to know more about creating email templates.
Also, there are some inliner out there that will convert your embedded css to inline css. Personally I am using Zurb's email inliner to solve this problem.
That's all I can say, I hope this will get you somewhere. Good luck :)
- Trying to make a clickable navigation bar which can be clicked to close
- How to use background with linear gradient in Tailwind css
- Anchor links to start below the header which is fixed at the top
- Keep footer at bottom of page when page height dynamically changes using CSS
- What does the media="" attribute in the stylesheet HTML definition refer to?
- HTML CSS Fit image in fixed size
- Angular viewChild native scrollable CSS window layout quirks
- Detecting if an <option> has been selected in <select> using CSS
- Applying border-radius to bootstrap 5 table
- How to increase space between dotted border dots
- use multiple css filters at the same time?
- How exactly does link rel="preload" work?
- Difficulty implementing accordion effect in Angular project
- How to center Font Awesome icons horizontally?
- How to set div's height in css and html
- How to forward scrollbar from to column in css grid
- What's wrong with this ternary operator?
- How can i replicate this corner-border-radius trick to an image in my project
- Not able to display material ui snackbar in center
- different grid area while using grid-template-column
- Why does z-index not work?
- How do I make the background image start at the top of the page and not below my sticky header?
- How can I make a color wheel using CSS (with white at center and fading to black at the rim)?
- Logic to add vertical stepper lines
- Why isn't my CSS animation-timeline: view() working?
- Why the elapsedTime property of animation event is undefined
- htmx: Selecting multiple classes in hx-trigger
- How do I move a slide with a mouse and on my phone?
- Is it possible to start the border-bottom after x amount of pixels?
- Angular Material icons not showing