Sendgrid Vorlage CSS ist

ich habe ignoriert verwendet sendgrid die folgende Vorlage zu machen:Sendgrid Vorlage CSS ist

Um dies zu senden mein Knoten-Server mit i das folgende Modul erstellt haben:

/** 
* 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;

jedoch, wenn Ich erhalte meine E-Mail, die sowohl von CSS als auch von Bildern entfernt wurde.

Es sieht wie folgt aus:

Ich denke, seine einige Einstellungen im, fehlt aber ich weiß nicht, welche. Kann mir jemand helfen?

Vorlage 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>&lt;%body%&gt;</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>

Quelle

2016-06-15 Marc Rasmussen

Können Sie uns Ihren Code für HTML und CSS zeigen? – CENT1PEDE

JSYK-E-Mail-Clients lesen keine separate CSS-Datei, sie muss inline CSS sein. – CENT1PEDE

@TheGreenFoxx Ive hinzugefügt die html –

Das Problem mit Ihrem Code ist, E-Mail-Clients unterstützt keine eingebetteten CSS. Daher müssen alle von Ihnen benötigten Stile mit dem Tag verknüpft sein. So hässlich es auch sein mag, aber die beste Möglichkeit, eine E-Mail-Vorlage zu erstellen, ist die Verwendung von Tabellen.

Allerdings sind hier einige Dinge, die Ihnen bei diesem Problem helfen können.

TIPS

Das wird nicht funktionieren:

<style media="screen"> 
    h1{ 
     color: red; 
    } 
</style> 

<h1>I like turtles</h1>

Diese Arbeit wird:

<h1 style="color:red;">I like turtles</h1>

HELPFUL QUELLEN

Sie können diese lesen wissen mehr zum Erstellen von E-Mail-Vorlagen.

Auch gibt es einige Inliner gibt, die Embedded CSS konvertiert CSS inline. Persönlich verwende ich Zurb's email inliner, um dieses Problem zu lösen.

Das ist alles, was ich sagen kann, ich hoffe, das wird dich irgendwo hinbringen. Viel Glück :)

Quelle

2016-06-15 12:04:03 CENT1PEDE

Kann ich fragen, warum sendgrids builder macht das css so dass? Wenn Sie wissen, natürlich :) –

Es ist nicht der Send Grid Builder, der das tut, es ist der E-Mail-Client selbst :) @MarcRasmussen – CENT1PEDE

Aber mit dem Builder erstellt er die oben genannten HTML –

Sendgrid Vorlage CSS ist

Antwort

Verwandte Themen