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

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

Can anyone troubleshoot Design Studio Landing Page code?

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,446
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable
‎07-14-2014 02:26 PM
‎07-14-2014 02:26 PM

Re: Can anyone troubleshoot Design Studio Landing Page code?

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,254
Reply
4 REPLIES 4
Anonymous
Not applicable
‎07-14-2014 02:10 PM
‎07-14-2014 02:10 PM

Re: Can anyone troubleshoot Design Studio Landing Page code?

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,254
Reply
Anonymous
Not applicable
‎07-14-2014 02:26 PM
‎07-14-2014 02:26 PM

Re: Can anyone troubleshoot Design Studio Landing Page code?

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,255
Reply
Anonymous
Not applicable
‎07-14-2014 02:35 PM
‎07-14-2014 02:35 PM

Re: Can anyone troubleshoot Design Studio Landing Page code?

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,254
Reply
Anonymous
Not applicable
‎07-14-2014 02:46 PM
‎07-14-2014 02:46 PM

Re: Can anyone troubleshoot Design Studio Landing Page code?

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,254
Reply
Home