SOLVED
I'm working on a new email template and I'm trying to figure out if I've messed up my global variable or if I need to log a support ticket.
We want a global variable for the email background color so I created the variable Email Background Color and have reference it on line 207 to set the color. However, when we open the email in the editor it is not showing up as a global variable. I've got my code below if anyone has any suggestions on what may be happening.
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Marketo Variable Definitions -->
<meta class="mktoColor" id="emailBackground" mktoname="Email Background Color" default="#000000" mktomodulescope="true">
<meta class="mktoImg" id="heroBackgroundImage" mktoname="Background Image" default="http://go.schedulinginstitute.com/rs/090-EZX-133/images/tie-dye-background.jpg" mktomodulescope="true">
<meta class="mktoColor" id="heroBackgroundColor" mktoname="Module Background" default="#ffffff" mktomodulescope="true">
<meta class="mktoNumber" id="bgBannerHeight" mktoname="Banner Height" default="150" min="0" max="" units="px" step="1" mktomodulescope="true">
<meta class="mktoColor" id="2SectionBGColor" mktoname="Module Background" default="#000000" mktomodulescope="true">
<meta class="mktoImg" id="footerBackgroundImage" mktoname="Background Image" default="http://go.schedulinginstitute.com/rs/090-EZX-133/images/tie-dye-background.jpg" mktomodulescope="true">
<meta class="mktoColor" id="footerBackgroundColor" mktoname="Module Background" default="#000000" mktomodulescope="true">
<meta class="mktoColor" id="mainCTAColor" mktoname="CTA Color" default="#b79a41" mktomodulescope="true">
<meta class="mktoColor" id="linkCTAColor" mktoname="CTA LINK Color" default="#ffffff" mktomodulescope="true">
<meta class="mktoColor" id="textBackgroundColor" mktoname="Module Background" default="#000000" mktomodulescope="true">
<meta class="mktoColor" id="emailBackgroundColor" mktoname="Background Color" default="#000000" mktomodulescope="true">
<meta charset="utf-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting">
<!-- Disable auto-scale in iOS 10 Mail entirely -->
<meta class="mktoString" id="EmailTitle" mktoname="Email Title" default="scheduling institute">
<title>Scheduling Institute</title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<meta class="mktoString" id="PreviewText" mktoname="Preview Text" default="scheduling institute">
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokesf on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */ .x-gmail-data-detectors, /* Gmail */ .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display: none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 600px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
/*display: block !important;*/
width: 100% !important;
max-width: 100% !important;
direction: !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: left !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
/*.email-container p {
font-size: 17px !important;
line-height: 22px !important;
}*/
}
</style>
<!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body width="100%" style="margin: 0; mso-line-height-rule: exactly;font-family: Arial, Helvetica, sans-serif; color: #000000;">
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="outer" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; min-width: 600px; border-collapse: collapse; background-color:${emailBackground};">
<div style="max-width: 600px; margin: auto;" class="email-container">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;" class="mktoContainer email-container" id="emailBody">
<tr class="mktoModule" id="emptyspacer1" mktoname="Spacer Module1">
<td aria-hidden="true" height="30" style="font-size: 0; line-height: 0;" bgcolor="${emailBackgroundColor}"> </td>
</tr>
<tr class="mktoModule" id="headerbanner" mktoname="Banner Module" bgcolor="#ffffff">
<td bgcolor="#ffffff">
<div bgcolor="#ffffff" class="mktoImg" id="bannerimage" mktoName="Banner Image" style="text-align: center;">
<img src="http://go.schedulinginstitute.com/rs/090-EZX-133/images/CF branding.png" width="600" height="" alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="fluid g-img">
</div>
</td>
</tr>
<tr class="mktoModule" id="coutndownbanner" mktoname="Countdown Module" style="background-color: ${heroBackgroundColor}; text-align: center;">
<td>
<div bgcolor="#ffffff" class="mktoImg" id="countdownimage" mktoname="Countdown Image" mktolockimgsize="true" style="margin: 25px;">
<img src="http://i.countdownmail.com/5anjw.gif" width="300" height="auto" border="0" align="center" style="width: 100%; max-width: 300px; height: auto; background: ${heroBackgroundColor}; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="fluid g-img">
</div> </td>
</tr>
<tr class="mktoModule" id="mainmod" mktoname="Main Module" role="presentation">
<td bgcolor="#ffffff">
<div bgcolor="${heroBackgroundColor}" class="mktoImg" id="image" mktoname="Image" mktolockimgsize="true" style="text-align: center;">
<img src="http://go.schedulinginstitute.com/rs/090-EZX-133/images/got culture%3F.png" width="600" height="auto" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: ${heroBackgroundColor}; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;" class="fluid g-img">
</div>
<div class="mktoText" id="main_para" style="margin: 15px 20px;" mktoname="Main Paragraph">
<span style="font-family:Helvetica, Arial, sans-serif; font-size:14px; line-height:19px; color:#555555;"> Lorem ipsum dolor sit amet, suscipit ut sagittis sollicitudin suscipit elit, sed ornare et massa quis eros, fusce sollicitudin posuere, sollicitudin wisi pellentesque augue, quam nulla.<br><br> Lorem ipsum dolor sit amet, suscipit ut sagittis sollicitudin suscipit elit, sed ornare et massa quis eros, fusce sollicitudin posuere, sollicitudin wisi pellentesque augue, quam nulla. <br><br><strong>You'll Learn:</strong>
<ul style="font-family:Helvetica, Arial, sans-serif; font-size:14px; line-height:19px; color:#555555;">
<li>Bullet 1</li>
<li>Bullet 2</li>
<li>Bullet 3</li>
<li>Bullet 4</li>
</ul> Get more information about the author. </span>
</div>
</td>
</tr>
<tr class="mktoModule" id="Testimonial-Module" mktoname="Testimonial Module" style="max-width: 600px; width: 100%; background-color: #ffffff;">
<td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
<tbody>
<tr>
<td align="center" valign="top" style="font-size:0; padding-left: 20px; padding-right: 20px;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="580">
<tr>
<td align="left" valign="top" width="183">
<![endif]-->
<div style="display: inline-block; max-width: 29.49%; vertical-align: top; width: 100%; padding-right: 20px;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px; text-align: left;">
<tbody>
<tr>
<td style="font-family:Helvetica, Arial, sans-serif; color:#000000; padding: 20px 0 0 0; text-align: center;" class="stack-column-center email-container p">
<div class="mktoImg" id="Image" style="margin: auto; max-width: 180px; text-align: center;" mktoname="Image" mktolockimgsize="true">
<img width="172" height="172" style="text-align: center; width: 100%; height: auto;" src="https://via.placeholder.com/172x172.png">
</div> </td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="372">
<![endif]-->
<div style="display: inline-block; margin: auto; max-width: 66.49%; min-width: 259px; vertical-align: top; width: 100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td align="left" style="padding: 20px 0 0 0; font-family:Helvetica, Arial, sans-serif; font-size:14px; line-height:19px; color:#333; text-align: center;">
<div class="mktoText" id="testimonial-header" mktoname="Header">
<div style="font-family:Helvetica, Arial, sans-serif; font-size: 18px; color: #b79a41; padding: 0px 10px 10px 0; text-align: left;">
Lorem ipsum dolor sit
</div>
</div>
<div class="mktoText" id="paragraph-5-membership" style="" mktoname="Body Text">
<div style="font-family:Helvetica, Arial, sans-serif; font-size: 14px; color: #555555; padding: 0 10px 0 0; text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div> </td>
</tr>
</tbody>
</table>
</div>
<div style="height: 20px;" height="20">
</div> </td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr class="mktoModule" id="emptyspacer" mktoname="Spacer">
<td aria-hidden="true" height="30" style="font-size: 0; line-height: 0;" bgcolor="${emailBackgroundColor}"> </td>
</tr>
<tr class="mktoModule" id="footerModule" mktoname="Footer Module" style="text-align: center; background-repeat: no-repeat; background-position: center center; background:${footerBackgroundImage}; background-color:${footerBackgroundColor}; background-image:${footerBackgroundImage}; width: 100%; max-width: 600px;" background="${footerBackgroundImage}" bgcolor="${footerBackgroundColor}" valign="middle">
<td>
<div style="height: 30px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" height="20">
</div>
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
<tbody>
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if mso]>
<td align="left" valign="top" width="600">
<![endif]-->
<div>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px; width: 100%; height: auto;">
<tbody>
<tr>
<div class="mktoText" id="footer_text" mktoname="Footer Text" style="font-family: Helvetica, Arial, sans-serif; font-size: 25px; line-height: 30px; color:#ffffff; text-align: center; margin: 10px 20px;">
<strong>STAY IN THE KNOW BY VISITING THE OFFICIAL EVENT SITE!!</strong>
</div>
</tr>
</tbody>
</table>
</div>
<div style="height: 20px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" height="20">
</div>
<div>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 350px;">
<tbody>
<tr>
<td dir="ltr" style="padding: 0px; width: 75px; vertical-align: bottom;"></td>
<td align="center" bgcolor="${mainCTAColor}" height="25" style="font-family:Helvetica, Arial, sans-serif; font-size: 14px; line-height:15px; background-color: ${mainCTAColor}; color: ${linkCTAColor}; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; mso-line-height-rule:exactly; padding:0px 0 0 0;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 20px; max-width: 300px; width: 100%;" valign="center" width="250">
<div class="mktoText" id="button-cta" mktoname="button cta" style="">
<a href="siculturefest.com" style="text-decoration: none; color: ${linkCTAColor};" target="_blank">ACCESS EVENT SITE</a>
</div> </td>
<td dir="ltr" style="padding: 0px; width: 75px; vertical-align: bottom;"></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
<![endif]-->
<div style="height: 20px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" height="20">
</div>
<!--[if mso]>
</td>
</tr>
<![endif]-->
<div style="height: 20px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" height="20">
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr class="mktoModule" id="CopyrightMod" mktoname="Copyright Module">
<td bgcolor="${textBackgroundColor}" align="left" height="100%" valign="top" width="100%" style="padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="left" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;" bgcolor="${textBackgroundColor}">
<tbody>
<tr>
<td align="left" valign="top" style="font-size:0;">
<div style="display:inline-block; margin: 0 -2px; max-width:20px; min-width:20px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="600">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td style="padding: 10px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: center;">
<tbody>
<tr>
<td style="text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<!-- Links -->
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size:10px; font-family:arial, sans-serif; padding:0 20px; text-align: left;">
<div class="mktoSnippet" id="emailFooter" mktoname="Email Footer">
<p style="font-size: 12px; margin: 0;"><span style="color: #ffffff;">© {{my.Universal - Misc_Year}} All rights reserved.</span><br></p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</table>
<!-- Email Body : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
1 ACCEPTED SOLUTION
Accepted Solutions
.png)