Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar
SOLVED

Re: Can anyone troubleshoot Design Studio Landing Page code?

Go to solution
Anonymous
Not applicable
‎07-14-2014 01:54 PM
‎07-14-2014 01:54 PM
I've modified a Marketo template and cannot get it to work in the editor -- it doesn't allow me to drag and drop elements into it. Below is the code. Can anybody advise what the problem might be?


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- SYSTEM CSS - DO NOT EDIT -->
<link rel="stylesheet" type="text/css" media="screen" href="/css/mktLPSupport.css" />
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 
<style type="text/css">
 
#bodyId {
background:url("/rs/axiomepm/images/header-lp-blue-2.png") repeat-x center top #fff;
font-family: Arial, sans-serif;
font-size: 16px;
text-align: center;
margin: 0px;
padding: 0px;
}
 
div#outerWrapDiv {
position: relative;
height: 100%;
width: 100%;
}
 
div#innerWrapDiv {
position: relative;
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
}
 
</style>
 
<!-- START TEMPLATE CSS - EDIT THIS SECTION -->
 
<style>
/* Note: You can also change these in the specific Landing Pages*/
 
/* Width of Full Page */
 
div#innerWrapDiv {
  width: 1090px;
}
 
a:link {
color:#ffa200;
text-decoration:none;
 
}
 
a:visited {
color:#ffa200;
text-decoration:none;
 
}
 
a:active {
color:#ffa200;
text-decoration:none;
 
}
 
a:hover {
color:#ffa200;
text-decoration:none;
 
}
 
img {
border:none;
}
 
/* Main Header Area  */
div#headerWrap {
background: transparent;
width:100%;
}
 
div#mktHeader {
border-bottom:1px solid #80b6c9;
height: 60px;
margin: 0 auto;
position:relative;
width:1090px;  
}
 
#logo {
border: 0 none;
left: 0px;
position: absolute;
top: 6px;
}
 
/* Main Content Area - Controls height of page */
div#mktContent {
background: transparent;
height: 550px;
position: relative;
}
  
#graycontent {
background:#eaeaea;
height:86px;
width:100%;
position:relative;
}
 
/* Footer Area */
div#footerWrap {
 
width:100%;
}
div#mktFooter {
background: #fff;
color:#000;
font-size:12px; 
height: 50px;
margin: 0 auto;
position: relative;
width:1090px;
}
 
/* Footer links and Copyright */
 
.copyright{
color:#000;
font-size:12px; 
left: 65px;
position: absolute;
top: 20px;
}
 
.footerlinks {
right: 0px;
position: absolute;
top: 20px;
}
 
.footerlinks a {
color:#000000;
text-decoration:none;
}
 
.footerlinks a:hover {
color:#000000;
text-decoration:underline;
}
 
 
/* Required Fields Stars Fix Commented Out On Client Request ONLY */
form.lpeRegForm li.mktFormReq label {
background-image:url("/rs/marketoreferencelibrary/images/star.png")!important;
}
 
 
/*** CSS3 PIE GRADIENT BUTTON 
   Directions: Delete Fancy Button CSS and Fancy Button JS 
   optional: Obtain gradient code from: http://css3pie.com/
***/
button, input {
behavior: url("/rs/marketoreferencelibrary/images/PIE.htc");
}
 
.button, button, input[type="reset"], input[type="submit"], input[type="button"] {
background: #ffa200;
 
border:7px solid #f9bd4f;
 
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
 
color:#FFFFFF !important;
cursor:pointer;
display:inline;
font-size:16px !important;
font-weight:bold;
left:0px;
padding:12px 20px !important;
position:relative;
text-shadow:1px 1px 1px #888;
text-transform:uppercase;
top:10px;
}
 
button:hover, input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:hover {
 
}
 
#mktFrmButtons {
margin:0 auto;
text-align:center;
}
 
form.lpeRegForm label {
font-family: 'Open Sans', sans-serif !important;
}
 
form.lpeRegForm ul.mktLblAbove label {
padding-left:0 !important;
}
 
form.lpeRegForm ul.mktLblAbove li.mktFormReq label {
padding-left:10px !important;
}
 
form.lpeRegForm input[type="text"], form.lpeRegForm select, form.lpeRegForm  textarea {
border: 1px solid #D9D8D9;
border-radius: 3px 3px 3px 3px;
color: #000000;
font-family: 'Open Sans', sans-serif !important;
font-size: 12px;
padding: 5px;
width:95% !important;
}
 
</style>
 
<!-- END TEMPLATE CSS -->
 
  <!--[if lt IE 7]>
 
<style>
img.png { behavior: url(/js/public/iepngfix.htc) }
</style>
 
  <![endif]-->
  
<!-- SYSTEM JAVASCRIPT - DO NOT EDIT -->
   <script>
    // to make fancy buttons.  Uses noConflict just in case
     var $jQ = jQuery.noConflict();
 
     // Use jQuery via $j(...)
     $jQ(document).ready(function(){
 
       /*$jQ('input[id=mktFrmSubmit]').wrap("<div class='buttonSubmit'></div>");
       $jQ(".buttonSubmit").prepend("<span></span>");*/
 
     });
   </script>
 
