Browse Source

3 columns, Img+Text and Text + Img Fixed

pull/47/head
Daniel Gómez-Zurita 9 years ago
committed by Jairo Llopis
parent
commit
25b61bd36f
  1. 76
      website_mail_snippet_fixed/views/snippet_3_cols.xml
  2. 43
      website_mail_snippet_fixed/views/snippet_img_text.xml
  3. 47
      website_mail_snippet_fixed/views/snippet_text_img.xml

76
website_mail_snippet_fixed/views/snippet_3_cols.xml

@ -8,24 +8,23 @@
<template id="snippet_3_cols" <template id="snippet_3_cols"
inherit_id="560px_section"> inherit_id="560px_section">
<xpath expr="."> <xpath expr=".">
<t t-call="website_mail_snippet_fixed.snippet">
<t t-call="website_mail_snippet_responsive.snippet">
<t t-set="image" t-value="'snippet_3_cols'"/> <t t-set="image" t-value="'snippet_3_cols'"/>
<t t-set="title">Image + Text + Button (3 columns)</t> <t t-set="title">Image + Text + Button (3 columns)</t>
<tbody> <tbody>
<tr> <tr>
<td align="left" colspan="3" style="font-size: 11pt; font-family: Arial, sans-serif; font-weight: bold; color: #000; padding: 20px 10px 0 20px;">Title</td> <td align="left" colspan="3" style="font-size: 11pt; font-family: Arial, sans-serif; font-weight: bold; color: #000; padding: 20px 10px 0 20px;">Title</td>
</tr> </tr>
<tr>
<tr><!-- FIRST COLUMN -->
<td style="padding: 0;" valign="top"> <td style="padding: 0;" valign="top">
<!-- FIRST COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" align="left">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 20px 10px 20px 20px;"> <td style="padding: 20px 10px 20px 20px;">
<table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" class="bg_color_picker">
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="160">
<tbody> <tbody>
<tr> <tr>
<td><a href="#" target="_blank"><img src="http://placehold.it/160x160/333333/ffffff?text=width 160px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width:160px;" width="160" border="0"/></a></td>
<td><a href="#" target="_blank"><img src="http://placehold.it/160x160/aaaaaa/ffffff?text=width%20160px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt;width: 100%; width:160px;" border="0" width="160"></a></td>
</tr> </tr>
<tr> <tr>
<td style="padding:0;"> <td style="padding:0;">
@ -34,13 +33,13 @@
<tr> <tr>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td> <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
</tr> </tr>
<tr> <tr>
<td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</tbody>
</table>
</td>
<td align="left" style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr> </tr>
<tr> <tr>
<td align="left"> <td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
@ -50,7 +49,7 @@
<table border="0" cellpadding="0" cellspacing="0"> <table border="0" cellpadding="0" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -66,16 +65,21 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</td>
</tr>
</tbody>
</table>
</td>
<!-- SECOND COLUMN --> <!-- SECOND COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" align="left">
<td style="padding: 0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 20px 10px 20px 10px;"> <td style="padding: 20px 10px 20px 10px;">
<table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" class="bg_color_picker">
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="160">
<tbody> <tbody>
<tr> <tr>
<td><a href="#" target="_blank"><img src="http://placehold.it/160x160/333333/ffffff?text=width 160px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width:160px;" width="160" border="0"/></a></td>
<td><a href="#" target="_blank"><img src="http://placehold.it/160x160/aaaaaa/ffffff?text=width%20160px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt;width: 100%; width:160px;" border="0" width="160"></a></td>
</tr> </tr>
<tr> <tr>
<td style="padding:0;"> <td style="padding:0;">
@ -85,11 +89,9 @@
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td> <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
</tr> </tr>
<tr> <tr>
<td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</tbody>
</table>
</td>
<td align="left" style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr> </tr>
<tr> <tr>
<td align="left"> <td align="left">
@ -100,7 +102,7 @@
<table border="0" cellpadding="0" cellspacing="0"> <table border="0" cellpadding="0" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -116,17 +118,21 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</td>
</tr>
</tbody>
</table>
</td>
<!-- THIRD COLUMN --> <!-- THIRD COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" align="left">
<td style="padding: 0;" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 20px 20px 20px 10px;"> <td style="padding: 20px 20px 20px 10px;">
<table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" class="bg_color_picker" width="150">
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="160">
<tbody> <tbody>
<tr> <tr>
<td><a href="#" target="_blank"><img src="http://placehold.it/160x160/333333/ffffff?text=width 160px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width:160px;" width="160" border="0"/></a></td>
<td><a href="#" target="_blank"><img src="http://placehold.it/160x160/aaaaaa/ffffff?text=width%20160px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt;width: 100%; width:160px;" border="0" width="160"></a></td>
</tr> </tr>
<tr> <tr>
<td style="padding:0;"> <td style="padding:0;">
@ -135,13 +141,13 @@
<tr> <tr>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td> <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
</tr> </tr>
<tr> <tr>
<td style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;" align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr>
</tbody>
</table>
</td>
<td align="left" style="padding: 20px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
</tr> </tr>
<tr> <tr>
<td align="left"> <td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
@ -151,7 +157,11 @@
<table border="0" cellpadding="0" cellspacing="0"> <table border="0" cellpadding="0" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

