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

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