<!-- SYSTEM INCLUDES - DO NOT EDIT -->
<link rel="stylesheet" type="text/css" media="screen" href="/css/mktLPSupport.css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
DIV#mktContent{height: 750px; }
DIV#mktHeader{height: 60px; }</style><meta name="robots" content="index, nofollow" />
<style type="text/css"> div#lpeCDiv_3490 {position: absolute; left: 609px; top: 311px; width: 365px; z-index: 15; }
   div#lpeCDiv_3490 span.lpContentsItem { }
 
 div#lpeCDiv_3491 {position: absolute; height: 1px; left: 577px; top: 226px; width: 424px; z-index: 10; }
   div#lpeCDiv_3491 div.lpContentsItem { height: 1px; width: 424px; background-color: #0e5466; border-style: solid; border-width: 0; border-color: forestgreen; }
 
 div#lpeCDiv_3492 {position: absolute; left: 533px; top: 165px; width: 513px; z-index: 15; height: 46px; }
   div#lpeCDiv_3492 span.lpContentsItem { }
 
 div#lpeCDiv_3493 {position: absolute; height: 1px; left: 578px; top: 150px; width: 423px; z-index: 10; }
   div#lpeCDiv_3493 div.lpContentsItem { height: 1px; width: 423px; background-color: #0e5466; border-style: forestgreen; border-width: 0; border-color: #0e5466; }
 
 div#lpeCDiv_3494 {position: absolute; left: 596px; top: 16px; width: 381px; z-index: 15; }
   div#lpeCDiv_3494 span.lpContentsItem { }
 
 div#lpeCDiv_3495 {position: absolute; left: 526px; top: 80px; width: 506px; z-index: 15; }
   div#lpeCDiv_3495 span.lpContentsItem { }
 
 div#lpeCDiv_3496 {position: absolute; left: 53px; top: 509px; width: 1005px; z-index: 15; }
   div#lpeCDiv_3496 span.lpContentsItem { }
 
 div#lpeCDiv_3497 {position: absolute; left: 54px; top: 424px; width: 981px; z-index: 15; }
   div#lpeCDiv_3497 span.lpContentsItem { }
 
 div#lpeCDiv_3498 {position: absolute; left: 54px; top: 567px; width: 551px; z-index: 15; }
   div#lpeCDiv_3498 span.lpContentsItem { }
 
 div#lpeCDiv_3499 {position: absolute; left: 618px; top: 566px; width: 526px; z-index: 15; }
   div#lpeCDiv_3499 span.lpContentsItem { }
 
 div#lpeCDiv_3500 {position: absolute; left: 803px; top: -43px; width: 290px; z-index: 15; }
   div#lpeCDiv_3500 span.lpContentsItem { }
 
 div#lpeCDiv_3501 {position: absolute; height: 42px; width: 186px; z-index: 15; left: 0px; top: -55px; }
 div#lpeCDiv_3501 span.lpContentsItem img.lpimg{width:100%; height:100%; }
  div#lpeCDiv_3501 span.lpContentsItem { }
 
 div#lpeCDiv_3502 {position: absolute; height: 397px; width: 461px; z-index: 15; left: 5px; top: 21px; }
 div#lpeCDiv_3502 span.lpContentsItem img.lpimg{width:100%; height:100%; }
  div#lpeCDiv_3502 span.lpContentsItem { }
 
 div#lpeCDiv_3503 {position: absolute; height: 74px; width: 973px; z-index: 15; left: 64px; top: 756px; }
 div#lpeCDiv_3503 span.lpContentsItem img.lpimg{width:100%; height:100%; }
  div#lpeCDiv_3503 span.lpContentsItem { }
 
 div#lpeCDiv_3504 {position: absolute; left: -2px; top: 836px; width: 420px; z-index: 15; height: 28px; }
   div#lpeCDiv_3504 span.lpContentsItem { }
 
 div#lpeCDiv_3505 {position: absolute; height: 27px; width: 30px; z-index: 15; left: 894px; top: 850px; }
 div#lpeCDiv_3505 span.lpContentsItem img.lpimg{width:100%; height:100%; }
  div#lpeCDiv_3505 span.lpContentsItem { }
 
 div#lpeCDiv_3506 {position: absolute; height: 27px; width: 30px; z-index: 15; left: 928px; top: 850px; }
 div#lpeCDiv_3506 span.lpContentsItem img.lpimg{width:100%; height:100%; }
  div#lpeCDiv_3506 span.lpContentsItem { }
 
 div#lpeCDiv_3507 {position: absolute; height: 27px; width: 30px; z-index: 15; left: 962px; top: 850px; }
 div#lpeCDiv_3507 span.lpContentsItem img.lpimg{width:100%; height:100%; }
  div#lpeCDiv_3507 span.lpContentsItem { }
 
 div#lpeCDiv_3508 {position: absolute; height: 27px; width: 30px; z-index: 15; left: 996px; top: 850px; }
 div#lpeCDiv_3508 span.lpContentsItem img.lpimg{width:100%; height:100%; }
  div#lpeCDiv_3508 span.lpContentsItem { }
 
