Multi layouts within a repeater, need help to build a template

Hello,

I am trying to personalize one of CM free template for a client.
I would like to use the new system of multi layouts within a repeater.
The template I want to build must have 3 layouts.
After Importing the template, I got the add new popup menu with my 3 layouts named allright
I can add the 1rst and the second one but when tempting to add the third I get a kind of "to the top" effect and no article is added.

I've tried several thigs but I am stuck at this time.

Could anyone help ?

Thanks

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Email Template - High Impact</title>
    </head>
<body style="margin: 0; padding: 0; background-color: #d8e7ea;" marginheight="0" topmargin="0" marginwidth="0" leftmargin="0">
<!--100% body table-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td bgcolor="#d8e7ea" style="background-color: #d8e7ea;">
            <!--header text-->
            <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td bgcolor="#0d2d42">
                        <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td valign="middle" align="center" height="50">
                                            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFF; text-transform: uppercase; margin: 0; padding: 0;">Ce message s'affiche  mal ? <webversion style="text-decoration: none; color: #00ffff">Visualisez-le dans votre navigateur<br></webversion></p>
                                            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFF; text-transform: uppercase; margin: 0; padding: 0;"><unsubscribe style="text-decoration: none; color: #00ffff">Cliquez ici pour vous désinscrire immédiatement</unsubscribe></p>
                                            </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <!--/header text-->
            <!--intro-->
            <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="middle" width="11" height="100"></td>
                    <td valign="middle" height="100">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="64%" height="100">
                                    <h1 style="font-family: Arial, Helvetica, sans-serif; font-size: 42px; margin: 0; padding: 0; color: #0d2d42; text-shadow: 1px 1px 1px #fff;">HIGH IMPACT</h1>
                                </td>
                                <td width="36%" height="100" valign="top">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td valign="bottom" height="70">
                                                <p style="text-transform: uppercase; font-size: 14px;  color: #333333; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; float: right;">
                                                    <$currentdayname$>
                                                    <$currentday$>
                                                    <$currentmonthname$>
                                                    <$currentyear$>
                                                </p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <!--/intro-->
            <!--content section-->
           <repeater>
       
           <layout label='texte et grande image'>

            <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td height="82" width="11" valign="middle"><img style=" display: block; margin: 0; padding: 0;" src="impact-rpo/side-corner.png" alt="image"></td>
                    <td height="82" bgcolor="#FFFFFF" valign="middle">
                        <table width="594" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td style="background-image: url(impact-rpo/bar-end.png); background-repeat: no-repeat; background-position: right;" valign="middle" height="37" bgcolor="#cc0000">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="background-color:#cc0000;" bgcolor="#cc0000" width="25" height="37"></td>
                                            <td height="37">
                                                <h2 style="color: #fff; font-size: 21px; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-shadow: 1px 1px 1px #000;"><singleline label='entrez un titre'repeatertitle='true'>Le titre de votre article</singleline></h2>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top"></td>
                    <td bgcolor="#FFFFFF" valign="top">
                        <table width="560" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td valign="top">
                                    <p style="font-size: 14px; color: #333333; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;"><multiline label='corps de votre article'>entrez le contenu de votre article</multiline></p>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="15"></td>
                                        </tr>
                                    </table>
                                    <table bgcolor="#000000" width="540" border="0" cellspacing="10" cellpadding="0">
                                        <tr>
                                            <td width="540"><img style="margin: 0; padding: 0; display: block;" border="0" src="impact-rpo/img1.jpg" editable="true" width="540" height="158" alt="img1"label='placez votre image'></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            </layout>
            <!--/content section-->
            <!--content section-->
            <layout label='texte seul'>
            <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td height="82" width="11" valign="middle"><img style="margin: 0; padding: 0; display: block;" src="impact-rpo/side-corner.png" width="11" height="83" alt="image"></td>
                    <td height="82" bgcolor="#FFFFFF" valign="middle">
                        <table width="594" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td style="background-image: url(impact-rpo/bar-end.png); background-repeat: no-repeat; background-position: right;" valign="middle" height="37" bgcolor="#cc0000">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td style="background-color:#cc0000;" bgcolor="#cc0000" width="25" height="37"></td>
                                            <td height="37">
                                                <h2 style="color: #fff; font-size: 21px; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-shadow: 1px 1px 1px #000;"><singleline label='entrez un titre'repeatertitle='true'>Le titre de votre article</singleline></h2>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top"></td>
                    <td bgcolor="#FFFFFF" valign="top">
                        <table width="560" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                           
                                <td valign="top">
                                    <p style="font-size: 14px; color: #333333; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;"><multiline label='corps de votre article'>entrez le contenu de votre article</multiline></p>
                                </td>
                            </tr>
                                       
                                        </table>
                    </td>
                </tr>
            </table>
            </layout>
            <!--/content section-->
            <!--content section-->
            <layout label='texte et petite image

roshodgekiss roshodgekiss, 5 years ago

Hi marcsaffar, I think it's the � symbol in <layout label='texte et petite image �  gauche'> (line 124) that's making the template editor so confused. I replaced this symbol and found that I could add all three layouts above to a template.

Hopefully that does the trick - let me know how you go. :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
marcsaffar, 5 years ago

Hello Rosanne,

Thanks a lot. You are right, and it means that we must avoid accentuated letters.
In french we use them very often.

Now it works perfectly, I must say it is really awesome to offer  templates with such possibilities to our clients :)

I have an other problem may be you ca help : in the 3rd layout, with an image to the left, I put "valign=top"  in all cells in that table, but when editing the top of the image and the top of the text are not aligned (text is a little below).

Thanks

Marc

roshodgekiss roshodgekiss, 5 years ago

Hi Marc, I see what's happening here. The <multiline> tags automatically convert into <p> tags, which are creating the additional margins/padding. What you can do is either:

- Go into source in the WYSIWYG editor and manually delete the tags, or;
- Use CSS to remove margins/padding from the p tags, like so:

<style type="text/css">
td.3rdlayout { font-size: 14px; color: #333333; font-family: Arial, Helvetica, sans-serif; }
td.3rdlayout p { margin: 0; padding: 0; }
</style>
...
<td valign="top" class="3rdlayout">
   <multiline label='corps de votre article'>entrez le contenu de votre article</multiline>
</td>

The second approach may not show up until you preview the template, but I've found this works :) All the best!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098