diff --git a/website_mail_snippet_responsive/README.rst b/website_mail_snippet_responsive/README.rst
index 9f4c9194..f2832df7 100644
--- a/website_mail_snippet_responsive/README.rst
+++ b/website_mail_snippet_responsive/README.rst
@@ -22,6 +22,16 @@ This module is prepared to be compatible with module ``website_mail_bg_color``.
 If you install it, you will be able to change snippets' background colors, but
 it is not required.
 
+Configuration
+=============
+
+To change the default background color for buttons:
+
+* Go to *Settings > Configuration > Website Settings > Mail >
+  Mail button color*.
+* Input `any valid CSS2 color value
+  <https://www.w3.org/TR/CSS2/syndata.html#value-def-color>`_.
+
 Usage
 =====
 
@@ -51,6 +61,17 @@ Known issues / Roadmap
   will insert a ``<br type="_moz"/>`` in Firefox, that will make it seem like
   its height is at least like a caret, even if you set a lower value. Do not
   worry, it goes away when you press *Save*.
+* Some elements do not render with the proper width in MS Outlook. This should
+  be added inside each snippet to make them work::
+
+      <!--[if gte mso]>
+          <style type="text/css">
+          .fluid { width: 600px !important; }
+          </style>
+      <![endif]-->
+
+  But right now the view parser eats comments, and if you avoid that then
+  CKEditor will eat them, so there's not an easy solution for now.
 
 Bug Tracker
 ===========