</style>
<style type="text/css"> .marketoContent {position: relative;} </style>
 
</head>
<body id="bodyId" class="mktEditable" align="center" >
<div id="outerWrapDiv" class="mktEditable">
<div id="headerWrap">
<div id="mktHeader" class="mktEditable">
  <!-- Logo and Header -->
<div id="logo" class="mktEditable">
<img src="/rs/axiomepm/images/ax-kauf-orange-white.png" />
  </div>
</div>
</div>
 
 
 
 
<div id="innerWrapDiv" class="mktEditable">
 
<div id='lpeCDiv_3491' class='lpeCElement Rectangle_1'><div class='lpContentsItem boxSpan'></div></div>
 
<div id='lpeCDiv_3493' class='lpeCElement Rectangle_2'><div class='lpContentsItem boxSpan'></div></div>
<div id='lpeCDiv_3505' class='lpeCElement Image_6'><span class='lpContentsItem imageSpan'><img class="lpimg" src="/rs/marketoreferencelibrary/images/c8soc1.jpg" /></span></div>
<div id='lpeCDiv_3506' class='lpeCElement Image_7'><span class='lpContentsItem imageSpan'><img class="lpimg" src="/rs/marketoreferencelibrary/images/c8soc2.jpg" /></span></div>
<div id='lpeCDiv_3507' class='lpeCElement Image_8'><span class='lpContentsItem imageSpan'><img class="lpimg" src="/rs/marketoreferencelibrary/images/c8soc3.jpg" /></span></div>
<div id='lpeCDiv_3508' class='lpeCElement Image_9'><span class='lpContentsItem imageSpan'><img class="lpimg" src="/rs/marketoreferencelibrary/images/c8soc4.jpg" /></span></div>
 
<!-- START TEMPLATE HTML - EDIT THIS SECTION -->
 
<div id="mktContent" class="mktEditable">
<!-- Base of Landing Page Content -->
 
</div>
 
<!-- END TEMPLATE HTML -->
 
<!-- SYSTEM FOOTER - DO NOT EDIT -->
</div>
<div id="graycontent" class="mktEditable"></div>
<div id="footerWrap">
<div id="mktFooter" class="mktEditable">
 
<div class="copyright">&copy; Axiom EPM</div>
<div class="footerlinks">
</div>
 
</div>
</div>
 
</div>
<script type="text/javascript" src="//munchkin.marketo.net//munchkin.js"></script><script>Munchkin.init('878-PHB-880', {customName: 'LP_Theory_v1', wsInfo: 'j1RR'});</script>
 
<!-- GOOGLE ANALYTICS.  ENTER YOUR CODE and UNCOMMENT block -->
 <!--
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "YOURCODE";
urchinTracker();
</script>
-->
 
 
</body>
</html>
 
Labels:
Tags (1)
0 Likes
1,954
Reply
1 ACCEPTED SOLUTION
Anonymous
Not applicable
‎07-14-2014 02:26 PM
‎07-14-2014 02:26 PM
Looks like you pasted the rendered content of the page...Marketo has very specific requirements for landing page template code. I have tried to fix it the best I can here: http://pastebin.com/3vmW0nqa.

If you need additional help beyond the forum, shoot me a message on LinkedIn 🙂

View solution in original post

1,762
Reply
4 REPLIES 4
Anonymous
Not applicable
‎07-14-2014 02:46 PM
‎07-14-2014 02:46 PM
Start from the blank template and begin buidling from there...this (along with email templates) is the one part of Marketo where having someone who knows code can be a big help.
0 Likes
1,762
Reply
Anonymous
Not applicable
‎07-14-2014 02:35 PM
‎07-14-2014 02:35 PM
Thank you so much! You're right about using the rendered content. I did that to avoid how Marketo automatically creates a program and a bunch of extraneous design studio template pages when you download templates from their site. Any way around this, I wonder?

Thanks you SO MUCH again!
0 Likes
1,762
Reply
Anonymous
Not applicable
‎07-14-2014 02:26 PM
‎07-14-2014 02:26 PM
Looks like you pasted the rendered content of the page...Marketo has very specific requirements for landing page template code. I have tried to fix it the best I can here: http://pastebin.com/3vmW0nqa.

If you need additional help beyond the forum, shoot me a message on LinkedIn 🙂
1,763
Reply
Anonymous
Not applicable
‎07-14-2014 02:10 PM
‎07-14-2014 02:10 PM
Did you edit the template outside of design studio? 

I had major issues when my designer put them into dreamweaver, then back into Marketo. Although I can't troubleshoot this code for you (sorry!) your best bet is to always edit the code within the design studio. Hope that helps a little!
0 Likes
1,762
Reply
Home