2

We are trying to convert some of our Classic email templates to Lightning email templates, but when we try to save our custom HTML into the source, we are receiving the following errors. The content is fully functional in Classic, and I'm unable to find documentation to explain the errors, or how to work around them (if possible). Please advise?

The element "head" is not allowed.

The element "meta" is not allowed.

The element "title" is not allowed.

The element "style" is not allowed.

The attribute "topmargin" on the element "body" is not allowed, or has a value that is not allowed.

Thoughts?

Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0">    <!-- So that mobile webkit will display zoomed in -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->

<title>Email Header</title>
<style type="text/css">   
    #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
    /* Resets: see reset.css for details */
    .ReadMsgBody { width: 100%; background-color: #ebebeb;}
    .ExternalClass {width: 100%; background-color: #ebebeb;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
    body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
    body {margin:0; padding:0;}
    table {border-spacing:0;}
    table td {border-collapse:separate;}
     /*table.container{border:1px solid #dddddd;}*/ /* Remove star and slash from either side to add border*/
    .yshortcuts a {border-bottom: none !important;}

    .h1{
        color:#3CB6CE;
        font-family:Arial;
        font-size:22pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }

    .h2{
        color:#3CB6CE;
        font-family:Arial;
        font-size:20pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }

    .h3{
        color:#22505F;
        font-family:Arial;
        font-size:14pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }

    .h4{
        color:#22505F;
        font-family:Arial;
        font-size:12pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }
    .h6{
        color:#22505F;
        font-family:Arial;
        font-size:10pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }
    .container-padding{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom:10px;
        background-color: #ffffff; 
        font-size: 10pt; 
        line-height: 140%!important; 
        font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif; 
        color: #333;
    }

    .container-padding a, .col a{
        color:#22505F;
        font-weight: normal;
        text-decoration: underline;
    }

    .col{
        background-color: #ffffff; 
        line-height:140%!important; 
        font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif; 
        color: #333;
        font-size: 10pt; 
    }

    sub, sup{
        line-height:70%!important;
    }

    #main{
        padding-right: 10px;
        font-size: 10pt;
    }

    #sidebar{
        padding-left:10px;
        font-size: 9pt;
    }

    #footer{
        font-size:10px;
        font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif; 
        padding-top: 10px;
        padding-bottom: 10px;
        background-color:#F2F2F2;
        text-align: left;
    }

    #footer a{
        color:#333;
        font-weight: normal;
        text-decoration: underline;
    }

    img[class=header-image]{
        max-width:600px;
        width:100%;
        height:auto;
    }
.auto-style1 {
    text-align: left;
}
.auto-style2 {
    text-align: center;
}
</style>
</head>
<body style="margin:0; padding:10px 0;" bgcolor="#ebebeb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
</body>
</html>
0

Those tags you mentioned were not allowed, but they are now, with the Winter '20 release. http://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_sales_productivity_email_templates_full_mode.htm

1
  • While this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – identigral Mar 10 '20 at 3:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.