diff --git a/website_mail_snippet_responsive/__init__.py b/website_mail_snippet_responsive/__init__.py
index e69de29b..0650744f 100644
--- a/website_mail_snippet_responsive/__init__.py
+++ b/website_mail_snippet_responsive/__init__.py
@@ -0,0 +1 @@
+from . import models
diff --git a/website_mail_snippet_responsive/__openerp__.py b/website_mail_snippet_responsive/__openerp__.py
index 8435d9db..46c2fc69 100644
--- a/website_mail_snippet_responsive/__openerp__.py
+++ b/website_mail_snippet_responsive/__openerp__.py
@@ -4,7 +4,7 @@
 {
     "name": "Responsive Layout Snippets for Writing Emails",
     "summary": "Well... pseudo-responsive (see description)",
-    "version": "8.0.1.0.0",
+    "version": "8.0.1.1.0",
     "category": "Marketing",
     "website": "http://www.antiun.com",
     "author": "Antiun Ingeniería S.L., Odoo Community Association (OCA)",
@@ -19,10 +19,12 @@
     ],
     "data": [
         "views/assets.xml",
+        "views/res_config_view.xml",
         "views/templates.xml",
         "views/snippet_1_col.xml",
         "views/snippet_2_cols.xml",
         "views/snippet_3_cols.xml",
+        "views/snippet_event_date.xml",
         "views/snippet_hr.xml",
         "views/snippet_img_text.xml",
         "views/snippet_text_img.xml",
diff --git a/website_mail_snippet_responsive/models/__init__.py b/website_mail_snippet_responsive/models/__init__.py
new file mode 100644
index 00000000..1e58f775
--- /dev/null
+++ b/website_mail_snippet_responsive/models/__init__.py
@@ -0,0 +1,7 @@
+# -*- coding: utf-8 -*-
+# (c) 2015 Antiun Ingeniería S.L. - Sergio Teruel
+# (c) 2015 Antiun Ingeniería S.L. - Carlos Dauden
+# License AGPL-3 - See http://www.gnu.org/licenses/agpl-3.0.
+
+from . import res_config
+from . import website
diff --git a/website_mail_snippet_responsive/models/res_config.py b/website_mail_snippet_responsive/models/res_config.py
new file mode 100644
index 00000000..ce78411c
--- /dev/null
+++ b/website_mail_snippet_responsive/models/res_config.py
@@ -0,0 +1,13 @@
+# -*- coding: utf-8 -*-
+# © 2016 Incaser Informatica S.L. - Sergio Teruel
+# © 2016 Incaser Informatica S.L. - Carlos Dauden
+# License AGPL-3 - See http://www.gnu.org/licenses/agpl-3.0.html
+
+from openerp import models, fields
+
+
+class WebsiteMailSippetResponsive(models.TransientModel):
+    _name = 'website.config.settings'
+    _inherit = ['website.config.settings']
+
+    mail_button_color = fields.Char(related='website_id.mail_button_color')
diff --git a/website_mail_snippet_responsive/models/website.py b/website_mail_snippet_responsive/models/website.py
new file mode 100644
index 00000000..86944c40
--- /dev/null
+++ b/website_mail_snippet_responsive/models/website.py
@@ -0,0 +1,12 @@
+# -*- coding: utf-8 -*-
+# (c) 2015 Antiun Ingeniería S.L. - Sergio Teruel
+# (c) 2015 Antiun Ingeniería S.L. - Carlos Dauden
+# License AGPL-3 - See http://www.gnu.org/licenses/agpl-3.0.
+
+from openerp import models, fields
+
+
+class Website(models.Model):
+    _inherit = 'website'
+
+    mail_button_color = fields.Char(default='#00B518')
diff --git a/website_mail_snippet_responsive/static/src/img/snippet_1_col.png b/website_mail_snippet_responsive/static/src/img/snippet_1_col.png
index 6f39c4d1..e258e330 100644
Binary files a/website_mail_snippet_responsive/static/src/img/snippet_1_col.png and b/website_mail_snippet_responsive/static/src/img/snippet_1_col.png differ
diff --git a/website_mail_snippet_responsive/static/src/img/snippet_2_cols.png b/website_mail_snippet_responsive/static/src/img/snippet_2_cols.png
index c9e18815..47ad23d3 100644
Binary files a/website_mail_snippet_responsive/static/src/img/snippet_2_cols.png and b/website_mail_snippet_responsive/static/src/img/snippet_2_cols.png differ
diff --git a/website_mail_snippet_responsive/static/src/img/snippet_3_cols.png b/website_mail_snippet_responsive/static/src/img/snippet_3_cols.png
index 4afd7cfd..8a6e801c 100644
Binary files a/website_mail_snippet_responsive/static/src/img/snippet_3_cols.png and b/website_mail_snippet_responsive/static/src/img/snippet_3_cols.png differ
diff --git a/website_mail_snippet_responsive/static/src/img/snippet_event_date.png b/website_mail_snippet_responsive/static/src/img/snippet_event_date.png
new file mode 100644
index 00000000..596bae4e
Binary files /dev/null and b/website_mail_snippet_responsive/static/src/img/snippet_event_date.png differ
diff --git a/website_mail_snippet_responsive/static/src/img/snippet_hr.png b/website_mail_snippet_responsive/static/src/img/snippet_hr.png
index 1c5e0fe1..8f067149 100644
Binary files a/website_mail_snippet_responsive/static/src/img/snippet_hr.png and b/website_mail_snippet_responsive/static/src/img/snippet_hr.png differ
diff --git a/website_mail_snippet_responsive/static/src/img/snippet_img_text.png b/website_mail_snippet_responsive/static/src/img/snippet_img_text.png
index 01fe19ce..ce001051 100644
Binary files a/website_mail_snippet_responsive/static/src/img/snippet_img_text.png and b/website_mail_snippet_responsive/static/src/img/snippet_img_text.png differ
diff --git a/website_mail_snippet_responsive/static/src/img/snippet_text_img.png b/website_mail_snippet_responsive/static/src/img/snippet_text_img.png
index 815dd29b..11a2b348 100644
Binary files a/website_mail_snippet_responsive/static/src/img/snippet_text_img.png and b/website_mail_snippet_responsive/static/src/img/snippet_text_img.png differ
diff --git a/website_mail_snippet_responsive/views/res_config_view.xml b/website_mail_snippet_responsive/views/res_config_view.xml
new file mode 100644
index 00000000..ec22513f
--- /dev/null
+++ b/website_mail_snippet_responsive/views/res_config_view.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+<data>
+
+    <record id="view_website_config_settings" model="ir.ui.view">
+        <field name="name">Email Application</field>
+        <field name="model">website.config.settings</field>
+        <field name="inherit_id" ref="website.view_website_config_settings"/>
+        <field name="arch" type="xml">
+            <xpath expr="//group[@string='Menu']" position="after">
+                <group string="Mail">
+                    <label for="id" string="Mail button color"/>
+                    <div>
+                        <div>
+                            <field name="mail_button_color" class="oe_inline"/>
+                        </div>
+                    </div>
+                </group>
+            </xpath>
+        </field>
+    </record>
+
+</data>
+</openerp>
\ No newline at end of file
diff --git a/website_mail_snippet_responsive/views/snippet_1_col.xml b/website_mail_snippet_responsive/views/snippet_1_col.xml
index 7fed6a93..f417f178 100644
--- a/website_mail_snippet_responsive/views/snippet_1_col.xml
+++ b/website_mail_snippet_responsive/views/snippet_1_col.xml
@@ -12,9 +12,6 @@
             <t t-set="image" t-value="'snippet_1_col'"/>
             <t t-set="title">Big image + Text + Button (1 column)</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <td><a href="#" target="_blank"><img src="http://placehold.it/570x200/333333/ffffff?text=width 570px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 100%; max-width: 570px; min-width:285px;" border="0"/> </a></td>
                 </tr>
@@ -41,7 +38,7 @@
                                         <table border="0" cellpadding="0" cellspacing="0">
                                             <tbody>
                                                 <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;" class="bg_color_picker" target="_blank">Learn more</a></td>
+                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                 </tr>
                                             </tbody>
                                         </table>
diff --git a/website_mail_snippet_responsive/views/snippet_2_cols.xml b/website_mail_snippet_responsive/views/snippet_2_cols.xml
index 5b2ba139..c0c025c0 100644
--- a/website_mail_snippet_responsive/views/snippet_2_cols.xml
+++ b/website_mail_snippet_responsive/views/snippet_2_cols.xml
@@ -12,110 +12,107 @@
             <t t-set="image" t-value="'snippet_2_cols'"/>
             <t t-set="title">Image + Text + Button (2 columns)</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <td style="padding: 0;" valign="top">
                         <!-- LEFT COLUMN -->
-                        <table style="width: 50%; min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
-                            <tbody>
-                                <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
-                                            <tbody>
-                                                <tr>
-                                                    <td><a href="#" target="_blank"><img src="http://placehold.it/245x200/333333/ffffff?text=width 245px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 245px;" width="245" border="0"/></a></td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding:0;">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
-                                                                </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>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="padding: 25px 0;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
-                                                                            <tbody>
-                                                                                <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>
-                                                                                </tr>
-                                                                            </tbody>
-                                                                        </table>
-                                                                    </td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                        <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 50%; min-width:285px;">
+                              <tbody>
+                                 <tr>
+                                   <td style="padding: 20px 0 20px 20px;">
+                                     <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF">
+                                      <tbody>
+                                          <tr>
+                                              <td><a href="#" target="_blank"><img border="0" src="http://placehold.it/245x200/333333/ffffff?text=width 245px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt;  max-width: 245px;"/></a></td>
+                                          </tr>
+                                          <tr>
+                                              <td style="padding:0;">
+                                              <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                  <tbody>
+                                                      <tr>
+                                                          <td align="left" style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;">Title</td>
+                                                      </tr>
+                                                      <tr>
+                                                          <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>
+                                                  </tbody>
+                                              </table>
+                                              </td>
+                                          </tr>
+                                          <tr>
+                                              <td align="left">
+                                              <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                  <tbody>
+                                                      <tr>
+                                                          <td align="left" style="padding: 25px 0;">
+                                                          <table border="0" cellpadding="0" cellspacing="0">
+                                                              <tbody>
+                                                                  <tr>
+                                                                      <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
+                                                                  </tr>
+                                                              </tbody>
+                                                          </table>
+                                                          </td>
+                                                      </tr>
+                                                  </tbody>
+                                              </table>
+                                              </td>
+                                          </tr>
+                                      </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                           </tbody>
+                         </table>
 
                         <!-- RIGHT COLUMN -->
-                        <table style="width: 50%;  min-width:285px;" border="0" cellpadding="0" cellspacing="0" align="left">
-                            <tbody>
-                                <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
-                                            <tbody>
-                                                <tr>
-                                                    <td><a href="#" target="_blank"><img src="http://placehold.it/245x200/333333/ffffff?text=width 245px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 50% width: 245px;" width="245" border="0"/></a></td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding:0;">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
-                                                                </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>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="padding: 25px 0;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
-                                                                            <tbody>
-                                                                                <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>
-                                                                                </tr>
-                                                                            </tbody>
-                                                                        </table>
-                                                                    </td>
-                                                                </tr>
-                                                            </tbody>
-                                                        </table>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                        <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 50%;  min-width:285px;">
+                              <tbody>
+                                  <tr>
+                                   <td style="padding: 20px 0 20px 20px;">
+                                     <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF">
+                                      <tbody>
+                                          <tr>
+                                              <td><a href="#" target="_blank"><img border="0" src="http://placehold.it/245x200/333333/ffffff?text=width 245px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 50% max-width: 245px;"/></a></td>
+                                          </tr>
+                                          <tr>
+                                              <td style="padding:0;">
+                                              <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                  <tbody>
+                                                      <tr>
+                                                          <td align="left" style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;">Title</td>
+                                                      </tr>
+                                                      <tr>
+                                                          <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>
+                                                  </tbody>
+                                              </table>
+                                              </td>
+                                          </tr>
+                                          <tr>
+                                              <td align="left">
+                                              <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                  <tbody>
+                                                      <tr>
+                                                          <td align="left" style="padding: 25px 0;">
+                                                          <table border="0" cellpadding="0" cellspacing="0">
+                                                              <tbody>
+                                                                  <tr>
+                                                                      <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
+                                                                  </tr>
+                                                              </tbody>
+                                                          </table>
+                                                          </td>
+                                                      </tr>
+                                                  </tbody>
+                                              </table>
+                                              </td>
+                                          </tr>
+                                      </tbody>
+                                  </table>
+                                 </td>
+                               </tr>
+                           </tbody>
+                      </table>
                     </td>
                 </tr>
             </tbody>
diff --git a/website_mail_snippet_responsive/views/snippet_3_cols.xml b/website_mail_snippet_responsive/views/snippet_3_cols.xml
index 90cbf4bb..8b276d80 100644
--- a/website_mail_snippet_responsive/views/snippet_3_cols.xml
+++ b/website_mail_snippet_responsive/views/snippet_3_cols.xml
@@ -11,162 +11,160 @@
         <t t-call="website_mail_snippet_responsive.snippet">
             <t t-set="image" t-value="'snippet_3_cols'"/>
             <t t-set="title">Image + Text + Button (3 columns)</t>
-            <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
+               <tbody>
                 <tr>
+                    <!-- FIRST COLUMN -->
                     <td style="padding: 0;" valign="top">
-                        <!-- FIRST COLUMN -->
-                        <table style="width: 32%; min-width:182px;" border="0" cellpadding="0" cellspacing="0" align="left">
-                            <tbody>
-                                <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
-                                            <tbody>
-                                                <tr>
-                                                    <td width="150"><a href="#" target="_blank"><img src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width:150px;" width="150" border="0"/></a></td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding:0;">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
-                                                                </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>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 32%; min-width:182px;">
+                        <tbody>
+                            <tr>
+                                <td style="padding: 20px 0 20px 20px;">
+                                <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF">
+                                    <tbody>
+                                        <tr>
+                                            <td width="150"><a href="#" target="_blank"><img border="0" src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt;width: 100%; min-width:150px;"/></a></td>
+                                        </tr>
+                                        <tr>
+                                            <td style="padding:0;">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                <tbody>
+                                                    <tr>
+                                                        <td align="left" style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;">Title</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <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>
+                                                </tbody>
+                                            </table>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td align="left">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                <tbody>
+                                                    <tr>
+                                                        <td align="left" style="padding: 25px 0px;">
+                                                        <table border="0" cellpadding="0" cellspacing="0">
                                                             <tbody>
                                                                 <tr>
-                                                                    <td style="padding: 25px 0px;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
-                                                                            <tbody>
-                                                                                <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>
-                                                                                </tr>
-                                                                            </tbody>
-                                                                        </table>
-                                                                    </td>
+                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                                 </tr>
                                                             </tbody>
                                                         </table>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
 
-                        <!-- SECOND COLUMN -->
-                        <table style="width: 32%; min-width:182px;" border="0" cellpadding="0" cellspacing="0" align="left">
-                            <tbody>
-                                <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
-                                            <tbody>
-                                                <tr>
-                                                    <td width="150"><a href="#" target="_blank"><img src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width:150px;" width="150" border="0"/></a></td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding:0;">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
-                                                                </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>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                    <!-- SECOND COLUMN -->
+
+                  <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 32%; min-width:182px;">
+                        <tbody>
+                            <tr>
+                                <td style="padding: 20px 0 20px 20px;">
+                                <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF">
+                                    <tbody>
+                                        <tr>
+                                            <td width="150"><a href="#" target="_blank"><img border="0" src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt;width: 100%; min-width:150px;"/></a></td>
+                                        </tr>
+                                        <tr>
+                                            <td style="padding:0;">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                <tbody>
+                                                    <tr>
+                                                        <td align="left" style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;">Title</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <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>
+                                                </tbody>
+                                            </table>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td align="left">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                <tbody>
+                                                    <tr>
+                                                        <td align="left" style="padding: 25px 0px;">
+                                                        <table border="0" cellpadding="0" cellspacing="0">
                                                             <tbody>
                                                                 <tr>
-                                                                    <td style="padding: 25px 0px;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
-                                                                            <tbody>
-                                                                                <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>
-                                                                                </tr>
-                                                                            </tbody>
-                                                                        </table>
-                                                                    </td>
+                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                                 </tr>
                                                             </tbody>
                                                         </table>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
 
-                        <!-- THIRD COLUMN -->
+                    <!-- THIRD COLUMN -->
 
-                        <table style="width: 32%; min-width:182px;" border="0" cellpadding="0" cellspacing="0" align="left">
-                            <tbody>
-                                <tr>
-                                    <td style="padding: 20px 0 20px 20px;">
-                                        <table style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF" width="150">
-                                            <tbody>
-                                                <tr>
-                                                    <td width="150"><a href="#" target="_blank"><img src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width:150px;" width="150" border="0"/></a></td>
-                                                </tr>
-                                                <tr>
-                                                    <td style="padding:0;">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                                                            <tbody>
-                                                                <tr>
-                                                                    <td style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;" align="left">Title</td>
-                                                                </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>
-                                                </tr>
-                                                <tr>
-                                                    <td align="left">
-                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 32%; min-width:182px;">
+                        <tbody>
+                            <tr>
+                                <td style="padding: 20px 0 20px 20px;">
+                                <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="width: 100%;border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF" width="150">
+                                    <tbody>
+                                        <tr>
+                                            <td width="150"><a href="#" target="_blank"><img border="0" src="http://placehold.it/150x150/333333/ffffff?text=width 150px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt;width: 100%; min-width:150px;"/></a></td>
+                                        </tr>
+                                        <tr>
+                                            <td style="padding:0;">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                <tbody>
+                                                    <tr>
+                                                        <td align="left" style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;">Title</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <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>
+                                                </tbody>
+                                            </table>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td align="left">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                <tbody>
+                                                    <tr>
+                                                        <td align="left" style="padding: 25px 0px;">
+                                                        <table border="0" cellpadding="0" cellspacing="0">
                                                             <tbody>
                                                                 <tr>
-                                                                    <td style="padding: 25px 0px;" align="left">
-                                                                        <table border="0" cellpadding="0" cellspacing="0">
-                                                                            <tbody>
-                                                                                <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>
-                                                                                </tr>
-                                                                            </tbody>
-                                                                        </table>
-                                                                    </td>
+                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                                 </tr>
                                                             </tbody>
                                                         </table>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                     </td>
                 </tr>
             </tbody>
diff --git a/website_mail_snippet_responsive/views/snippet_event_date.xml b/website_mail_snippet_responsive/views/snippet_event_date.xml
new file mode 100644
index 00000000..08563ce7
--- /dev/null
+++ b/website_mail_snippet_responsive/views/snippet_event_date.xml
@@ -0,0 +1,113 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
+     License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). -->
+
+<openerp>
+<data>
+
+<template id="snippet_event_date"
+          inherit_id="website_mail.email_designer_snippets">
+    <xpath expr="//div[@id='snippet_email_structure']">
+        <t t-call="website_mail_snippet_responsive.snippet">
+            <t t-set="image" t-value="'snippet_event_date'"/>
+            <t t-set="title">Date + Text + Button (2 columns)</t>
+              <tbody>
+                <tr>
+                    <td style="padding:0 20px;">
+                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                        <tbody>
+                            <tr>
+                                <td align="left" style="font-size: 18pt; font-family: Arial, sans-serif; color: #000000; padding-top: 30px;">Title</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    </td>
+                </tr>
+                <tr>
+                    <td style="padding: 0;" valign="top"><!-- LEFT COLUMN -->
+                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 50%; min-width:285px;">
+                        <tbody>
+                            <tr>
+                                <td style="padding: 20px 0 20px 20px;">
+                                <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#000000">
+                                    <tbody>
+                                        <tr>
+                                            <td style="padding:1px;">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="200" height="200" style="background:#FFFFFF">
+                                                <tbody>
+                                                    <tr>
+                                                        <td align="center" style="font-size: 65pt; line-height:50pt; font-weight: bold; font-family: Arial, sans-serif; color: #000000; padding: 30px 0 0 0;">07</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td align="center" style="padding: 10px 0 0 0; font-size: 16pt; font-weight: bold;  letter-spaccing:2px; text-transform: uppercase; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">December</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td align="center" style="padding: 0 0 30px 0; font-size: 16pt; font-weight: bold;  letter-spaccing:2px; text-transform: uppercase; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">18:00</td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                            </td>
+                                        </tr>
+
+                                    </tbody>
+                                </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <!-- RIGHT COLUMN -->
+
+                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 50%;  min-width:285px;">
+                        <tbody>
+                            <tr>
+                                <td style="padding: 20px 0 20px 20px;">
+                                <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF">
+                                    <tbody>
+
+                                        <tr>
+                                            <td style="padding:0;">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                <tbody>
+
+                                                    <tr>
+                                                        <td align="left" style="padding: 0 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>
+                                                </tbody>
+                                            </table>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td align="left">
+                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                                                <tbody>
+                                                    <tr>
+                                                        <td align="left" style="padding: 25px 0;">
+                                                        <table border="0" cellpadding="0" cellspacing="0">
+                                                            <tbody>
+                                                                <tr>
+                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
+                                                                </tr>
+                                                            </tbody>
+                                                        </table>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    </td>
+                </tr>
+            </tbody>
+        </t>
+    </xpath>
+</template>
+
+</data>
+</openerp>
diff --git a/website_mail_snippet_responsive/views/snippet_hr.xml b/website_mail_snippet_responsive/views/snippet_hr.xml
index f5cffafe..3765d3fe 100644
--- a/website_mail_snippet_responsive/views/snippet_hr.xml
+++ b/website_mail_snippet_responsive/views/snippet_hr.xml
@@ -25,10 +25,7 @@
             <t t-set="title">Horizontal Separator</t>
             <tbody>
                 <tr>
