So when you convert a template to an email, the code locks, and only content blocks such as code snippets remain editable. As such my core variables like brand, environment, template_name in a white-labeled project are declared in a code snippet inside of a content area; inside the HTML. The problem is that above in the CSS, I want to run amp script to edit a color and font based on the brand and environment values. However, since the amp script in the CSS executes before those two values are defined; the variables for the CSS are empty. Moving the AMPscript out of the content area and above the HTML tags will lock it from being edited in the template phase.
Edit:
Sample four (4) content area template.
- data-type="slot" data-key="template_amp_script"
- data-type="slot" data-key="template_header"
- data-type="slot" data-key="template_content"
- data-type="slot" data-key="template_footer"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name="description" content="A page's description, usually one or two sentences. 155 characters" >
<title>
55-60 characters
</title>
<style type="text/css">
ReadMsgBody{
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
body {
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0 !important;
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
}
img {
outline:0;
}
a img {
border:none;
}
@-ms-viewport{
width: device-width;
}
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
.container {
width: 100% !important;
}
.footer {
width:auto !important;
margin-left:0;
}
.mobile-hidden {
display:none !important;
}
.logo {
display:block !important;
padding:0 !important;
}
img {
max-width:100% !important;
height:auto !important;
max-height:auto !important;
}
.template-header img{
max-width:100% !important;
height:auto !important;
max-height:auto !important;
}
.template-body img{
max-width:100% !important;
height:auto !important;
max-height:auto !important;
}
.template-footer img{
max-width:100% !important;
height:auto !important;
max-height:auto !important;
}
.photo img {
width:100% !important;
max-width:100% !important;
height:auto !important;
}
.drop {
display:block !important;
width: 100% !important;
float:left;
clear:both;
}
.footerlogo {
display:block !important;
width: 100% !important;
padding-top:15px;
float:left;
clear:both;
}
.nav4, .nav5, .nav6 {
display: none !important;
}
.tableBlock {
width:100% !important;
}
.responsive-td {
width:100% !important;
display:block !important;
padding:0 !important;
}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body {
padding: 0px !important;
font-size: 16px !important;
line-height: 150% !important;
}
h1 {
font-size: 22px !important;
line-height: normal !important;
}
h2 {
font-size: 20px !important;
line-height: normal !important;
}
h3 {
font-size: 18px !important;
line-height: normal !important;
}
.buttonstyles {
font-family:arial,helvetica,sans-serif !important;
font-size: 16px !important;
color: #FFFFFF !important;
padding: 10px !important;
}
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
}
@media only screen and (max-width: 640px) {
.container {
width:100% !important;
}
.mobile-hidden {
display:none !important;
}
.logo {
display:block !important;
padding:0 !important;
}
.photo img {
width:100% !important;
height:auto !important;
}
.nav5, .nav6 {
display: none !important;
}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style>
<!--[if mso]>
<style type="text/css">
/* Begin Outlook Font Fix */
body, table, td {
font-family: Arial, Helvetica, sans-serif ;
font-size:16px;
color:#000000;
line-height:1;
}
/* End Outlook Font Fix */
</style>
<![endif]-->
</head>
<body bgcolor="#ffffff" text="#000000" style="background-color: #ffffff; color: #000000; padding: 0px; -webkit-text-size-adjust:none; font-size: 16px; font-family:arial,helvetica,sans-serif;">
<div style="font-size:0; line-height:0;">
<custom name="opencounter" type="tracking">
<custom name="usermatch" type="tracking" />
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" valign="top">
<custom type="header"/>
</td>
</tr>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="600" class="container" align="center">
<tr>
<td>
<table class="tb_properties border_style" style="background-color:#FFFFFF;" cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="100%">
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- added padding here -->
<td class="content_padding" style="">
<!-- end of comment -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- AMP SCRIPT // -->
<tr>
<td align="center" valign="top">
<!-- NO CLASS NEEDED SINCE WILL NOT DISPLAY -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table cellspacing="0" cellpadding="0" style="width:100%">
<tbody>
<tr>
<td class="responsive-td" valign="top" style="width: 100%;">
<div data-type="slot" data-key="amp_script" data-max-blocks="1" data-allowed-blocks="codesnippetblock" data-label="Custom AMP Script Content Area">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // AMP SCRIPT -->
<!-- HEADER // -->
<tr>
<td align="center" class="template-header" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table cellspacing="0" cellpadding="0" style="width:100%">
<tbody>
<tr>
<td class="responsive-td" valign="top" style="width: 100%;">
<div data-type="slot" data-key="header" data-label="Custom Header Content Area">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // HEADER -->
<!-- BODY // -->
<tr>
<td align="center" class="template-body" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table cellspacing="0" cellpadding="0" style="width:100%">
<tbody>
<tr>
<td class="responsive-td" valign="top" style="width: 100%;">
<div data-type="slot" data-key="body" data-label="Custom Body Content Area">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // BODY -->
<!-- FOOTER // -->
<tr>
<td align="center" class="template-footer" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table cellspacing="0" cellpadding="0" style="width:100%">
<tbody>
<tr>
<td class="responsive-td" valign="top" style="width: 100%;">
<div data-type="slot" data-key="footer" data-label="Custom Footer Content Area">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- // FOOTER -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<custom type="footer" />
</td>
</tr>
</table>
</body>
</html>
Has anyone else run into this issue and come up with an elegant solution? Also does AMPscript execute top down before the html or?
<html>tag or in the<head>section if you want.<body>. At least from what my understanding is of content areas; i hope i didn't misunderstand. Can you please elaborate on how i can add an editable slot or content area before the<html>or<head>sections if it's not too much trouble. Since i thought that content area's were defined bydivelements. Thanks Adam.divoutside thehtmltag, learn something new every day. Thanks a lot. If you want to submit it as the answer; i'll gladly select it.