Very newbie - can't get my layouts to appear in the 'Add New' dropdown

Hi everyone,

I'm new to Campaign Monitor and also pretty rusty as far as HTML is concerned, but the issue I'm having is that the layouts defined within my <repeater> tags don't appear in the 'Add New' dropdown. In fact, the whole edit bar is greyed out and unresponsive.

I've tried to build this template from the ground up because I was asked for specific items which I couldn't find in any of the predefined templates - particularly the table of contents had to be attached to the hero article.

I'd really appreciate any help that you could give, and any pointers to good Campaign Monitor tutorials. My code follows - thank you very much in advance.

Regards,

Malcolm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Tables 2</title>
<style>
body {
    background-color: #dedede;
    margin: 0;
    padding: 0;
}
body, td {
    font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
}
.article-title {
    font-size: 18px;
    line-height: 24px;
    color: #d71920;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 18px;
    font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
}
.article-content {
    font-size: 13px;
    line-height: 18px;
    color: #444444;
    margin-top: 0px;
    margin-bottom: 18px;
    font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
}
.header-content {
    font-size: 14px;
    color: #000000;
}
#sidebar .toc-heading {
    font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    font-size: 11px;
    line-height: 15px;
    color: #777777;
    font-weight: bold;
}
#sidebar .toc-item {
    font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #d71920;
    margin-top: 0px;
    margin-bottom: 6px;
}
#sidebar .toc-item a {
    color: #2f82de;
    text-decoration: none;
}
#sidebar .toc-heading a {
    color: #777777;
    text-decoration: none;
}
#sidebar .left-column-heading {
    font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    font-size: 11px;
    line-height: 15px;
    color: #777777;
    font-weight: bold;
}
#sidebar .left-column-heading a {
    color: #777777;
    text-decoration: none;
}
#sidebar .left-column-subhead {
    font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    font-size: 13px;
    line-height: 16px;
    color: #b0b0b0;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 16px;
}
#sidebar .left-column-subhead a {
    color: #b0b0b0;
    text-decoration: none;
}
#sidebar .left-column-content {
    font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #7a7a7a;
    margin-top: 0px;
    margin-bottom: 16px;
}
#sidebar .left-column-content a {
    color: #2f82de;
    text-decoration: none;
}
</style>
</head>
<body style="margin:0; padding:0">
<!--avoids unexpected space--> 
<!--container table - 
-->
<table width="100%" cellpadding="0" cellspacing="0">
    <td><!--    Place a centered table of 600 pixels wide inside the container table. 600 pixels is a safe maximum width for your emails to display comfortably within most desktop and webmail clients on most screen resolutions.

Set this width using HTML instead of CSS, by using the width attribute. The golden rule in HTML email development is: if an attribute exists in HTML, use that instead of CSS.
--> 
      
      <!--Add an inline style property that sets the border-collapse property to collapse, otherwise newer versions of Outlook will add a small space between the table and the border.--> 
      
      <!--the enclosing table for the email content
-->
      
      <table id="container" align="center" cellpadding="0" cellspacing="0" width="640px" style="border-collapse:collapse">
        
          <td id="header" align="center" bgcolor="#FFFFFF"><img src="images/header.png" width="600" height="123" alt="Western Mailing Ltd"/></td>
          <!--          <table>
          <td bgcolor="#70eed9">Navbar row</td></table>
--> 
          <!--Navbar table
-->
          <table id="top-bar" align="center" width="640px" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
            
              <td align="right"><div class="header-content">
                  <home><a href="http://www.wm.co.nz">Home</a></home>
                  &nbsp;&nbsp;
                  <services><a href="http://www.wm.co.nz/dm-promotional-mail/">Services</a></services>
                  &nbsp;&nbsp;
                  <about><a href="http://www.wm.co.nz/our-story/">About</a></about>
                  &nbsp;&nbsp;
                  <news><a href="http://www.wm.co.nz/news/">News</a></news>
                  &nbsp;&nbsp;
                  <contact><a href="http://www.wm.co.nz/contact/">Contact</a></contact>
                </div></td>
              <td style="font-size:0; line-height:0; width:20px">&nbsp;</td>
          </table>
          <!--          Hero article and table of contents column table
-->
              <table id="hero-and-contents" width="640px" align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
                
                  <td style="font-size:0; line-height:0; width:20px">&nbsp;</td>
                  <td id="hero" width="430px" bgcolor="#63C7FF" style="padding:10px"><p align="left" class="article-title">
                      <singleline repeatertitle="true" label="Article Title">Hero article title</singleline>
                    </p>
                    <div align="left" class="article-content">
                      <multiline label="Description">Enter your description</multiline>
                    </div></td>
                  <td style="font-size:0; line-height:0; width:30px">&nbsp;</td>
                  <td id="sidebar" width="140px" bgcolor="#A3DCD2" style="padding:10px"><p align="left" class="toc-heading">
                      <singleline>TABLE OF CONTENTS</singleline>
                    </p>
                    <tableofcontents>
                      <table cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                          <tr>
                            <td width="3"></td>
                            <td valign="top"><p align="left" class="toc-item">•</p></td>
                            <td width="6"></td>
                            <td valign="top"><p align="left" class="toc-item">
                                <repeatertitle>
                              </p></td>
                          </tr>
                        </tbody>
                      </table>
                    </tableofcontents></td>
                  <td style="font-size:0; line-height:0; width:20px">&nbsp;</td>
              </table>
          <repeater>
            <layout label='Article, tip or resource'>
              <table width="640px" align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
                
                  <td style="font-size:0; line-height:0; width:20px">&nbsp;</td>
                  <td><h2>
                      <singleline label="Title" repeatertitle='true' >Title of Article</singleline>
                    </h2>
                    <multiline label="Description" >Description</multiline></td>
              </table>
            </layout>
            <layout label="Text only full width">
              <table width="640px" align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
                
                  <td style="font-size:0; line-height:0; width:20px">&nbsp;</td>
                  <td><h2>
                      <singleline label="Title" repeatertitle='true' >Title of Article</singleline>
                    </h2>
                    <multiline label="Description" >Description</multiline></td>
              </table>
            </layout>
          </repeater>
        <tr>
          <td bgcolor="#EE4C50"><unsubscribe> Unsubscribe </unsubscribe></td>
        </tr>
      </table></td>
</table>
</body>
</html>
davidaf davidaf, 2 years ago

Hi there Malcom,

Looks like you are missing some <tr></tr> elements in your tables within your layouts. The editor is very sensitive to valid table code, so it's likely this is what's causing the issue there. Try adding those in to your table and see if you have better luck with the editor. And let us know how it goes!


The Campaign Monitor Blog – HTML email smarts to go with your good looks
WesternMailing, 2 years ago

That's great David - thank you so much for your time.

Bearing in mind my appallingly meagre html knowledge - for campaign monitor tags to work properly, does a table require <tr> tags even if there is only one row in the table?

<table>
<tr>
<td>Table cell</td>
</tr>
</table>

Regards,

Malcolm

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098