-                    <td bgcolor="#ECECEC" height="10"/>
-                </tr>
-                <tr>
-                    <td bgcolor="#00B518"
+                    <td t-attf-bgcolor="#{website.mail_button_color}"
                         height="5"
                         class="bg_color_picker vertical_resizable"/>
                 </tr>
diff --git a/website_mail_snippet_responsive/views/snippet_img_text.xml b/website_mail_snippet_responsive/views/snippet_img_text.xml
index 5f90495e..973dc85d 100644
--- a/website_mail_snippet_responsive/views/snippet_img_text.xml
+++ b/website_mail_snippet_responsive/views/snippet_img_text.xml
@@ -12,9 +12,6 @@
             <t t-set="image" t-value="'snippet_img_text'"/>
             <t t-set="title">Left Image, Right Text + Button</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <td style="padding: 0;" valign="top">
                         <!-- LEFT COLUMN -->
@@ -56,7 +53,7 @@
                                                                         <table border="0" cellpadding="0" cellspacing="0">
                                                                             <tbody>
                                                                                 <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="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
                                                                                 </tr>
                                                                             </tbody>
                                                                         </table>
diff --git a/website_mail_snippet_responsive/views/snippet_text_img.xml b/website_mail_snippet_responsive/views/snippet_text_img.xml
index f67121ed..5084adb7 100644
--- a/website_mail_snippet_responsive/views/snippet_text_img.xml
+++ b/website_mail_snippet_responsive/views/snippet_text_img.xml
@@ -12,9 +12,6 @@
             <t t-set="image" t-value="'snippet_text_img'"/>
             <t t-set="title">Left Text and Button, Right Image</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <td style="padding: 0;" valign="top">
                         <!-- LEFT COLUMN -->
@@ -39,7 +36,7 @@
                                                                         <table border="0" cellpadding="0" cellspacing="0">
                                                                             <tbody>
                                                                                 <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="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
                                                                                 </tr>
                                                                             </tbody>
                                                                         </table>