43
website_mail_snippet_fixed/views/snippet_img_text.xml

@ -8,55 +8,64 @@
<template id="snippet_img_text" <template id="snippet_img_text"
inherit_id="560px_section"> inherit_id="560px_section">
<xpath expr="."> <xpath expr=".">
<t t-call="website_mail_snippet_fixed.snippet">
<t t-call="website_mail_snippet_responsive.snippet">
<t t-set="image" t-value="'snippet_img_text'"/> <t t-set="image" t-value="'snippet_img_text'"/>
<t t-set="title">Left Image, Right Text + Button</t> <t t-set="title">Left Image, Right Text + Button</t>
<tbody> <tbody>
<tr> <tr>
<td style="background-color: #ECECEC;" class="bg_color_picker" height="10"></td>
</tr>
<tr>
<td style="padding: 0;" valign="top">
<!-- LEFT COLUMN -->
<table style="width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
<td style="padding: 0;" valign="top"><!-- LEFT COLUMN -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<td style="padding: 20px 10px 20px 20px;">
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="250">
<tbody> <tbody>
<tr> <tr>
<td align="center" valign="middle"><a href="#" target="_blank"><img src="http://placehold.it/240x150/333333/ffffff?text=width 240px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 100%; width:240px; height:auto;" border="0"/></a></td>
<td><a href="#" target="_blank"><img src="http://placehold.it/250x200/aaaaaa/ffffff?text=width%20250px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 250px;" border="0" width="250"></a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</td>
<!-- RIGHT COLUMN --> <!-- RIGHT COLUMN -->
<table style="min-width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 20px;">
<td style="padding: 20px 20px 20px 10px;">
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="250">
<tbody>
<tr>
<td style="padding:0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" align="left">News Item</td>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 10px;" align="left">News Item</td>
</tr> </tr>
<tr> <tr>
<td style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #000000; font-size: 9pt; line-height: 20px;" align="left">Integer ut tempor lectus. Vivamus at gravida arcu.</td>
<td align="left" style="padding: 10px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr> </tr>
<tr> <tr>
<td align="left"> <td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 25px 0 0 0;" align="left">
<td style="padding: 25px 0;" align="left">
<table border="0" cellpadding="0" cellspacing="0"> <table border="0" cellpadding="0" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
</tr>
</tbody>
</table>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

47
website_mail_snippet_fixed/views/snippet_text_img.xml

@ -8,38 +8,41 @@
<template id="snippet_text_img" <template id="snippet_text_img"
inherit_id="560px_section"> inherit_id="560px_section">
<xpath expr="."> <xpath expr=".">
<t t-call="website_mail_snippet_fixed.snippet">
<t t-call="website_mail_snippet_responsive.snippet">
<t t-set="image" t-value="'snippet_text_img'"/> <t t-set="image" t-value="'snippet_text_img'"/>
<t t-set="title">Left Text and Button, Right Image</t> <t t-set="title">Left Text and Button, Right Image</t>
<tbody> <tbody>
<tr> <tr>
<td style="background-color: #ECECEC;" class="bg_color_picker" height="10"></td>
</tr>
<td style="padding: 0;" valign="top"><!-- LEFT COLUMN -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%">
<tbody>
<tr> <tr>
<td style="padding: 0;" valign="top">
<!-- LEFT COLUMN -->
<table style="width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
<td style="padding: 20px 10px 20px 20px;">
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="250">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 20px;">
<td style="padding:0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" align="left">News Item</td>
<td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 10px;" align="left">News Item</td>
</tr> </tr>
<tr> <tr>
<td style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #000000; font-size: 9pt; line-height: 20px;" align="left">Integer ut tempor lectus. Vivamus at gravida arcu.</td>
<td align="left" style="padding: 10px 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr> </tr>
<tr> <tr>
<td align="left"> <td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 25px 0 0 0;" align="left">
<td style="padding: 25px 0;" align="left">
<table border="0" cellpadding="0" cellspacing="0"> <table border="0" cellpadding="0" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
<td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -55,21 +58,27 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</td>
</tr>
</tbody>
</table>
</td>
<!-- RIGHT COLUMN --> <!-- RIGHT COLUMN -->
<table style="min-width:280px;" border="0" cellpadding="0" cellspacing="0" align="left">
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%">
<tbody> <tbody>
<tr>
<td style="padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td style="padding: 20px 20px 20px 10px;">
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="250">
<tbody> <tbody>
<tr> <tr>
<td align="center" valign="middle"><a href="#" target="_blank"><img src="http://placehold.it/240x150/333333/ffffff?text=width 240px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 100%; width:240px;" border="0"/></a></td>
<td><a href="#" target="_blank"><img src="http://placehold.it/250x200/aaaaaa/ffffff?text=width%20250px" style="display: block; color: #000000; font-family: Arial, sans-serif; font-size: 9pt; width: 250px;" border="0" width="250"></a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</td>
</tr>
</td></tr>
</tbody> </tbody>
</table> </table>
</td> </td>

Loading…
Cancel
Save