[IMP] mass_mailing, web_editor: improve themes/snippets/templates

120 files changed, 3063 insertions, 1020 deletions

diff --git a/addons/mass_mailing/__manifest__.py b/addons/mass_mailing/__manifest__.py
index 3adda9bc434..35212348440 100644
--- a/addons/mass_mailing/__manifest__.py
+++ b/addons/mass_mailing/__manifest__.py
@@ -34,6 +34,7 @@ professional emails and reuse templates in a few clicks.
         'views/email_template.xml',
         'security/ir.model.access.csv',
         'views/editor_field_html.xml',
+        'views/themes_templates.xml',
         'views/snippets_themes.xml',
         'views/snippets_themes_options.xml',
     ],
diff --git a/addons/mass_mailing/static/src/css/compiled/theme_airmail.css b/addons/mass_mailing/static/src/css/compiled/theme_airmail.css
new file mode 100644
index 00000000000..23ad8330e7c
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/compiled/theme_airmail.css
@@ -0,0 +1,168 @@
+.o_layout.o_airmail_theme {
+  background-color: #EAECED;
+}
+.o_layout.o_airmail_theme .o_mail_wrapper {
+  background: rgba(0, 0, 0, 0);
+  background: transparent;
+  border: none;
+}
+.o_layout.o_airmail_theme .o_mail_snippet_general {
+  background-color: white;
+  color: black;
+}
+.o_layout.o_airmail_theme .o_mail_snippet_general .btn.btn-primary {
+  color: white;
+  background-color: #FB3C6B;
+}
+.o_layout.o_airmail_theme .o_mail_snippet_general a,
+.o_layout.o_airmail_theme .o_mail_snippet_general .o_mail_link {
+  color: #fa2358;
+}
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta {
+  background-color: #FB3C6B;
+}
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta .btn.btn-primary {
+  color: white;
+  background-color: #a17e92;
+}
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta h1,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta h2,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta h3,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta h4,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta h5,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta h6,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta .h1,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta .h2,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta .h3,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta .h4,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta .h5,
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-beta .h6 {
+  color: white;
+}
+.o_layout.o_airmail_theme .o_mail_snippet_general .text-beta {
+  color: #FB3C6B;
+}
+.o_layout.o_airmail_theme .o_mail_snippet_general .bg-delta {
+  background-color: #a17e92;
+}
+.o_layout.o_airmail_theme .o_mail_wrapper > div {
+  margin-bottom: 16px;
+}
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_social,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_text_social,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_logo {
+  margin-bottom: 0;
+}
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_social .o_mail_snippet_general,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_text_social .o_mail_snippet_general,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_logo .o_mail_snippet_general {
+  background: rgba(0, 0, 0, 0);
+  background: transparent;
+}
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_social .o_mail_h_padding,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_text_social .o_mail_h_padding,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_logo .o_mail_h_padding {
+  padding-left: 0;
+  padding-right: 0;
+}
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_social .o_mail_header_social,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_text_social .o_mail_header_social,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_logo .o_mail_header_social {
+  margin-right: 0px;
+}
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_social .o_mail_header_social a,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_text_social .o_mail_header_social a,
+.o_layout.o_airmail_theme .o_mail_wrapper .o_mail_block_header_logo .o_mail_header_social a {
+  color: #7c898f;
+}
+.o_layout.o_airmail_theme .o_mail_block_event {
+  margin-left: 0;
+  margin-right: 0;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_separator {
+  margin-left: 0;
+  margin-right: 0;
+}
+.o_layout.o_airmail_theme .o_mail_block_image .o_mail_h_padding {
+  padding: 0;
+}
+.o_layout.o_airmail_theme .o_mail_block_image .o_mail_h_padding .o_mail_col_mv {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.o_layout.o_airmail_theme .o_mail_block_image .o_mail_h_padding > img {
+  padding: 0;
+  margin-bottom: 15px;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_separator .o_mail_snippet_general {
+  background: rgba(0, 0, 0, 0);
+  background: transparent;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_separator .o_mail_snippet_general .separator {
+  height: 3px;
+  background-color: #cfd3d5;
+  border-bottom: 2px solid #f7f7f7;
+}
+.o_layout.o_airmail_theme .o_mail_block_two_cols table,
+.o_layout.o_airmail_theme .o_mail_block_three_cols table {
+  width: 110%;
+  max-width: 620px;
+  margin: auto -10px;
+}
+.o_layout.o_airmail_theme .o_mail_block_two_cols .o_mail_snippet_general,
+.o_layout.o_airmail_theme .o_mail_block_three_cols .o_mail_snippet_general {
+  background: rgba(0, 0, 0, 0);
+  background: transparent;
+}
+.o_layout.o_airmail_theme .o_mail_block_two_cols .o_mail_col_container,
+.o_layout.o_airmail_theme .o_mail_block_three_cols .o_mail_col_container {
+  padding: 0 0 20px;
+  margin: 0 10px;
+  border-top: 1px solid #e6e6e6;
+  border-bottom: 1px solid #dce0e1;
+  background-color: white;
+}
+.o_layout.o_airmail_theme .o_mail_block_two_cols .o_mail_col_container > *,
+.o_layout.o_airmail_theme .o_mail_block_three_cols .o_mail_col_container > * {
+  padding: 0 20px;
+}
+.o_layout.o_airmail_theme .o_mail_block_two_cols .o_mail_col_container img,
+.o_layout.o_airmail_theme .o_mail_block_three_cols .o_mail_col_container img {
+  padding: 0!important;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_tag_line table.o_mail_h_padding {
+  padding-left: 0;
+  padding-right: 0;
+}
+.o_layout.o_airmail_theme .o_mail_block_image_text .o_mail_img_container {
+  padding: 0;
+}
+.o_layout.o_airmail_theme .o_mail_block_text_image .o_mail_img_container {
+  padding: 0;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_social .o_mail_snippet_general {
+  background: rgba(0, 0, 0, 0);
+  background: transparent;
+  margin-top: 30px;
+  border-top: 1px solid #cfd3d5;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_social .o_mail_footer_social {
+  border: none;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_social .o_mail_footer_social a {
+  color: #7c898f;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_social .o_mail_footer_links a {
+  color: #7c898f;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_social .o_mail_footer_copy {
+  font-weight: bold;
+  font-size: 9px;
+  color: #98a1a6;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_social.o_mail_footer_social_left .o_mail_footer_description {
+  padding-left: 0;
+}
+.o_layout.o_airmail_theme .o_mail_block_footer_social.o_mail_footer_social_left .o_mail_footer_social {
+  padding-right: 0;
+}
diff --git a/addons/mass_mailing/static/src/css/compiled/theme_default.css b/addons/mass_mailing/static/src/css/compiled/theme_default.css
new file mode 100644
index 00000000000..d68c8183572
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/compiled/theme_default.css
@@ -0,0 +1,220 @@
+#web_editor_inside_iframe #wrapwrap > main #editable_area {
+  background-color: transparent;
+}
+.o_layout {
+  font-family: -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  color: #797979;
+  overflow: hidden;
+  width: 100%;
+  min-height: 100%;
+  background-color: #f5f5f5;
+  padding-bottom: 20px;
+}
+.o_layout .o_mail_wrapper {
+  width: 100%;
+  max-width: 600px;
+  margin: auto;
+  border: 1px solid #f0f0f0;
+  background-color: #ffffff;
+}
+.o_mail_snippet_general {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.o_mail_snippet_general h1,
+.o_mail_snippet_general h2,
+.o_mail_snippet_general h3,
+.o_mail_snippet_general h4,
+.o_mail_snippet_general h5,
+.o_mail_snippet_general h6,
+.o_mail_snippet_general .h1,
+.o_mail_snippet_general .h2,
+.o_mail_snippet_general .h3,
+.o_mail_snippet_general .h4,
+.o_mail_snippet_general .h5,
+.o_mail_snippet_general .h6 {
+  color: #464646;
+}
+.o_mail_snippet_general .btn.btn-primary {
+  -webkit-user-select: none;
+  color: #ffffff;
+  border: none;
+  text-decoration: none;
+  font-weight: normal;
+  font-family: -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  cursor: pointer;
+  border-radius: 2px;
+  background-color: #706482;
+}
+.o_mail_snippet_general a,
+.o_mail_snippet_general .btn.btn-link {
+  color: #645974;
+  font-weight: bold;
+  text-decoration: none !important;
+}
+.o_mail_snippet_general a:hover,
+.o_mail_snippet_general .btn.btn-link:hover,
+.o_mail_snippet_general a:focus,
+.o_mail_snippet_general .btn.btn-link:focus,
+.o_mail_snippet_general a:active,
+.o_mail_snippet_general .btn.btn-link:active {
+  text-decoration: none !important;
+}
+.o_mail_snippet_general img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+.o_mail_snippet_general .separator {
+  height: 2px;
+  background-color: #f5f5f5;
+}
+.o_mail_snippet_general .bg-beta {
+  background-color: #706482;
+  color: #ffffff;
+}
+.o_mail_snippet_general .bg-beta h1,
+.o_mail_snippet_general .bg-beta h2,
+.o_mail_snippet_general .bg-beta h3,
+.o_mail_snippet_general .bg-beta h4,
+.o_mail_snippet_general .bg-beta h5,
+.o_mail_snippet_general .bg-beta h6,
+.o_mail_snippet_general .bg-beta .h1,
+.o_mail_snippet_general .bg-beta .h2,
+.o_mail_snippet_general .bg-beta .h3,
+.o_mail_snippet_general .bg-beta .h4,
+.o_mail_snippet_general .bg-beta .h5,
+.o_mail_snippet_general .bg-beta .h6 {
+  color: #ffffff;
+}
+.o_mail_snippet_general .text-beta {
+  color: #706482;
+}
+.o_mail_snippet_general .bg-delta {
+  background-color: #87a6b5;
+}
+.o_mail_snippet_general .bg-gray-lighter {
+  background-color: #f5f5f5;
+}
+.o_mail_block_header_social .o_mail_logo_container img,
+.o_mail_block_header_text_social .o_mail_logo_container img,
+.o_mail_block_header_logo .o_mail_logo_container img {
+  width: auto;
+}
+.o_mail_block_header_social .o_mail_header_social,
+.o_mail_block_header_text_social .o_mail_header_social,
+.o_mail_block_header_logo .o_mail_header_social {
+  margin-right: 20px;
+}
+.o_mail_block_header_text_social h3 {
+  font-weight: bold;
+}
+.o_mail_block_steps {
+  background-color: #f5f5f5;
+}
+.o_mail_block_two_cols,
+.o_mail_block_three_cols {
+  font-size: small;
+}
+.o_mail_block_two_cols .o_mail_col_container,
+.o_mail_block_three_cols .o_mail_col_container {
+  padding: 10px 20px;
+}
+.o_mail_block_two_cols .o_mail_col_container h4,
+.o_mail_block_three_cols .o_mail_col_container h4 {
+  margin-top: 15px;
+}
+.o_mail_block_image_text,
+.o_mail_block_text_image {
+  font-size: small;
+}
+.o_mail_block_event {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.o_mail_block_event .o_mail_snippet_general {
+  background: #f0f0f0;
+}
+.o_mail_block_footer_separator {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.o_mail_block_comparison_table .separator {
+  height: 1px;
+  background-color: #cfcfcf;
+}
+.o_mail_block_discount2 .o_code {
+  padding: 5px 10px;
+  background: #f5f5f5;
+  border-radius: 3px;
+  font-family: monospace;
+}
+.o_mail_block_footer_social .o_mail_table_styles {
+  border-top: 2px solid #f5f5f5;
+  padding-top: 20px;
+}
+.o_mail_block_footer_social .o_mail_footer_links {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.o_mail_block_footer_social .o_mail_footer_links .btn-link {
+  padding: 0;
+  font-size: 12px;
+}
+.o_mail_block_footer_social .o_mail_footer_copy {
+  font-size: 9px;
+  font-weight: bold;
+  color: #939393;
+}
+.o_mail_block_footer_social.o_mail_footer_social_center .o_mail_footer_social,
+.o_mail_block_footer_social.o_mail_footer_social_center .o_mail_footer_links,
+.o_mail_block_footer_social.o_mail_footer_social_center .o_mail_footer_copy {
+  text-align: center;
+}
+.o_mail_block_footer_social.o_mail_footer_social_left .o_mail_footer_description {
+  padding-left: 20px;
+}
+.o_mail_block_footer_social.o_mail_footer_social_left .o_mail_footer_social {
+  padding-right: 20px;
+  text-align: right;
+  vertical-align: top;
+}
+.o_mail_block_footer_social.o_mail_footer_social_left .o_mail_footer_social .btn-link {
+  padding: 0;
+  font-size: 12px;
+}
+.o_mail_display_coupon {
+  font-size: 50px;
+  line-height: 1;
+}
+/* ======================== MISC ====================== */
+.o_mail_h_padding {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.o_mail_v_padding {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.o_mail_no_margin {
+  margin: 0;
+}
+.o_mail_no_margin.o_mail_display_coupon {
+  line-height: 1.1;
+}
+.o_mail_table_styles {
+  width: 100%;
+  border-collapse: separate;
+}
+@media screen and (max-width: 480px) {
+  .o_mail_col_mv {
+    display: block!important;
+    max-width: 480px !important;
+    width: 100%!important;
+  }
+  .o_mail_table_styles {
+    max-width: 480px !important;
+    width: 100%!important;
+  }
+}
diff --git a/addons/mass_mailing/static/src/css/compiled/theme_newsletter.css b/addons/mass_mailing/static/src/css/compiled/theme_newsletter.css
new file mode 100644
index 00000000000..8761fbffe0f
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/compiled/theme_newsletter.css
@@ -0,0 +1,18 @@
+.o_layout.o_newsletter_theme .o_mail_snippet_general .btn.btn-primary {
+  color: #ffffff;
+  background-color: #1cc1a9;
+}
+.o_layout.o_newsletter_theme .o_mail_snippet_general a,
+.o_layout.o_newsletter_theme .o_mail_snippet_general .btn.btn-link {
+  color: #19ab96;
+}
+.o_layout.o_newsletter_theme .o_mail_snippet_general .bg-beta {
+  background-color: #906784;
+  color: #ffffff;
+}
+.o_layout.o_newsletter_theme .o_mail_snippet_general .text-beta {
+  color: #906784;
+}
+.o_layout.o_newsletter_theme .o_mail_snippet_general .bg-delta {
+  background-color: #87a6b5;
+}
diff --git a/addons/mass_mailing/static/src/css/compiled/theme_resto.css b/addons/mass_mailing/static/src/css/compiled/theme_resto.css
new file mode 100644
index 00000000000..c4b5fa45d16
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/compiled/theme_resto.css
@@ -0,0 +1,114 @@
+#web_editor_inside_iframe.o_resto_theme {
+  background-color: #f0ede0;
+}
+.o_layout.o_resto_theme {
+  background-color: #f0ede0;
+}
+.o_layout.o_resto_theme .o_mail_wrapper {
+  border: none;
+  background-color: transparent;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general {
+  background: rgba(0, 0, 0, 0);
+  background: transparent;
+  color: #712b22;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general .btn.btn-primary {
+  color: #ffffff;
+  background-color: #E96D1F;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general a,
+.o_layout.o_resto_theme .o_mail_snippet_general .o_mail_link {
+  font-weight: normal;
+  color: #d96115;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta {
+  background-color: #795745;
+  color: #ffffff;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta h1,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta h2,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta h3,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta h4,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta h5,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta h6,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta .h1,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta .h2,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta .h3,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta .h4,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta .h5,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-beta .h6 {
+  color: #ffffff;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general .text-beta {
+  color: #795745;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta {
+  background-color: #E96D1F;
+  color: #ffffff;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta h1,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta h2,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta h3,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta h4,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta h5,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta h6,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta .h1,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta .h2,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta .h3,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta .h4,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta .h5,
+.o_layout.o_resto_theme .o_mail_snippet_general .bg-delta .h6 {
+  color: #ffffff;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general .text-delta {
+  color: #d96115;
+}
+.o_layout.o_resto_theme .o_mail_snippet_general .separator {
+  background-color: #b08974;
+}
+.o_layout.o_resto_theme h1,
+.o_layout.o_resto_theme h2,
+.o_layout.o_resto_theme h3,
+.o_layout.o_resto_theme h4,
+.o_layout.o_resto_theme h5,
+.o_layout.o_resto_theme h6,
+.o_layout.o_resto_theme .h1,
+.o_layout.o_resto_theme .h2,
+.o_layout.o_resto_theme .h3,
+.o_layout.o_resto_theme .h4,
+.o_layout.o_resto_theme .h5,
+.o_layout.o_resto_theme .h6 {
+  color: #594032;
+  font-weight: bold;
+}
+.o_layout.o_resto_theme .o_mail_block_header_social .o_mail_snippet_general,
+.o_layout.o_resto_theme .o_mail_block_header_text_social .o_mail_snippet_general,
+.o_layout.o_resto_theme .o_mail_block_header_logo .o_mail_snippet_general {
+  border-bottom: 5px solid #E96D1F;
+}
+.o_layout.o_resto_theme .o_mail_block_header_social .o_mail_header_social a,
+.o_layout.o_resto_theme .o_mail_block_header_text_social .o_mail_header_social a,
+.o_layout.o_resto_theme .o_mail_block_header_logo .o_mail_header_social a {
+  color: #E96D1F;
+}
+.o_layout.o_resto_theme .o_mail_block_steps {
+  border-top: 2px solid #E96D1F;
+  background: #ffffff;
+}
+.o_layout.o_resto_theme .o_mail_block_event .o_mail_snippet_general {
+  background: #fafafa;
+}
+.o_layout.o_resto_theme .o_mail_block_header_social,
+.o_layout.o_resto_theme .o_mail_block_header_text_social,
+.o_layout.o_resto_theme .o_mail_block_header_logo,
+.o_layout.o_resto_theme .o_mail_block_steps,
+.o_layout.o_resto_theme .o_mail_block_event,
+.o_layout.o_resto_theme .o_mail_block_banner {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.o_layout.o_resto_theme .o_mail_block_footer_social .o_mail_table_styles {
+  border-top: 2px solid #b08974;
+  padding-top: 20px;
+}
diff --git a/addons/mass_mailing/static/src/css/compiled/theme_tech.css b/addons/mass_mailing/static/src/css/compiled/theme_tech.css
new file mode 100644
index 00000000000..f003757f2bb
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/compiled/theme_tech.css
@@ -0,0 +1,151 @@
+.o_layout.o_tech_theme {
+  background-color: #333;
+}
+.o_layout.o_tech_theme .o_mail_wrapper {
+  background-color: transparent;
+  color: #bdbdbd;
+  border: none;
+}
+.o_layout.o_tech_theme .o_mail_snippet_general .btn.btn-primary {
+  color: white;
+  background-color: #59cdcd;
+}
+.o_layout.o_tech_theme .o_mail_snippet_general .o_mail_full_width_padding {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.o_layout.o_tech_theme .o_mail_snippet_general a,
+.o_layout.o_tech_theme .o_mail_snippet_general .o_mail_link {
+  font-weight: normal;
+  color: #59cdcd;
+}
+.o_layout.o_tech_theme .o_mail_snippet_general .bg-beta {
+  background-color: #59cdcd;
+}
+.o_layout.o_tech_theme .o_mail_snippet_general .bg-beta .btn.btn-primary {
+  color: white;
+  background-color: #a17e92;
+}
+.o_layout.o_tech_theme .o_mail_snippet_general .text-beta {
+  color: #59cdcd;
+}
+.o_layout.o_tech_theme .o_mail_snippet_general .bg-delta {
+  background-color: #a17e92;
+}
+.o_layout.o_tech_theme .o_mail_snippet_general h1,
+.o_layout.o_tech_theme .o_mail_snippet_general h2,
+.o_layout.o_tech_theme .o_mail_snippet_general h3,
+.o_layout.o_tech_theme .o_mail_snippet_general h4,
+.o_layout.o_tech_theme .o_mail_snippet_general h5,
+.o_layout.o_tech_theme .o_mail_snippet_general h6,
+.o_layout.o_tech_theme .o_mail_snippet_general .h1,
+.o_layout.o_tech_theme .o_mail_snippet_general .h2,
+.o_layout.o_tech_theme .o_mail_snippet_general .h3,
+.o_layout.o_tech_theme .o_mail_snippet_general .h4,
+.o_layout.o_tech_theme .o_mail_snippet_general .h5,
+.o_layout.o_tech_theme .o_mail_snippet_general .h6 {
+  color: #e6e6e6;
+}
+.o_layout.o_tech_theme .o_mail_block_header_social .o_mail_snippet_general,
+.o_layout.o_tech_theme .o_mail_block_header_text_social .o_mail_snippet_general,
+.o_layout.o_tech_theme .o_mail_block_header_logo .o_mail_snippet_general {
+  margin-top: 10px;
+  margin-bottom: 25px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.o_layout.o_tech_theme .o_mail_block_header_social .o_mail_snippet_general > table,
+.o_layout.o_tech_theme .o_mail_block_header_text_social .o_mail_snippet_general > table,
+.o_layout.o_tech_theme .o_mail_block_header_logo .o_mail_snippet_general > table {
+  max-width: 560px;
+  border-bottom: 1px solid #666666;
+}
+.o_layout.o_tech_theme .o_mail_block_header_social .o_mail_h_padding.o_mail_v_padding,
+.o_layout.o_tech_theme .o_mail_block_header_text_social .o_mail_h_padding.o_mail_v_padding,
+.o_layout.o_tech_theme .o_mail_block_header_logo .o_mail_h_padding.o_mail_v_padding {
+  padding: 10px 0 5px;
+}
+.o_layout.o_tech_theme .o_mail_block_header_social .o_mail_header_social,
+.o_layout.o_tech_theme .o_mail_block_header_text_social .o_mail_header_social,
+.o_layout.o_tech_theme .o_mail_block_header_logo .o_mail_header_social {
+  margin-right: 0px;
+}
+.o_layout.o_tech_theme .o_mail_block_header_social .o_mail_header_social a,
+.o_layout.o_tech_theme .o_mail_block_header_text_social .o_mail_header_social a,
+.o_layout.o_tech_theme .o_mail_block_header_logo .o_mail_header_social a {
+  color: #999999;
+}
+.o_layout.o_tech_theme .o_mail_block_footer_separator .separator {
+  height: 1px;
+  background-color: #666666;
+}
+.o_layout.o_tech_theme .o_mail_block_event {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.o_layout.o_tech_theme .o_mail_block_event h1,
+.o_layout.o_tech_theme .o_mail_block_event h2,
+.o_layout.o_tech_theme .o_mail_block_event h3,
+.o_layout.o_tech_theme .o_mail_block_event h4,
+.o_layout.o_tech_theme .o_mail_block_event h5,
+.o_layout.o_tech_theme .o_mail_block_event h6,
+.o_layout.o_tech_theme .o_mail_block_event .h1,
+.o_layout.o_tech_theme .o_mail_block_event .h2,
+.o_layout.o_tech_theme .o_mail_block_event .h3,
+.o_layout.o_tech_theme .o_mail_block_event .h4,
+.o_layout.o_tech_theme .o_mail_block_event .h5,
+.o_layout.o_tech_theme .o_mail_block_event .h6 {
+  color: #333;
+}
+.o_layout.o_tech_theme .o_mail_block_discount2 .o_code {
+  color: #333;
+}
+.o_layout.o_tech_theme .o_mail_block_footer_separator {
+  margin-left: 0;
+  margin-right: 0;
+}
+.o_layout.o_tech_theme .o_mail_block_steps {
+  background-color: transparent;
+}
+.o_layout.o_tech_theme .o_mail_block_steps h1,
+.o_layout.o_tech_theme .o_mail_block_steps h2,
+.o_layout.o_tech_theme .o_mail_block_steps h3,
+.o_layout.o_tech_theme .o_mail_block_steps h4,
+.o_layout.o_tech_theme .o_mail_block_steps h5,
+.o_layout.o_tech_theme .o_mail_block_steps h6,
+.o_layout.o_tech_theme .o_mail_block_steps .h1,
+.o_layout.o_tech_theme .o_mail_block_steps .h2,
+.o_layout.o_tech_theme .o_mail_block_steps .h3,
+.o_layout.o_tech_theme .o_mail_block_steps .h4,
+.o_layout.o_tech_theme .o_mail_block_steps .h5,
+.o_layout.o_tech_theme .o_mail_block_steps .h6 {
+  color: #333;
+}
+.o_layout.o_tech_theme .o_mail_block_steps .o_mail_full_width_padding > tbody > tr {
+  background-color: white;
+  color: #333;
+}
+.o_layout.o_tech_theme .o_mail_block_footer_social .o_mail_snippet_general {
+  background: rgba(0, 0, 0, 0);
+  background: transparent;
+}
+.o_layout.o_tech_theme .o_mail_block_footer_social .o_mail_table_styles {
+  border-top: none;
+}
+.o_layout.o_tech_theme .o_mail_block_footer_social .o_mail_footer_social a {
+  color: #999999;
+}
+.o_layout.o_tech_theme .o_mail_block_footer_social .o_mail_footer_links a {
+  color: #999999;
+}
+.o_layout.o_tech_theme .o_mail_block_footer_social .o_mail_footer_copy {
+  font-weight: bold;
+  font-size: 9px;
+  color: #b3b3b3;
+}
+.o_layout.o_tech_theme .o_mail_block_footer_social.o_mail_footer_social_left .o_mail_footer_description {
+  padding-left: 0;
+}
+.o_layout.o_tech_theme .o_mail_block_footer_social.o_mail_footer_social_left .o_mail_footer_social {
+  padding-right: 0;
+}
diff --git a/addons/mass_mailing/static/src/css/snippet_styles.css b/addons/mass_mailing/static/src/css/snippet_styles.css
deleted file mode 100644
index 2035ea37ea1..00000000000
--- a/addons/mass_mailing/static/src/css/snippet_styles.css
+++ /dev/null
@@ -1,83 +0,0 @@
-@media screen and (max-width: 320px) {
-    .mobile-col {
-        width: 600px;
-    }
-}
-
-/* ======================== TYPO ====================== */
-
-.display-coupon, .display-1, .display-2, .display-3, p, th, td, a, .table-styles {
-    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-    font-weight:300;
-    text-decoration: none !important;
-}
-.display-coupon {
-    font-size:60px;
-}
-.display-1 {
-    font-size: 30px;
-}
-.display-2 {
-    font-size: 25px;
-}
-.display-3 {
-    font-size: 18px;
-}
-p, th, td {
-    text-align:left;
-    font-size:14px;
-}
-a, a:hover {
-    color: inherit;
-}
-.text-center {
-    text-align: center;
-}
-
-/* ======================== MISC ====================== */
-
-.horizontal-padding {
-    padding-left: 20px;
-    padding-right: 20px;
-}
-.vertical-padding {
-    padding-top: 20px;
-    padding-bottom: 20px;
-}
-.no-margin {
-    margin: 0;
-}
-.table-styles {
-    border-collapse:separate;
-}
-.snippet-general {
-    width:600px;
-    margin:0 auto;
-    color:#464646;
-}
-.newsletter-btn {
-    -webkit-user-select: none;
-    padding: 6px 12px;
-    font-size: 14px;
-    color: #ffffff;
-    border: none;
-    text-decoration: none;
-    display: inline-block;
-    font-weight: 400;
-    font-family: 'Helvetica';
-    text-align: center;
-    cursor: pointer;
-    background-color: #34c9a4;
-}
-
-/* ======================== SNIPPETS ====================== */
-
-.separator {
-    height: 1px;
-    background-color: #e3e3e3;
-}
-.banner {
-    width:600px;
-    margin:0 auto;
-    padding:0;
-}
diff --git a/addons/mass_mailing/static/src/css/themes/airmail.css b/addons/mass_mailing/static/src/css/themes/airmail.css
deleted file mode 100644
index 655d4bd19ee..00000000000
--- a/addons/mass_mailing/static/src/css/themes/airmail.css
+++ /dev/null
@@ -1,77 +0,0 @@
-/*Airmail Template*/
-
-.o_airmail_theme_header, .o_airmail_theme_footer {
-    background-color: #d05d68;
-}
-.o_airmail_theme {
-    background-color: #ededed;
-}
-.o_airmail_theme_container {
-    background-color: white;
-    box-shadow: none;
-}
-
-/*Colors*/
-
-.o_airmail_theme .bg-alpha {
-    background-color: #fff;
-}
-.o_airmail_theme .bg-alpha p, .o_airmail_theme .bg-alpha .display-1, .o_airmail_theme .bg-alpha .display-2, .o_airmail_theme .bg-alpha .display-3 {
-    color: #000;
-}
-.o_airmail_theme .bg-beta {
-    background-color: #6077a8;
-}
-.o_airmail_theme .bg-beta p, .o_airmail_theme .bg-beta .display-1, .o_airmail_theme .bg-beta .display-2, .o_airmail_theme .bg-beta .display-3 {
-    color: #fff;
-}
-.o_airmail_theme .bg-beta .link-color {
-    color: #dab4a8;
-}
-.o_airmail_theme .bg-gamma {
-    background-color: #a17e92;
-}
-.o_airmail_theme .bg-gamma .link-color {
-    color: #dab4a8;
-}
-.o_airmail_theme .bg-gamma p, .o_airmail_theme .bg-gamma .display-1, .o_airmail_theme .bg-gamma .display-2, .o_airmail_theme .bg-gamma .display-3 {
-    color: #fff;
-}
-.o_airmail_theme .bg-delta {
-    background-color: #dab4a8;
-}
-.o_airmail_theme .bg-delta p, .o_airmail_theme .bg-delta .display-1, .o_airmail_theme .bg-delta .display-2, .o_airmail_theme .bg-delta .display-3 {
-    color: #000;
-}
-.o_airmail_theme .bg-epsilon {
-    background-color: #d05d68;
-}
-.o_airmail_theme .bg-epsilon p, .o_airmail_theme .bg-epsilon .display-1, .o_airmail_theme .bg-epsilon .display-2, .o_airmail_theme .bg-epsilon .display-3 {
-    color: #fff;
-}
-.o_airmail_theme .bg-epsilon .link-color {
-    color: #fff;
-}
-
-/*Link color*/
-
-.o_airmail_theme .link-color {
-    color: #d05d68;
-}
-
-/*BTN styles*/
-
-.o_airmail_theme .newsletter-btn {
-    color: #d05d68;
-    border: 1px solid #d05d68;
-    border-radius: 4px;
-    background-color: transparent;
-}
-.o_airmail_theme .bg-gamma .newsletter-btn {
-    color: #fff;
-    border: 1px solid #fff;
-}
-.o_airmail_theme .bg-epsilon .newsletter-btn {
-    color: #fff;
-    border: 1px solid #fff;
-}
diff --git a/addons/mass_mailing/static/src/css/themes/lemon.css b/addons/mass_mailing/static/src/css/themes/lemon.css
deleted file mode 100644
index df6a83f9e17..00000000000
--- a/addons/mass_mailing/static/src/css/themes/lemon.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* ======================== COLORS ====================== */
-
-.o_lemon_theme {
-    background-color: #fff;
-}
-.o_lemon_theme_header {
-    background-color: #fe4e1e;
-}
-.o_lemon_theme_container {
-    background-color: #f4ea00;
-}
-
-.o_lemon_theme p {
-    color: #000;
-}
-.o_lemon_theme .bg-alpha {
-    background-color: #fff;
-}
-.o_lemon_theme .bg-alpha .display-1, .o_lemon_theme .bg-alpha p, .o_lemon_theme .bg-alpha .display-2, .o_lemon_theme .bg-alpha .display-3{
-    color: #000;
-}
-.o_lemon_theme .bg-beta {
-    background-color: #f4ea00;
-}
-.o_lemon_theme .bg-beta p, .o_lemon_theme .bg-beta .display-1, .o_lemon_theme .bg-beta .display-2, .o_lemon_theme .bg-beta .display-3 {
-    color: #000;
-}
-.o_lemon_theme .bg-gamma {
-    background-color: #d6d5b6;
-}
-.o_lemon_theme .bg-gamma p, .o_lemon_theme .bg-gamma .display-1, .o_lemon_theme .bg-gamma .display-2, .o_lemon_theme .bg-gamma .display-3 {
-    color: #000;
-}
-.o_lemon_theme .bg-gamma .link-color {
-    color: #fe4e1e;
-}
-.o_lemon_theme .bg-delta {
-    background-color: #000;
-}
-.o_lemon_theme .bg-delta p, .o_lemon_theme .bg-delta .display-1, .o_lemon_theme .bg-delta .display-2, .o_lemon_theme .bg-delta .display-3 {
-    color: #fff;
-}
-.o_lemon_theme .bg-delta .link-color {
-    color: #fe4e1e;
-}
-.o_lemon_theme .bg-epsilon {
-    background-color: #fe4e1e;
-}
-.o_lemon_theme .bg-epsilon p, .o_lemon_theme .bg-epsilon .display-1, .o_lemon_theme .bg-epsilon .display-2, .o_lemon_theme .bg-epsilon .display-3 {
-    color: #fff;
-}
-.o_lemon_theme .bg-epsilon .link-color {
-    color: #f4ea00;
-}
-
-.o_lemon_theme .link-color {
-    color: #fe4e1e;
-}
-
-/*BTN styles*/
-
-.o_lemon_theme .newsletter-btn {
-    color: #fff;
-    background-color: #fe4e1e;
-    font-size: 12px;
-}
-
-/*Snippet styles*/
-
-.o_lemon_theme .separator {
-    background-color: #fff;
-}
-.o_lemon_theme .snippet-general {
-    margin:0 auto;
-}
diff --git a/addons/mass_mailing/static/src/css/themes/tech.css b/addons/mass_mailing/static/src/css/themes/tech.css
deleted file mode 100644
index 00ea206cd48..00000000000
--- a/addons/mass_mailing/static/src/css/themes/tech.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* ======================== COLORS ====================== */
-
-.o_tech_theme {
-    background-color: #fff;
-}
-.o_tech_theme_header {
-    background-color: #e3e3e3;
-}
-
-.o_tech_theme p {
-    color: #494949;
-}
-.o_tech_theme .bg-alpha {
-    background-color: #fff;
-}
-.o_tech_theme .bg-alpha .display-1, .o_tech_theme .bg-alpha p, .o_tech_theme .bg-alpha .display-2, .o_tech_theme .bg-alpha .display-3{
-    color: #000;
-}
-.o_tech_theme .bg-beta {
-    background-color: #dadada;
-}
-.o_tech_theme .bg-beta p, .o_tech_theme .bg-beta .display-1, .o_tech_theme .bg-beta .display-2, .o_tech_theme .bg-beta .display-3 {
-    color: #000;
-}
-.o_tech_theme .bg-beta .link-color {
-    color: #de5745;
-}
-.o_tech_theme .bg-gamma {
-    background-color: #de5745;
-}
-.o_tech_theme .bg-gamma p, .o_tech_theme .bg-gamma .display-1, .o_tech_theme .bg-gamma .display-2, .o_tech_theme .bg-gamma .display-3 {
-    color: #fff;
-}
-.o_tech_theme .bg-gamma .link-color {
-    color: #ccda3f;
-}
-.o_tech_theme .bg-delta {
-    background-color: #4a9fba;
-}
-.o_tech_theme .bg-delta p, .o_tech_theme .bg-delta .display-1, .o_tech_theme .bg-delta .display-2, .o_tech_theme .bg-delta .display-3 {
-    color: #fff;
-}
-.o_tech_theme .bg-delta .link-color {
-    color: #ccda3f;
-}
-.o_tech_theme .bg-epsilon {
-    background-color: #ccda3f;
-}
-.o_tech_theme .bg-epsilon p, .o_tech_theme .bg-epsilon .display-1, .o_tech_theme .bg-epsilon .display-2, .o_tech_theme .bg-epsilon .display-3 {
-    color: #000;
-}
-.o_tech_theme .bg-epsilon .link-color {
-    color: #de5745;
-}
-
-.o_tech_theme .link-color {
-    color: #ccda3f;
-}
-
-/*BTN styles*/
-
-.o_tech_theme .newsletter-btn {
-    color: #fff;
-    background-color: #ccda3f;
-    font-size: 12px;
-}
-.o_tech_theme .bg-epsilon .newsletter-btn {
-    background-color: #de5745;
-}
-
-/*Snippet styles*/
-
-.o_tech_theme .snippet-general {
-    margin:0 auto;
-}
diff --git a/addons/mass_mailing/static/src/css/themes/theme_airmail.less b/addons/mass_mailing/static/src/css/themes/theme_airmail.less
new file mode 100644
index 00000000000..fdb02d0fa00
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_airmail.less
@@ -0,0 +1,211 @@
+// out: ../compiled/theme_airmail.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+
+@o_mm_airmail_color_alpha   : #EAECED;
+@o_mm_airmail_color_beta    : white;
+@o_mm_airmail_color_gamma   : #FB3C6B;
+@o_mm_airmail_color_delta   : darken(@o_mm_airmail_color_gamma, 5%);
+@o_mm_airmail_color_epsilon : black;
+@o_mm_airmail_color_zeta    : #a17e92;
+
+
+.o_layout.o_airmail_theme {
+    background-color: @o_mm_airmail_color_alpha;
+
+    .o_mail_wrapper {
+        background: rgba(0,0,0,0);
+        background: transparent;
+        border: none;
+    }
+
+    // ===========   Components
+
+    .o_mail_snippet_general {
+        background-color: @o_mm_airmail_color_beta;
+        color: @o_mm_airmail_color_epsilon;
+
+        .btn.btn-primary {
+            color: @o_mm_airmail_color_beta;
+            background-color: @o_mm_airmail_color_gamma;
+        }
+
+        a, .o_mail_link {
+            color: @o_mm_airmail_color_delta;
+        }
+
+        .bg-beta {
+            background-color: @o_mm_airmail_color_gamma;
+
+            .btn.btn-primary {
+                color: @o_mm_airmail_color_beta;
+                background-color: @o_mm_airmail_color_zeta;
+            }
+
+            h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+                color: @o_mm_airmail_color_beta;
+            }
+        }
+        .text-beta {
+            color: @o_mm_airmail_color_gamma;
+        }
+
+        .bg-delta {
+            background-color: @o_mm_airmail_color_zeta;
+        }
+    }
+
+    // =========== Snippets
+
+    .o_mail_wrapper {
+        > div { // All snippets
+            margin-bottom: 16px;
+        }
+    }
+
+    .o_mail_wrapper {
+        .o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
+            margin-bottom: 0;
+
+            .o_mail_snippet_general {
+                background: rgba(0,0,0,0);
+                background: transparent;
+            }
+
+            .o_mail_h_padding {
+                padding-left: 0;
+                padding-right: 0;
+            }
+
+            .o_mail_header_social {
+                margin-right: 0px;
+                a {
+                    color: darken(@o_mm_airmail_color_alpha, 40%);
+                }
+            }
+        }
+    }
+
+    .o_mail_block_event {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .o_mail_block_footer_separator {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .o_mail_block_image {
+        .o_mail_h_padding {
+            padding: 0;
+            .o_mail_col_mv {
+                padding-left: 20px;
+                padding-right: 20px;
+            }
+            > img {
+                padding: 0;
+                margin-bottom: 15px;
+            }
+        }
+    }
+
+    .o_mail_block_footer_separator {
+        .o_mail_snippet_general {
+            background: rgba(0,0,0,0);
+            background: transparent;
+
+            .separator {
+                height: 3px;
+                background-color: darken(@o_mm_airmail_color_alpha, 10%);
+                border-bottom: 2px solid darken(white, 3%);
+            }
+        }
+    }
+
+    .o_mail_block_banner {
+    }
+
+    .o_mail_block_two_cols, .o_mail_block_three_cols {
+        @tmp-gap: 10px;
+
+        table {
+            width: 110%;
+            max-width: (600+(@tmp-gap*2));
+            margin: auto (@tmp-gap*-1);
+        }
+        .o_mail_snippet_general {
+            background: rgba(0,0,0,0);
+            background: transparent;
+        }
+        .o_mail_col_container {
+            padding: 0 0 (@tmp-gap*2);
+            margin: 0 @tmp-gap;
+            border-top: 1px solid darken(@o_mm_airmail_color_beta, 10%);
+            border-bottom: 1px solid darken(@o_mm_airmail_color_alpha, 5%);
+            background-color: @o_mm_airmail_color_beta;
+
+            > * {
+                padding: 0 (@tmp-gap*2);
+            }
+
+            img {
+                padding: 0!important;
+            }
+        }
+    }
+
+    .o_mail_block_footer_tag_line {
+        table.o_mail_h_padding {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+    .o_mail_block_image_text {
+        .o_mail_img_container {
+            padding: 0
+        }
+    }
+
+    .o_mail_block_text_image {
+        .o_mail_img_container {
+            padding: 0
+        }
+    }
+
+    .o_mail_block_footer_social {
+        .o_mail_snippet_general {
+            background: rgba(0,0,0,0);
+            background: transparent;
+            margin-top: 30px;
+            border-top: 1px solid  darken(@o_mm_airmail_color_alpha, 10%);
+        }
+
+        .o_mail_footer_social {
+            border: none;
+            a {
+                color: darken(@o_mm_airmail_color_alpha, 40%);
+            }
+        }
+
+        .o_mail_footer_links a {
+            color: darken(@o_mm_airmail_color_alpha, 40%);
+        }
+
+        .o_mail_footer_copy {
+            font-weight: bold;
+            font-size: 9px;
+            color: darken(@o_mm_airmail_color_alpha, 30%);
+        }
+
+        &.o_mail_footer_social_left {
+            .o_mail_footer_description {
+                padding-left: 0;
+            }
+            .o_mail_footer_social {
+                padding-right: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/mass_mailing/static/src/css/themes/theme_default.less b/addons/mass_mailing/static/src/css/themes/theme_default.less
new file mode 100644
index 00000000000..55e9424001b
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_default.less
@@ -0,0 +1,284 @@
+// out: ../compiled/theme_default.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+// =======================================
+// ========== Mass Mailing "Theme Default"
+// =======================================
+
+
+// ===========   Variables
+
+// 'Default Theme' Palette
+@o_mm_def_color_alpha   : #f5f5f5;
+@o_mm_def_color_beta    : #ffffff;
+@o_mm_def_color_gamma   : #706482;
+@o_mm_def_color_delta   : #464646;
+@o_mm_def_color_epsilon : darken(@o_mm_def_color_gamma, 5%);
+@o_mm_def_color_zeta    : #706482;
+@o_mm_def_color_eta     : #87a6b5;
+
+
+// Assign 'Default Theme' Variables
+@o_mm_def_body_width    : 600px;
+@o_mm_def_body_bobile   : 480px;
+@o_mm_def_b_radius      : 2px;
+
+@o_mm_def_font          : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+@o_mm_def_text_color    : @o_mm_def_color_delta;
+
+@o_mm_def_btn_bg        : @o_mm_def_color_gamma;
+@o_mm_def_btn_text      : @o_mm_def_color_beta;
+
+
+// ===========   Editor
+
+#web_editor_inside_iframe {
+    #wrapwrap > main #editable_area {
+        background-color: transparent;
+    }
+}
+
+
+// ===========   Components
+
+.o_layout {
+    font-family: @o_mm_def_font;
+    color: lighten(@o_mm_def_text_color, 20%);
+    overflow: hidden;
+    width: 100%;
+    min-height: 100%;
+    background-color: @o_mm_def_color_alpha;
+    padding-bottom: 20px;
+
+    .o_mail_wrapper {
+        width: 100%;
+        max-width: @o_mm_def_body_width;
+        margin: auto;
+        border: 1px solid darken(@o_mm_def_color_alpha, 2%);
+        background-color: @o_mm_def_color_beta;
+    }
+}
+
+
+.o_mail_snippet_general {
+    width: 100%;
+    max-width: @o_mm_def_body_width;
+    margin: 0 auto;
+
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        color: @o_mm_def_text_color;
+    }
+
+
+    .btn.btn-primary {
+        -webkit-user-select: none;
+        color: @o_mm_def_btn_text;
+        border: none;
+        text-decoration: none;
+        font-weight: normal;
+        font-family: @o_mm_def_font;
+        cursor: pointer;
+        border-radius: @o_mm_def_b_radius;
+        background-color: @o_mm_def_btn_bg;
+    }
+
+    a, .btn.btn-link {
+        color: @o_mm_def_color_epsilon;
+        font-weight: bold;
+        text-decoration: none !important;
+
+        &:hover, &:focus, &:active {
+            text-decoration: none !important;
+        }
+    }
+
+    img {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+    }
+
+    .separator {
+        height: 2px;
+        background-color: @o_mm_def_color_alpha;
+    }
+
+    .bg-beta {
+        background-color: @o_mm_def_color_zeta;
+        color:  @o_mm_def_color_beta;
+
+        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+            color: @o_mm_def_color_beta;
+        }
+    }
+    .text-beta {
+        color: @o_mm_def_color_zeta;
+    }
+
+    .bg-delta {
+        background-color: @o_mm_def_color_eta;
+    }
+
+    .bg-gray-lighter {
+        background-color: @o_mm_def_color_alpha;
+    }
+}
+
+
+// ===========   Snippets
+
+.o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
+    .o_mail_logo_container {
+        img {
+            width: auto;
+        }
+    }
+    .o_mail_header_social {
+        margin-right: 20px;
+    }
+}
+
+.o_mail_block_header_text_social {
+    h3 {
+        font-weight: bold;
+    }
+}
+
+.o_mail_block_steps {
+    background-color: @o_mm_def_color_alpha;
+}
+
+.o_mail_block_two_cols, .o_mail_block_three_cols {
+    font-size: small;
+
+    .o_mail_col_container {
+        padding: 10px 20px;
+
+        h4 {
+            margin-top: 15px;
+        }
+    }
+}
+
+.o_mail_block_image_text, .o_mail_block_text_image {
+    font-size: small;
+}
+
+.o_mail_block_event {
+    margin-left: 20px;
+    margin-right: 20px;
+    .o_mail_snippet_general{
+        background: darken(@o_mm_def_color_alpha, 2%);
+    }
+}
+
+.o_mail_block_footer_separator {
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.o_mail_block_comparison_table {
+    .separator {
+        height: 1px;
+        background-color: darken(@o_mm_def_color_alpha, 15%);
+    }
+}
+
+.o_mail_block_discount2 {
+    .o_code {
+        padding: 5px 10px;
+        background: @o_mm_def_color_alpha;
+        border-radius: 3px;
+        font-family: monospace;
+    }
+}
+
+.o_mail_block_footer_social {
+    .o_mail_table_styles {
+        border-top: 2px solid @o_mm_def_color_alpha;
+        padding-top: 20px;
+    }
+
+    .o_mail_footer_links {
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        .btn-link{
+            padding: 0;
+            font-size: 12px;
+        }
+    }
+
+    .o_mail_footer_copy {
+        font-size: 9px;
+        font-weight: bold;
+        color: lighten(@o_mm_def_text_color, 30%);
+    }
+
+    &.o_mail_footer_social_center {
+        .o_mail_footer_social, .o_mail_footer_links, .o_mail_footer_copy {
+            text-align: center;
+        }
+    }
+
+    &.o_mail_footer_social_left {
+        .o_mail_footer_description {
+            padding-left: 20px;
+        }
+        .o_mail_footer_social {
+            padding-right: 20px;
+            text-align: right;
+            vertical-align: top;
+
+            .btn-link{
+                padding: 0;
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+// ===========   Typography
+
+
+.o_mail_display_coupon {
+    font-size: 50px;
+    line-height: 1;
+}
+
+/* ======================== MISC ====================== */
+
+.o_mail_h_padding {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.o_mail_v_padding {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+.o_mail_no_margin {
+    margin: 0;
+
+    &.o_mail_display_coupon {
+        line-height: 1.1;
+    }
+}
+.o_mail_table_styles {
+    width: 100%;
+    border-collapse:separate;
+}
+
+// =========== Mobile
+
+@media screen and (max-width: @o_mm_def_body_bobile) {
+    .o_mail_col_mv {
+        display: block!important;
+        max-width: @o_mm_def_body_bobile!important;
+        width: 100%!important;
+    }
+
+    .o_mail_table_styles {
+        max-width: @o_mm_def_body_bobile!important;
+        width: 100%!important;
+    }
+}
diff --git a/addons/mass_mailing/static/src/css/themes/theme_newsletter.less b/addons/mass_mailing/static/src/css/themes/theme_newsletter.less
new file mode 100644
index 00000000000..7962c9bdfc3
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_newsletter.less
@@ -0,0 +1,41 @@
+// out: ../compiled/theme_newsletter.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+
+// ===========   Variables
+
+// 'Default Theme' Palette
+@o_mm_news_color_alpha   : #f5f5f5;
+@o_mm_news_color_beta    : #ffffff;
+@o_mm_news_color_gamma   : #1cc1a9;
+@o_mm_news_color_delta   : #464646;
+@o_mm_news_color_epsilon : darken(@o_mm_news_color_gamma, 5%);
+@o_mm_news_color_zeta    : #906784;
+@o_mm_news_color_eta     : #87a6b5;
+
+
+// ===========   Components
+
+.o_layout.o_newsletter_theme {
+    .o_mail_snippet_general {
+        .btn.btn-primary {
+            color: @o_mm_news_color_beta;
+            background-color: @o_mm_news_color_gamma;
+        }
+        a, .btn.btn-link {
+            color: @o_mm_news_color_epsilon;
+        }
+        .bg-beta {
+            background-color: @o_mm_news_color_zeta;
+            color:  @o_mm_news_color_beta;
+        }
+        .text-beta {
+            color: @o_mm_news_color_zeta;
+        }
+
+        .bg-delta {
+            background-color: @o_mm_news_color_eta;
+        }
+    }
+}
+
diff --git a/addons/mass_mailing/static/src/css/themes/theme_resto.less b/addons/mass_mailing/static/src/css/themes/theme_resto.less
new file mode 100644
index 00000000000..2b46dc2e4b7
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_resto.less
@@ -0,0 +1,111 @@
+// out: ../compiled/theme_resto.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+@o_mm_resto_color_alpha   : #f0ede0;
+@o_mm_resto_color_beta    : #ffffff;
+@o_mm_resto_color_gamma   : #E96D1F;
+@o_mm_resto_color_delta   : #712b22;
+@o_mm_resto_color_epsilon : darken(@o_mm_resto_color_gamma, 5%);
+@o_mm_resto_color_zeta    : #795745;
+
+#web_editor_inside_iframe.o_resto_theme  {
+    background-color: @o_mm_resto_color_alpha;
+}
+
+.o_layout.o_resto_theme {
+    background-color: @o_mm_resto_color_alpha;
+
+    .o_mail_wrapper {
+        border: none;
+        background-color:transparent;
+    }
+
+
+    // ===========   Components
+
+    .o_mail_snippet_general {
+        background: rgba(0,0,0,0);
+        background: transparent;
+        color: @o_mm_resto_color_delta;
+
+        .btn.btn-primary {
+            color: @o_mm_resto_color_beta;
+            background-color: @o_mm_resto_color_gamma;
+        }
+
+        a, .o_mail_link {
+            font-weight: normal;
+            color: @o_mm_resto_color_epsilon;
+        }
+
+        .bg-beta {
+            background-color: @o_mm_resto_color_zeta;
+            color: @o_mm_resto_color_beta;
+
+            h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+                color: @o_mm_resto_color_beta;
+            }
+        }
+
+        .text-beta {
+            color: @o_mm_resto_color_zeta;
+        }
+
+        .bg-delta {
+            background-color: @o_mm_resto_color_gamma;
+            color: @o_mm_resto_color_beta;
+
+            h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+                color: @o_mm_resto_color_beta;
+            }
+        }
+
+        .text-delta {
+            color: @o_mm_resto_color_epsilon;
+        }
+
+        .separator {
+            background-color: lighten(@o_mm_resto_color_zeta, 20%);
+        }
+    }
+
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        color: darken(@o_mm_resto_color_zeta, 10%);
+        font-weight: bold;
+    }
+
+    // ===========   Snippets
+    .o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
+        .o_mail_snippet_general {
+            border-bottom: 5px solid @o_mm_resto_color_gamma;
+        }
+
+        .o_mail_header_social {
+            a {
+                color: @o_mm_resto_color_gamma;
+            }
+        }
+    }
+
+    .o_mail_block_steps {
+        border-top: 2px solid @o_mm_resto_color_gamma;
+        background: @o_mm_resto_color_beta;
+    }
+
+    .o_mail_block_event {
+        .o_mail_snippet_general{
+            background: darken(@o_mm_resto_color_beta, 2%);
+        }
+    }
+    .o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo, .o_mail_block_steps, .o_mail_block_event, .o_mail_block_banner {
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    .o_mail_block_footer_social {
+        .o_mail_table_styles {
+            border-top: 2px solid lighten(@o_mm_resto_color_zeta, 20%);
+            padding-top: 20px;
+        }
+    }
+}
diff --git a/addons/mass_mailing/static/src/css/themes/theme_tech.less b/addons/mass_mailing/static/src/css/themes/theme_tech.less
new file mode 100644
index 00000000000..dfb49eab2f9
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_tech.less
@@ -0,0 +1,167 @@
+// out: ../compiled/theme_tech.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+
+@o_mm_tech_color_alpha   : #333;
+@o_mm_tech_color_beta    : white;
+@o_mm_tech_color_gamma   : #59cdcd;
+@o_mm_tech_color_delta   : #bdbdbd;
+@o_mm_tech_color_epsilon : black;
+@o_mm_tech_color_zeta    : #a17e92;
+
+
+
+.o_layout.o_tech_theme {
+    background-color: @o_mm_tech_color_alpha;
+
+    .o_mail_wrapper {
+        background-color: transparent;
+        color: @o_mm_tech_color_delta;
+        border: none;
+    }
+
+    // ===========   Components
+
+    .o_mail_snippet_general {
+
+        .btn.btn-primary {
+            color: @o_mm_tech_color_beta;
+            background-color: @o_mm_tech_color_gamma;
+        }
+        .o_mail_full_width_padding {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+        a, .o_mail_link {
+            font-weight: normal;
+            color: @o_mm_tech_color_gamma;
+        }
+
+        .bg-beta {
+            background-color: @o_mm_tech_color_gamma;
+
+            .btn.btn-primary {
+                color: @o_mm_tech_color_beta;
+                background-color: @o_mm_tech_color_zeta;
+            }
+        }
+        .text-beta {
+            color: @o_mm_tech_color_gamma;
+        }
+
+        .bg-delta {
+            background-color: @o_mm_tech_color_zeta;
+        }
+
+
+        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+            color: darken(@o_mm_tech_color_beta, 10%);
+        }
+    }
+
+    // =========== Snippets
+
+    .o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
+        .o_mail_snippet_general {
+            margin-top: 10px;
+            margin-bottom: 25px;
+            padding-left: 20px;
+            padding-right: 20px;
+
+            > table {
+                max-width: 560px;
+                border-bottom: 1px solid darken(@o_mm_tech_color_beta, 60%);
+            }
+        }
+
+        .o_mail_h_padding.o_mail_v_padding {
+            padding: 10px 0 5px;
+        }
+
+        .o_mail_header_social {
+            margin-right: 0px;
+            a {
+                color: darken(@o_mm_tech_color_beta, 40%);
+            }
+        }
+    }
+
+    .o_mail_block_footer_separator {
+        .separator {
+            height: 1px;
+            background-color: darken(@o_mm_tech_color_beta, 60%);
+        }
+    }
+
+    .o_mail_block_event {
+        margin-left: 20px;
+        margin-right: 20px;
+
+        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+            color: @o_mm_tech_color_alpha;
+        }
+    }
+
+    .o_mail_block_discount2 {
+        .o_code {
+            color: @o_mm_tech_color_alpha;
+        }
+    }
+
+    .o_mail_block_footer_separator {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .o_mail_block_steps {
+        background-color: transparent;
+
+        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+            color: @o_mm_tech_color_alpha;
+        }
+
+        .o_mail_full_width_padding > tbody > tr  {
+            background-color: @o_mm_tech_color_beta;
+            color: @o_mm_tech_color_alpha;
+        }
+    }
+
+    .o_mail_block_footer_tag_line {
+    }
+
+    .o_mail_block_footer_social {
+        .o_mail_snippet_general {
+            background: rgba(0,0,0,0);
+            background: transparent;
+        }
+
+        .o_mail_table_styles {
+            border-top: none;
+        }
+
+        .o_mail_footer_social {
+            a {
+                color: darken(@o_mm_tech_color_beta, 40%);
+            }
+        }
+
+        .o_mail_footer_links a {
+            color: darken(@o_mm_tech_color_beta, 40%);
+        }
+
+        .o_mail_footer_copy {
+            font-weight: bold;
+            font-size: 9px;
+            color: darken(@o_mm_tech_color_beta, 30%);
+        }
+
+        &.o_mail_footer_social_left {
+            .o_mail_footer_description {
+                padding-left: 0;
+            }
+            .o_mail_footer_social {
+                padding-right: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/mass_mailing/static/src/img/blocks/block_banner.png b/addons/mass_mailing/static/src/img/blocks/block_banner.png
index d654274d9e8..bcf62bd1e6f 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_banner.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_banner.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_comparison_table.png b/addons/mass_mailing/static/src/img/blocks/block_comparison_table.png
new file mode 100755
index 00000000000..63c810cce2e
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/blocks/block_comparison_table.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_discount1.png b/addons/mass_mailing/static/src/img/blocks/block_discount1.png
index b6142062d72..478d25252ac 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_discount1.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_discount1.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_discount2.png b/addons/mass_mailing/static/src/img/blocks/block_discount2.png
index ff4fba13db9..0a14a91753b 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_discount2.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_discount2.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_event.png b/addons/mass_mailing/static/src/img/blocks/block_event.png
index f75ea319f88..4dba58c9a8a 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_event.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_event.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_footer_separator.png b/addons/mass_mailing/static/src/img/blocks/block_footer_separator.png
index a3b202a8362..6af266fca5c 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_footer_separator.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_footer_separator.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_footer_social.png b/addons/mass_mailing/static/src/img/blocks/block_footer_social.png
index abb0d12ff94..41992607c2b 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_footer_social.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_footer_social.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_footer_social_left.png b/addons/mass_mailing/static/src/img/blocks/block_footer_social_left.png
new file mode 100755
index 00000000000..ee39ed7c068
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/blocks/block_footer_social_left.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_footer_tag_line.png b/addons/mass_mailing/static/src/img/blocks/block_footer_tag_line.png
index 5701891a1b5..73b5a29ea59 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_footer_tag_line.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_footer_tag_line.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_header_logo.png b/addons/mass_mailing/static/src/img/blocks/block_header_logo.png
new file mode 100755
index 00000000000..eae72c936f0
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/blocks/block_header_logo.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_header_social.png b/addons/mass_mailing/static/src/img/blocks/block_header_social.png
index 9aa612f46e0..43aaec4cdc9 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_header_social.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_header_social.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_header_text_social.png b/addons/mass_mailing/static/src/img/blocks/block_header_text_social.png
index db090733574..61bb97fd2b4 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_header_text_social.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_header_text_social.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_image.png b/addons/mass_mailing/static/src/img/blocks/block_image.png
index e0f8901b1d5..e918a8d70f1 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_image.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_image.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_image_text.png b/addons/mass_mailing/static/src/img/blocks/block_image_text.png
index 41b2949a777..de9e18f37c3 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_image_text.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_image_text.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_paragraph.png b/addons/mass_mailing/static/src/img/blocks/block_paragraph.png
new file mode 100755
index 00000000000..bfba996c54a
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/blocks/block_paragraph.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_steps.png b/addons/mass_mailing/static/src/img/blocks/block_steps.png
index 49c59314ea3..e977a1059e5 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_steps.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_steps.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_table_content.png b/addons/mass_mailing/static/src/img/blocks/block_table_content.png
deleted file mode 100644
index 1dd9f1ab4dc..00000000000
--- a/addons/mass_mailing/static/src/img/blocks/block_table_content.png
+++ /dev/null
diff --git a/addons/mass_mailing/static/src/img/blocks/block_text_image.png b/addons/mass_mailing/static/src/img/blocks/block_text_image.png
index ab3d90c19a2..c0832ebd612 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_text_image.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_text_image.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_three_cols.png b/addons/mass_mailing/static/src/img/blocks/block_three_cols.png
index ffb3e955b96..cd72e7b8168 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_three_cols.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_three_cols.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_title_sub.png b/addons/mass_mailing/static/src/img/blocks/block_title_sub.png
index fe7b44867bc..1320ccc538b 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_title_sub.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_title_sub.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_title_text.png b/addons/mass_mailing/static/src/img/blocks/block_title_text.png
index 222975d2aba..399f13c2b94 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_title_text.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_title_text.png
diff --git a/addons/mass_mailing/static/src/img/blocks/block_two_cols.png b/addons/mass_mailing/static/src/img/blocks/block_two_cols.png
index 711e7b0b823..79e19de059d 100644..100755
--- a/addons/mass_mailing/static/src/img/blocks/block_two_cols.png
+++ b/addons/mass_mailing/static/src/img/blocks/block_two_cols.png
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_banner.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_banner.jpg
new file mode 100755
index 00000000000..59e90bc0046
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_banner.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_event.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_event.jpg
new file mode 100755
index 00000000000..2af23b4f136
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_event.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_image.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_image.jpg
new file mode 100755
index 00000000000..f3003107735
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_image_text.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_image_text.jpg
new file mode 100755
index 00000000000..85c6795bc0a
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_image_text.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_text_image.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_text_image.jpg
new file mode 100755
index 00000000000..46ac685df6c
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_text_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_1.jpg
new file mode 100755
index 00000000000..ba47973b427
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_2.jpg
new file mode 100755
index 00000000000..c1e48ec82ae
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_3.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_3.jpg
new file mode 100755
index 00000000000..adf7686eaa9
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_3.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_two_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_two_cols_1.jpg
new file mode 100755
index 00000000000..2b76274d3df
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_two_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_two_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_two_cols_2.jpg
new file mode 100755
index 00000000000..c3c644ceacc
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_block_two_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_logo.png b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_logo.png
new file mode 100755
index 00000000000..1396468359d
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_airmail/s_default_image_logo.png
diff --git a/addons/mass_mailing/static/src/img/theme_default/demo/signature.png b/addons/mass_mailing/static/src/img/theme_default/demo/signature.png
new file mode 100644
index 00000000000..36cb26425d5
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/demo/signature.png
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_banner.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_banner.jpg
new file mode 100755
index 00000000000..e6a85a38b43
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_banner.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_event.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_event.jpg
new file mode 100755
index 00000000000..91fff96b8b4
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_event.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_image.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_image.jpg
new file mode 100755
index 00000000000..3ca5ebb5e6c
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_image_text.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_image_text.jpg
new file mode 100755
index 00000000000..87251f5f46a
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_image_text.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_text_image.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_text_image.jpg
new file mode 100755
index 00000000000..10f6102fd82
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_text_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_three_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_three_cols_1.jpg
new file mode 100755
index 00000000000..fa939c89aae
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_three_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_three_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_three_cols_2.jpg
new file mode 100755
index 00000000000..35a8006b9c1
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_three_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_three_cols_3.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_three_cols_3.jpg
new file mode 100755
index 00000000000..e33e667921c
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_three_cols_3.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_two_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_two_cols_1.jpg
new file mode 100755
index 00000000000..9a55e53533b
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_two_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_two_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_two_cols_2.jpg
new file mode 100755
index 00000000000..38c77b3c178
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_block_two_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_default/s_default_image_logo.png b/addons/mass_mailing/static/src/img/theme_default/s_default_image_logo.png
new file mode 100755
index 00000000000..1f5169a218f
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_default/s_default_image_logo.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/airmail_template_thumb.png b/addons/mass_mailing/static/src/img/theme_imgs/airmail_template_thumb.png
deleted file mode 100644
index ee91687680a..00000000000
--- a/addons/mass_mailing/static/src/img/theme_imgs/airmail_template_thumb.png
+++ /dev/null
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/airmail_thumb_large.png b/addons/mass_mailing/static/src/img/theme_imgs/airmail_thumb_large.png
new file mode 100755
index 00000000000..0546e634929
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/airmail_thumb_large.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/airmail_thumb_logo.png b/addons/mass_mailing/static/src/img/theme_imgs/airmail_thumb_logo.png
new file mode 100755
index 00000000000..7101775ff34
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/airmail_thumb_logo.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/airmail_thumb_small.png b/addons/mass_mailing/static/src/img/theme_imgs/airmail_thumb_small.png
new file mode 100755
index 00000000000..221540bf7f4
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/airmail_thumb_small.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/default_template_thumb.png b/addons/mass_mailing/static/src/img/theme_imgs/default_template_thumb.png
deleted file mode 100644
index dd3f14ae536..00000000000
--- a/addons/mass_mailing/static/src/img/theme_imgs/default_template_thumb.png
+++ /dev/null
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/default_thumb_large.png b/addons/mass_mailing/static/src/img/theme_imgs/default_thumb_large.png
new file mode 100755
index 00000000000..d93ecd63550
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/default_thumb_large.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/default_thumb_logo.png b/addons/mass_mailing/static/src/img/theme_imgs/default_thumb_logo.png
new file mode 100755
index 00000000000..157ab85588c
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/default_thumb_logo.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/default_thumb_small.png b/addons/mass_mailing/static/src/img/theme_imgs/default_thumb_small.png
new file mode 100755
index 00000000000..5c85179781b
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/default_thumb_small.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/lemon_template_thumb.png b/addons/mass_mailing/static/src/img/theme_imgs/lemon_template_thumb.png
deleted file mode 100644
index 5ee59475217..00000000000
--- a/addons/mass_mailing/static/src/img/theme_imgs/lemon_template_thumb.png
+++ /dev/null
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/newsletter_thumb_large.png b/addons/mass_mailing/static/src/img/theme_imgs/newsletter_thumb_large.png
new file mode 100755
index 00000000000..0b2c469aa9f
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/newsletter_thumb_large.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/newsletter_thumb_logo.png b/addons/mass_mailing/static/src/img/theme_imgs/newsletter_thumb_logo.png
new file mode 100755
index 00000000000..60b3d2fcb9d
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/newsletter_thumb_logo.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/newsletter_thumb_small.png b/addons/mass_mailing/static/src/img/theme_imgs/newsletter_thumb_small.png
new file mode 100755
index 00000000000..1cc74a20574
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/newsletter_thumb_small.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/resto_thumb_large.png b/addons/mass_mailing/static/src/img/theme_imgs/resto_thumb_large.png
new file mode 100755
index 00000000000..4b5f3d01781
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/resto_thumb_large.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/resto_thumb_logo.png b/addons/mass_mailing/static/src/img/theme_imgs/resto_thumb_logo.png
new file mode 100755
index 00000000000..9e45931bbdc
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/resto_thumb_logo.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/resto_thumb_small.png b/addons/mass_mailing/static/src/img/theme_imgs/resto_thumb_small.png
new file mode 100755
index 00000000000..68c0f3495b2
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/resto_thumb_small.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/tech_template_thumb.png b/addons/mass_mailing/static/src/img/theme_imgs/tech_template_thumb.png
deleted file mode 100644
index 33b40085d16..00000000000
--- a/addons/mass_mailing/static/src/img/theme_imgs/tech_template_thumb.png
+++ /dev/null
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/tech_thumb_large.png b/addons/mass_mailing/static/src/img/theme_imgs/tech_thumb_large.png
new file mode 100755
index 00000000000..dc992cd423e
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/tech_thumb_large.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/tech_thumb_logo.png b/addons/mass_mailing/static/src/img/theme_imgs/tech_thumb_logo.png
new file mode 100755
index 00000000000..2bcf3a62349
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/tech_thumb_logo.png
diff --git a/addons/mass_mailing/static/src/img/theme_imgs/tech_thumb_small.png b/addons/mass_mailing/static/src/img/theme_imgs/tech_thumb_small.png
new file mode 100755
index 00000000000..0d189dd2299
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_imgs/tech_thumb_small.png
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_banner.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_banner.jpg
new file mode 100755
index 00000000000..8f837a55b19
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_banner.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_event.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_event.jpg
new file mode 100755
index 00000000000..0b11910b534
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_event.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_image.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_image.jpg
new file mode 100755
index 00000000000..09f4e2f5e8d
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_image_text.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_image_text.jpg
new file mode 100755
index 00000000000..cbee8e6dcc0
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_image_text.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_text_image.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_text_image.jpg
new file mode 100755
index 00000000000..32a2c86d1bd
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_text_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_three_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_three_cols_1.jpg
new file mode 100755
index 00000000000..2d2c7a07cf5
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_three_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_three_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_three_cols_2.jpg
new file mode 100755
index 00000000000..264ff911794
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_three_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_three_cols_3.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_three_cols_3.jpg
new file mode 100755
index 00000000000..6ce7085e354
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_three_cols_3.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_two_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_two_cols_1.jpg
new file mode 100755
index 00000000000..a8b2283e08f
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_two_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_two_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_two_cols_2.jpg
new file mode 100755
index 00000000000..461f62d25f2
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_two_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_logo.png b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_logo.png
new file mode 100644
index 00000000000..064f09c1a0a
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_newsletter/s_default_image_logo.png
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_banner.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_banner.jpg
new file mode 100755
index 00000000000..ff792179ae0
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_banner.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_event.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_event.jpg
new file mode 100755
index 00000000000..f6e5b5e5a0d
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_event.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_image.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_image.jpg
new file mode 100755
index 00000000000..3baa1c2c054
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_image_text.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_image_text.jpg
new file mode 100755
index 00000000000..12202654a54
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_image_text.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_text_image.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_text_image.jpg
new file mode 100755
index 00000000000..da0628f3e7e
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_text_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_1.jpg
new file mode 100755
index 00000000000..04865427530
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_2.jpg
new file mode 100755
index 00000000000..98f3e5dd916
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_3.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_3.jpg
new file mode 100755
index 00000000000..1d0ca076cd0
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_3.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_two_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_two_cols_1.jpg
new file mode 100755
index 00000000000..de516297c59
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_two_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_two_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_two_cols_2.jpg
new file mode 100755
index 00000000000..1f00cfad6c3
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_block_two_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_resto/s_default_image_logo.png b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_logo.png
new file mode 100755
index 00000000000..6aab7fc27e2
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_resto/s_default_image_logo.png
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_banner.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_banner.jpg
new file mode 100755
index 00000000000..0c571542311
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_banner.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_event.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_event.jpg
new file mode 100644
index 00000000000..65eafe14ac6
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_event.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_image.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_image.jpg
new file mode 100755
index 00000000000..729547cb164
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_image_text.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_image_text.jpg
new file mode 100755
index 00000000000..4dc41edd353
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_image_text.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_text_image.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_text_image.jpg
new file mode 100755
index 00000000000..3c86e53e822
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_text_image.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_three_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_three_cols_1.jpg
new file mode 100755
index 00000000000..5f49e2a8f0d
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_three_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_three_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_three_cols_2.jpg
new file mode 100755
index 00000000000..adfa8c9f5e4
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_three_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_three_cols_3.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_three_cols_3.jpg
new file mode 100755
index 00000000000..8bfd0a93a2d
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_three_cols_3.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_two_cols_1.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_two_cols_1.jpg
new file mode 100755
index 00000000000..eaf6bc21d50
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_two_cols_1.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_two_cols_2.jpg b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_two_cols_2.jpg
new file mode 100755
index 00000000000..fbaa3d3ee81
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_block_two_cols_2.jpg
diff --git a/addons/mass_mailing/static/src/img/theme_tech/s_default_image_logo.png b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_logo.png
new file mode 100644
index 00000000000..53b2f37da96
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/theme_tech/s_default_image_logo.png
diff --git a/addons/mass_mailing/static/src/js/mass_mailing_editor.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
index a02836ce4d8..f7c83d46079 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -29,7 +29,7 @@ options.registry["width-x"] = options.Class.extend({
         this.$overlay.find(".oe_handle.e, .oe_handle.w").removeClass("readonly");
         if (this.$target.is('img')) {
             this.$overlay.find(".oe_handle.w").addClass("readonly");
-            this.$overlay.find(".oe_snippet_remove, .oe_snippet_move, .oe_snippet_clone").addClass("hidden");
+            this.$overlay.find(".oe_snippet_move, .oe_snippet_clone").addClass("hidden");
             this.is_image=true;
         }
 
@@ -226,7 +226,7 @@ snippets_editor.Class.include({
         $dropdown.on("shown.bs.dropdown", function () {
             check_selected_theme();
             $dropdown.find("li").removeClass("selected").filter(function () {
-                return ($(this).has("img[src=\"" + (selected_theme && selected_theme.img) + "\"]").length > 0);
+                return ($(this).has(".o_thumb[style=\""+ "background-image: url(" + (selected_theme && selected_theme.img) + "_small.png)"+ "\"]").length > 0);
             }).addClass("selected");
         });
         $dropdown.on("hidden.bs.dropdown", function () {
diff --git a/addons/mass_mailing/static/src/less/mass_mailing.ui.less b/addons/mass_mailing/static/src/less/mass_mailing.ui.less
index 63336f77c99..fd16ddb4ca2 100644
--- a/addons/mass_mailing/static/src/less/mass_mailing.ui.less
+++ b/addons/mass_mailing/static/src/less/mass_mailing.ui.less
@@ -1,6 +1,24 @@
 .o_mail_theme_selector {
     > a {
-        .o-position-absolute(6px, 6px);
+        .o-position-absolute(0, 0, auto, 0);
+        height: 34px;
+        line-height: 31px;
+        border-radius: 0;
+        background-color: @o-we-color-darker;
+        color: @o-we-color-text-normal;
+
+        &:hover, &:focus, &:active {
+            color: @o-we-color-text-light;
+        }
+
+        i {
+            margin-right: 10px;
+        }
+    }
+
+    &.open > a {
+        color: white;
+        background-color: @o-we-color-dark;
     }
 
     .dropdown-menu {
@@ -11,27 +29,95 @@
         background-color: @o-we-color-dark;
 
         > li {
+            margin: 0;
+
+            > a {
+                padding: 10px 10px;
+
+                .o_thumb {
+                    display: none;
+                    background-size: cover;
+                    padding-top: 50%;
+                    border: 1px solid @o-we-color-light;
+                    border-top: 1px solid @o-we-color-text-normal;
+
+                    &.logo {
+                        display: block;
+                    }
+                }
+            }
+
             &:hover > a {
                 background-color: @o-we-color-darker;
+
+                .o_thumb {
+                    border: 1px solid white;
+                }
             }
-            &.selected {
+
+            &.selected > a .o_thumb {
                 border: 2px solid @odoo-brand-primary;
+                background-color: @o-we-color-dark;
             }
         }
     }
 }
 
 body.o_force_mail_theme_choice {
-    .o_mail_theme_selector {
-        .dropdown-toggle {
-            display: none;
-        }
-        .dropdown-menu {
-            display: block;
+    #oe_snippets {
+        width: 100%;
+
+        .o_mail_theme_selector {
+            .dropdown-toggle {
+                display: none;
+            }
+
+            .dropdown-menu {
+                display: block;
+
+                > li {
+                    margin: 0;
+                    float: left;
+                    width: 100%;
+                    max-width: 25%;
+
+                    > a {
+                        .o-transition(all, 0.3s, ease);
+
+                        .o_thumb {
+                            display: none;
+                            padding-top: 107%;
+                            border: 1px solid @o-we-color-light;
+                            border-top: 1px solid @o-we-color-text-normal;
+                            box-shadow: 0 5px 10px fade(black, 80%);
+                            will-change: transform;
+                            .backface-visibility(hidden);
+                            .o-transition(all, 0.3s);
+
+                            &.small {
+                                display: block;
+                            }
+
+                            @media screen and (min-width: 900px) {
+                                &.small {
+                                    display: none;
+                                }
+                                &.large {
+                                    display: block;
+                                }
+                            }
+                        }
+                    }
+
+                    &:hover > a {
+                        background-color: @o-we-color-dark;
+
+                        .o_thumb {
+                            box-shadow: 0 5px 30px 1px fade(black, 60%);
+                        }
+                    }
+                }
+            }
         }
     }
-    #editable_area::after {
-        content: "";
-        .o-position-absolute(0, 0, 0, 0);
-    }
 }
diff --git a/addons/mass_mailing/static/src/xml/mass_mailing.xml b/addons/mass_mailing/static/src/xml/mass_mailing.xml
index f780527d999..1d41f2a3b74 100644
--- a/addons/mass_mailing/static/src/xml/mass_mailing.xml
+++ b/addons/mass_mailing/static/src/xml/mass_mailing.xml
@@ -1,12 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <div t-name="mass_mailing.theme_selector" class="o_mail_theme_selector">
-        <a href="#" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
-            <i class="fa fa-paint-brush"/>
+        <a href="#" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-paint-brush"/> Change Style
         </a>
         <div class="dropdown-menu">
             <li t-foreach="themes" t-as="theme">
-                <a href="#"><img class="img img-responsive" t-att-src="theme.img"/></a>
+                <a href="#">
+                    <div class="o_thumb small"  t-attf-style="background-image: url(#{theme.img}_small.png)"/>
+                    <div class="o_thumb large" t-attf-style="background-image: url(#{theme.img}_large.png)"/>
+                    <div class="o_thumb logo" t-attf-style="background-image: url(#{theme.img}_logo.png)"/>
+                </a>
             </li>
         </div>
     </div>
diff --git a/addons/mass_mailing/views/editor_field_html.xml b/addons/mass_mailing/views/editor_field_html.xml
index c93cee8d353..90e9a2d9d3c 100644
--- a/addons/mass_mailing/views/editor_field_html.xml
+++ b/addons/mass_mailing/views/editor_field_html.xml
@@ -3,11 +3,12 @@
 <template id="FieldTextHtmlInline" name="Editor layout">
     <t t-set="head">
         <t t-if="enable_editor">
-            <link rel="stylesheet" href="/mass_mailing/static/src/css/snippet_styles.css" type="text/css"/>
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/compiled/theme_default.css" type="text/css"/>
 
-            <link rel="stylesheet" href="/mass_mailing/static/src/css/themes/airmail.css" type="text/css"/>
-            <link rel="stylesheet" href="/mass_mailing/static/src/css/themes/lemon.css" type="text/css"/>
-            <link rel="stylesheet" href="/mass_mailing/static/src/css/themes/tech.css" type="text/css"/>
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/compiled/theme_newsletter.css" type="text/css"/>
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/compiled/theme_airmail.css" type="text/css"/>
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/compiled/theme_resto.css" type="text/css"/>
+            <link rel="stylesheet" href="/mass_mailing/static/src/css/compiled/theme_tech.css" type="text/css"/>
         </t>
     </t>
     <t t-call="web_editor.layout">
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 71650285903..6374e093f03 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -2,23 +2,33 @@
 <odoo>
 <!-- Snippets & Themes Menu -->
 <template id="email_designer_snippets" inherit_id="web_editor.snippets" primary="True">
-    <xpath expr="//h2[@id='snippets_menu']" position="replace">
-        <h2 id="snippets_menu">Choose style</h2>
-    </xpath>
     <xpath expr="//div[@id='o_scroll']" position="replace">
         <div id="o_scroll">
             <div id="email_designer_themes">
-                <div data-name="default" data-img="/mass_mailing/static/src/img/theme_imgs/default_template_thumb.png">
-                    <!-- here put the t-call to the default theme template -->
+                <div data-name="default"
+                     data-img="/mass_mailing/static/src/img/theme_imgs/default_thumb"
+                     data-images-info='{"logo": {"format": "png"}}'>
+                    <t t-call="mass_mailing.theme_default_template"/>
                 </div>
-                <div data-name="airmail" data-img="/mass_mailing/static/src/img/theme_imgs/airmail_template_thumb.png">
-
+                <div data-name="newsletter"
+                     data-img="/mass_mailing/static/src/img/theme_imgs/newsletter_thumb"
+                     data-images-info='{"logo": {"format": "png"}}'>
+                    <t t-call="mass_mailing.theme_newsletter_template"/>
                 </div>
-                <div data-name="tech" data-img="/mass_mailing/static/src/img/theme_imgs/tech_template_thumb.png">
-
+                <div data-name="airmail"
+                     data-img="/mass_mailing/static/src/img/theme_imgs/airmail_thumb"
+                     data-images-info='{"logo": {"format": "png"}}'>
+                    <t t-call="mass_mailing.theme_airmail_template"/>
                 </div>
-                <div data-name="lemon" data-img="/mass_mailing/static/src/img/theme_imgs/lemon_template_thumb.png">
-
+                <div data-name="tech"
+                     data-img="/mass_mailing/static/src/img/theme_imgs/tech_thumb"
+                     data-images-info='{"logo": {"format": "png"}}'>
+                     <t t-call="mass_mailing.theme_tech_template"/>
+                </div>
+                <div data-name="resto"
+                     data-img="/mass_mailing/static/src/img/theme_imgs/resto_thumb"
+                     data-images-info='{"logo": {"format": "png"}}'>
+                     <t t-call="mass_mailing.theme_resto_template"/>
                 </div>
             </div>
             <div id="email_designer_default_headers" class="o_panel">
@@ -28,6 +38,7 @@
                 <div class="o_panel_body">
                     <t t-snippet="mass_mailing.s_mail_block_header_social" t-thumbnail="/mass_mailing/static/src/img/blocks/block_header_social.png"/>
                     <t t-snippet="mass_mailing.s_mail_block_header_text_social" t-thumbnail="/mass_mailing/static/src/img/blocks/block_header_text_social.png"/>
+                    <t t-snippet="mass_mailing.s_mail_block_header_logo" t-thumbnail="/mass_mailing/static/src/img/blocks/block_header_logo.png"/>
                     <t t-snippet="mass_mailing.s_mail_block_banner" t-thumbnail="/mass_mailing/static/src/img/blocks/block_banner.png"/>
                 </div>
             </div>
@@ -38,7 +49,8 @@
                 <div class="o_panel_body">
                     <t t-snippet="mass_mailing.s_mail_block_title_text" t-thumbnail="/mass_mailing/static/src/img/blocks/block_title_text.png"/>
                     <t t-snippet="mass_mailing.s_mail_block_title_sub" t-thumbnail="/mass_mailing/static/src/img/blocks/block_title_sub.png"/>
-                    <t t-snippet="mass_mailing.s_mail_block_table_content" t-thumbnail="/mass_mailing/static/src/img/blocks/block_table_content.png"/>
+                    <t t-snippet="mass_mailing.s_mail_block_paragraph" t-thumbnail="/mass_mailing/static/src/img/blocks/block_paragraph.png"/>
+                    <t t-snippet="mass_mailing.s_mail_block_comparison_table" t-thumbnail="/mass_mailing/static/src/img/blocks/block_comparison_table.png"/>
                     <t t-snippet="mass_mailing.s_mail_block_two_cols" t-thumbnail="/mass_mailing/static/src/img/blocks/block_two_cols.png"/>
                     <t t-snippet="mass_mailing.s_mail_block_three_cols" t-thumbnail="/mass_mailing/static/src/img/blocks/block_three_cols.png"/>
                     <t t-snippet="mass_mailing.s_mail_block_image_text" t-thumbnail="/mass_mailing/static/src/img/blocks/block_image_text.png"/>
@@ -65,6 +77,7 @@
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="mass_mailing.s_mail_block_footer_social" t-thumbnail="/mass_mailing/static/src/img/blocks/block_footer_social.png"/>
+                    <t t-snippet="mass_mailing.s_mail_block_footer_social_left" t-thumbnail="/mass_mailing/static/src/img/blocks/block_footer_social_left.png"/>
                 </div>
             </div>
         </div>
@@ -78,783 +91,796 @@
 <!-- Snippet Templates -->
 <template id="s_mail_block_header_social" name="Left Logo">
     <div class="o_mail_block_header_social">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                    <tr>
-                        <td width="80%"  class="horizontal-padding vertical-padding">
-                            &amp;nbsp;
-                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
-                                 <img border="0" src="http://www.odoocdn.com/openerp_website/static/src/img/2016/logos/odoo_logo_small.png" style="height:auto;max-width:400px;width:100px;margin-left:-6px;" alt="Your Logo" />
-                            </a>
-                            &amp;nbsp;
-                        </td>
-                        <td width="20%">
-                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate; margin-right:20px;">
-                                <tr>
-                                    <t t-if="website.social_facebook">
-                                        <td align="right">
-                                            <a t-att-href="website.social_facebook">
-                                              <span class="fa fa-facebook-square fa-2x"></span>
-                                            </a>
-                                        </td>
-                                    </t>
-                                    <t t-if="website.social_googleplus">
-                                        <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_googleplus">
-                                                <span class="fa fa-google-plus-square fa-2x"></span>
-                                            </a>
-                                        </td>
-                                    </t>
-                                    <t t-if="website.social_linkedin">
-                                        <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_linkedin">
-                                                <span class="fa fa-linkedin-square fa-2x"></span>
-                                            </a>
-                                        </td>
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_twitter">
-                                                <span class="fa fa-twitter-square fa-2x"></span>
-                                            </a>
-                                        </td>
-                                    </t>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                <tr>
+                    <td width="80%"  class="o_mail_logo_container o_mail_h_padding o_mail_v_padding">
+                        &amp;nbsp;
+                        <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
+                             <img border="0" src="/web/image/mass_mailing.s_default_image_logo" style="height:auto;max-width:400px;" alt="Your Logo" />
+                        </a>
+                        &amp;nbsp;
+                    </td>
+                    <td width="20%">
+                        <table t-if="website" class="o_mail_header_social" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate;">
+                            <tr>
+                                <t t-if="website.social_facebook">
+                                    <td align="right">
+                                        <a t-att-href="website.social_facebook">
+                                          <span class="fa fa-facebook"></span>
+                                        </a>
+                                    </td>
+                                </t>
+                                <t t-if="website.social_googleplus">
+                                    <td align="right" style="padding-left:10px">
+                                        <a t-att-href="website.social_googleplus">
+                                            <span class="fa fa-google-plus"></span>
+                                        </a>
+                                    </td>
+                                </t>
+                                <t t-if="website.social_linkedin">
+                                    <td align="right" style="padding-left:10px">
+                                        <a t-att-href="website.social_linkedin">
+                                            <span class="fa fa-linkedin"></span>
+                                        </a>
+                                    </td>
+                                </t>
+                                <t t-if="website.social_twitter">
+                                    <td align="right" style="padding-left:10px">
+                                        <a t-att-href="website.social_twitter">
+                                            <span class="fa fa-twitter"></span>
+                                        </a>
+                                    </td>
+                                </t>
+                            </tr>
+                        </table>
+                    </td>
+                </tr>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_header_text_social" name="Left Text">
     <div class="o_mail_block_header_text_social">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" width="600" cellspacing="0" cellpadding="0" border="0" class="table-styles">
-                    <tr>
-                        <td width="80%" class="horizontal-padding vertical-padding">
-                            &amp;nbsp;
-                            <a t-att-href="(company_id.website) or '#'" class="display-1" style="margin-left:-6px;">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                <tr>
+                    <td width="80%" class="o_mail_h_padding o_mail_v_padding">
+                        &amp;nbsp;
+                        <h3>
+                            <a t-att-href="(company_id.website) or '#'">
                                 My Company
                             </a>
-                            &amp;nbsp;
-                        </td>
-                        <td valign="center" width="20%">
-                            <table t-if="website" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate;margin-right:20p">
-                                <tr>
-                                    <t t-if="website.social_facebook">
-                                        <td align="right">
-                                            <a t-att-href="website.social_facebook">
-                                              <span class="fa fa-facebook-square fa-2x"></span>
-                                            </a>
-                                        </td>
-                                    </t>
-                                    <t t-if="website.social_googleplus">
-                                        <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_googleplus">
-                                              <span class="fa fa-google-plus-square fa-2x"></span>
-                                              </a>
-                                        </td>
-                                    </t>
-                                    <t t-if="website.social_linkedin">
-                                        <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_linkedin">
-                                              <span class="fa fa-linkedin-square fa-2x"></span>
-                                              </a>
-                                        </td>
-                                    </t>
-                                    <t t-if="website.social_twitter">
-                                        <td align="right" style="padding-left:5px">
-                                            <a t-att-href="website.social_twitter">
-                                              <span class="fa fa-twitter-square fa-2x"></span>
-                                              </a>
-                                        </td>
-                                    </t>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+                        </h3>
+                        &amp;nbsp;
+                    </td>
+                    <td valign="center" width="20%">
+                        <table t-if="website" class="o_mail_header_social" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate;">
+                            <tr>
+                                <t t-if="website.social_facebook">
+                                    <td align="right">
+                                        <a t-att-href="website.social_facebook">
+                                          <span class="fa fa-facebook"></span>
+                                        </a>
+                                    </td>
+                                </t>
+                                <t t-if="website.social_googleplus">
+                                    <td align="right" style="padding-left:10px">
+                                        <a t-att-href="website.social_googleplus">
+                                          <span class="fa fa-google-plus"></span>
+                                          </a>
+                                    </td>
+                                </t>
+                                <t t-if="website.social_linkedin">
+                                    <td align="right" style="padding-left:10px">
+                                        <a t-att-href="website.social_linkedin">
+                                          <span class="fa fa-linkedin"></span>
+                                          </a>
+                                    </td>
+                                </t>
+                                <t t-if="website.social_twitter">
+                                    <td align="right" style="padding-left:10px">
+                                        <a t-att-href="website.social_twitter">
+                                          <span class="fa fa-twitter"></span>
+                                          </a>
+                                    </td>
+                                </t>
+                            </tr>
+                        </table>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+
+<template id="s_mail_block_header_logo" name="Centered Logo">
+    <div class="o_mail_block_header_logo">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles o_mail_h_padding">
+                <tr>
+                    <td width="20%"/>
+                    <td valign="center" width="60%" class="text-center o_mail_v_padding">
+                         <img border="0" src="/web/image/mass_mailing.s_default_image_logo" style="height:auto;max-width:400px;width:auto" alt="Your Logo" />
+                    </td>
+                    <td width="20%" style="text-align:right"/>
+                </tr>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_banner" name="Banner">
     <div class="o_mail_block_banner">
-        <div class="snippet_row">
-            <div class="snippetbanner">
-                <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                    <tbody>
-                      <tr>
-                          <td width="100%" valign="top">
-                                <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/home/laptop_sale_desktop.jpg" style="height:auto;max-width:600px;width:600px;" alt="Your Logo" />
-                          </td>
-                      </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td width="100%" valign="top" class="o_mail_full_width_padding">
+                            <a href="#">
+                                <img src="/web/image/mass_mailing.s_default_image_block_banner" class="center-block" alt="Your Banner Image" />
+                            </a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_title_text" name="Title Content">
     <div class="o_mail_block_title_text">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" border="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td width="100%" class="horizontal-padding vertical-padding">
-                                <p class="display-1">Don't miss our weekly sales!</p>
-                                <div>
-                                    <p><strong>Dear ${object.name}</strong></p>
-                                    <p class="no-margin">Great stories have personality. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.<br/></p>
-                                    <p>Great stories are for everyone even when only written for just one person. If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
-                                    <p>Kind Regards,</p>
-                                    <p class="no-margin">Michael Fletcher</p>
-                                    <div class="vertical-padding">
-                                        <a href="#" class="newsletter-btn">See Our Deals!</a>
-                                        &amp;nbsp;
-                                    </div>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td width="100%" class="o_mail_h_padding o_mail_v_padding">
+                            <h2 class="mt0">Thank you for joining us!</h2>
+                            <p>We want to take this opportunity to welcome you to our ever-growing community!<br/></p>
+                            <p>Your platform is ready for work. It will help you reduce the costs of digital signage, attract new customers and increase sales.</p>
+                            <p>Enjoy,</p>
+                            <img src="/mass_mailing/static/src/img/theme_default//demo/signature.png" style="width:125px; margin-top:8px;margin-bottom:-25px;" alt="Demo Signature"/>
+                            <p>
+                                <small>
+                                    <strong>Michael Fletcher</strong><br/>
+                                    <small>Community Manager</small>
+                                </small>
+                            </p>
+                            <div class="o_mail_v_padding text-center">
+                                <a href="#" class="btn btn-primary">LOGIN</a>
+                            </div>
+
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
+<template id="s_mail_block_paragraph" name="Paragraph">
+    <div class="o_mail_block_paragraph">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td width="100%" class="o_mail_h_padding o_mail_v_padding">
+                            <p> The open source model of Odoo has allowed us to leverage thousands of developers and
+                                business experts to build hundreds of apps in just a few years.</p>
+                            <p> With strong technical foundations, Odoo's framework is unique.
+                                It provides top notch usability that scales across all apps.</p>
+                            <p> Usability improvements made on Odoo will automatically apply to all
+                                of our fully integrated apps.</p>
+                            <p> That way, Odoo evolves much faster than any other solution.</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+
 <template id="s_mail_block_title_sub" name="Title - Subtitle">
     <div class="o_mail_block_title_sub">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" width="600" cellspacing="0" cellpadding="0" class="table-styles">
-                    <tbody>
-                        <tr>
-                            <td class="horizontal-padding vertical-padding">
-                                <p class="display-1 no-margin">Check this out!</p>
-                                <p class="no-margin">Apps That Help You Grow Your Business!</p>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td class="o_mail_h_padding o_mail_v_padding">
+                            <h2 class="o_mail_no_margin">Check this out!</h2>
+                            <p class="o_mail_no_margin">Apps That Help You Grow Your Business!</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
-<template id="s_mail_block_table_content" name="Content Table">
-    <div class="o_mail_block_table_content">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td class="horizontal-padding vertical-padding col_mv">
-                                <table cellspacing="0" cellpadding="0" class="table-styles">
-                                    <thead>
-                                        <tr>
-                                            <th class="bg-beta">
-                                                <h2 class="display-1 text-center">REGISTERED</h2>
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody class="bg-gray-lighter">
-                                        <tr>
-                                            <td class="text-center col_mv">
-                                                <p class="display-coupon text-center" style="font-weight:800;">$40</p>
-                                                <small>user / month (billed annually)</small>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td valign="top" class="vertical-padding col_mv">
-                                                <div class="separator"></div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="col_mv">
-                                                <p style="margin: 0 15px 15px;">Basic sales and marketing for up to 2 users</p>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="col_mv">
-                                                <p style="margin: 0 15px 15px;">Account and sales management</p>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="col_mv">
-                                                <p style="margin: 0 15px 15px;">No customization</p>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="col_mv">
-                                                <p style="margin: 0 15px 15px;">No support</p>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                    <tfoot class="bg-gray-lighter">
-                                        <tr>
-                                            <td valign="top">
-                                                <div class="separator"></div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="text-center" style="padding:15px 0;">
-                                                &amp;nbsp;
-                                                <a href="#" class="newsletter-btn">More</a>
-                                                &amp;nbsp;
-                                            </td>
-                                        </tr>
-                                    </tfoot>
-                                </table>
-                            </td>
-                            <td class="horizontal-padding vertical-padding col_mv">
-                                <table cellspacing="0" cellpadding="0" class="table-styles">
-                                    <thead>
-                                        <tr>
-                                            <th class="bg-beta">
-                                                <h2 class="display-1 text-center">REGISTERED</h2>
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody class="bg-gray-lighter">
-                                        <tr>
-                                            <td class="text-center col_mv">
-                                                <p class="display-coupon text-center" style="font-weight:800;">$40</p>
-                                                <small>user / month (billed annually)</small>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td valign="top" class="vertical-padding col_mv">
-                                                <div class="separator"></div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="col_mv">
-                                                <p style="margin: 0 15px 15px;">Basic sales and marketing for up to 2 users</p>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="col_mv">
-                                                <p style="margin: 0 15px 15px;">Account and sales management</p>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="col_mv">
-                                                <p style="margin: 0 15px 15px;">No customization</p>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="col_mv">
-                                                <p style="margin: 0 15px 15px;">No support</p>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                    <tfoot class="bg-gray-lighter">
-                                        <tr>
-                                            <td valign="top">
-                                                <div class="separator"></div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="text-center" style="padding:15px 0;">
-                                                &amp;nbsp;
-                                                <a href="#" class="newsletter-btn">More</a>
-                                                &amp;nbsp;
-                                            </td>
-                                        </tr>
-                                    </tfoot>
-                                </table>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+<template id="s_mail_block_comparison_table" name="Comparison Table">
+    <div class="o_mail_block_comparison_table">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv">
+                            <table cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                                <thead>
+                                    <tr>
+                                        <th class="bg-beta o_mail_v_padding o_mail_col_mv">
+                                            <h2 class="text-center o_mail_no_margin">DEFAULT</h2>
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody class="bg-gray-lighter">
+                                    <tr>
+                                        <td class="text-center o_mail_col_mv">
+                                            <p class="o_mail_display_coupon text-center" style="margin-top:10px;">$8</p>
+                                            <small>user / month (billed annually)</small>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv">
+                                            <div class="separator"></div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv">
+                                            <p style="margin: 0 15px 15px;">Basic features</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv">
+                                            <p style="margin: 0 15px 15px;">Basic management</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv">
+                                            <p style="margin: 0 15px 15px;">No customization</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv">
+                                            <p style="margin: 0 15px 15px;">No support</p>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot class="bg-gray-lighter">
+                                    <tr>
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv">
+                                            <div class="separator"></div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td valign="top" class="text-center o_mail_h_padding o_mail_col_mv" style="padding-bottom: 20px;">
+                                            <a href="#" class="btn btn-block btn-primary">More</a>
+                                        </td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </td>
+                        <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv">
+                            <table cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                                <thead>
+                                    <tr>
+                                        <th class="bg-beta o_mail_v_padding o_mail_col_mv">
+                                            <h2 class="text-center o_mail_no_margin">PRO</h2>
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody class="bg-gray-lighter">
+                                    <tr>
+                                        <td class="text-center o_mail_col_mv">
+                                            <p class="o_mail_display_coupon text-center" style="margin-top:10px;">$18</p>
+                                            <small>user / month (billed annually)</small>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv">
+                                            <div class="separator"></div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv">
+                                            <p style="margin: 0 15px 15px;"><strong>Advanced</strong> features</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv">
+                                            <p style="margin: 0 15px 15px;"><strong>Total</strong> management</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv">
+                                            <p style="margin: 0 15px 15px;"><strong>Fully customizable</strong></p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv">
+                                            <p style="margin: 0 15px 15px;"><strong>24/7 Support</strong></p>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot class="bg-gray-lighter">
+                                    <tr>
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv">
+                                            <div class="separator"></div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td valign="top" class="text-center o_mail_h_padding o_mail_col_mv" style="padding-bottom: 20px;">
+                                            <a href="#" class="btn btn-block btn-primary">More</a>
+                                        </td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_two_cols" name="Two Columns">
     <div class="o_mail_block_two_cols">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td style="vertical-align:top;width:270px;padding:20px 10px 20px 20px;" class="col_mv">
-                                <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/project/case_study_inspiral.jpg" style="height:auto;max-width:100%;" alt="Your Logo" />
-                                <p class="display-2 text-center" style="margin-top:20px;">Step 1</p>
-                                <p class="text-center no-margin">
-                                    We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
+                <tbody>
+                    <tr>
+                        <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
+                            <div class="o_mail_col_container">
+                                <img src="/web/image/mass_mailing.s_default_image_block_two_cols_1" class="center-block" alt="Your Picture" />
+                                <h4 class="text-center">Column title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    Write one paragraph describing your product,
+                                    services or a specific feature. To be successful
+                                    your content needs to be useful to your readers.
                                 </p>
                                 <div class="text-center" style="margin-top:15px;">
-                                    <a href="#" class="link-color">Read More...</a>
+                                    <a href="#" class="btn btn-link">Read More...</a>
                                 </div>
-                            </td>
+                            </div>
+                        </td>
 
-                            <td style="vertical-align:top;width:270px;padding:20px 20px 20px 10px;" class="col_mv">
-                                <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/project/case_study_universem.jpg" style="height:auto;max-width:100%;" alt="Your Logo" />
-                                <p class="display-2 text-center" style="margin-top:20px;">Step 2</p>
-                                <p class="text-center no-margin">
-                                    We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
+                        <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
+                            <div class="o_mail_col_container">
+                                <img src="/web/image/mass_mailing.s_default_image_block_two_cols_2" class="center-block" alt="Your Picture" />
+                                <h4 class="text-center">Column title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    Write one paragraph describing your product,
+                                    services or a specific feature. To be successful
+                                    your content needs to be useful to your readers.
                                 </p>
                                 <div class="text-center" style="margin-top:15px;">
-                                    <a href="#" class="link-color">Read More...</a>
+                                    <a href="#" class="btn btn-link">Read More...</a>
                                 </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_three_cols" name="Three Columns">
     <div class="o_mail_block_three_cols">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td style="vertical-align:top;width:180px;padding:20px 5px 20px 20px;" class="col_mv">
-                                <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/project/case_study_inspiral.jpg" style="height:auto;max-width:100%;" alt="Your Logo" />
-                                <p class="display-2 text-center" style="margin-top:20px;">Step 1</p>
-                                <p class="text-center no-margin">
-                                    We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
+                <tbody>
+                    <tr>
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
+                            <div class="o_mail_col_container">
+                                <img src="/web/image/mass_mailing.s_default_image_block_three_cols_1" class="center-block" alt="Your Picture" />
+                                <h4 class="text-center">Column Title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    A short description
                                 </p>
                                 <div class="text-center" style="margin-top:15px;">
-                                    <a href="#" class="link-color">Read More...</a>
+                                    <a href="#" class="btn btn-link">Read More...</a>
                                 </div>
-                            </td>
+                            </div>
+                        </td>
 
-                            <td style="vertical-align:top;width:180px;padding:20px 5px 20px 5px;" class="col_mv">
-                                <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/project/case_study_universem.jpg" style="height:auto;max-width:100%;" alt="Your Logo" />
-                                <p class="display-2 text-center" style="margin-top:20px;">Step 2</p>
-                                <p class="text-center no-margin">
-                                    We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
+                            <div class="o_mail_col_container">
+                                <img src="/web/image/mass_mailing.s_default_image_block_three_cols_2" class="center-block" alt="Your Picture" />
+                                <h4 class="text-center">Column Title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    A short description
                                 </p>
                                 <div class="text-center" style="margin-top:15px;">
-                                    <a href="#" class="link-color">Read More...</a>
+                                    <a href="#" class="btn btn-link">Read More...</a>
                                 </div>
-                            </td>
+                            </div>
+                        </td>
 
-                            <td style="vertical-align:top;width:180px;padding:20px 20px 20px 5px;" class="col_mv">
-                                <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/project/case_study_universem.jpg" style="height:auto;max-width:100%;" alt="Your Logo" />
-                                <p class="display-2 text-center" style="margin-top:20px;">Step 3</p>
-                                <p class="text-center no-margin">
-                                    We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
+                            <div class="o_mail_col_container">
+                                <img src="/web/image/mass_mailing.s_default_image_block_three_cols_3" class="center-block" alt="Your Picture" />
+                                <h4 class="text-center">Column Title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    A short description
                                 </p>
                                 <div class="text-center" style="margin-top:15px;">
-                                    <a href="#" class="link-color">Read More...</a>
+                                    <a href="#" class="btn btn-link">Read More...</a>
                                 </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_image_text" name="Image - Text">
     <div class="o_mail_block_image_text">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td style="width:270px;text-align:center;vertical-align:middle" class="col_mv horizontal-padding vertical-padding">
-                                <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/crm/crm_top_banner.jpg" style="height:auto;max-width:270px;width:270px;" alt="Your Logo" />
-                            </td>
-                            <td style="width:270px;vertical-align:middle;text-align:justify;" class="col_mv horizontal-padding vertical-padding">
-                                <p class="display-2">Account Information</p>
-                                <p class="no-margin">We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.</p>
-                                <div class="text-center" style="margin-top:15px;">
-                                    <a href="#" class="link-color">Read More...</a>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_col_mv o_mail_img_container o_mail_h_padding o_mail_v_padding">
+                            <img src="/web/image/mass_mailing.s_default_image_block_image_text" class="center-block" alt="Your Picture" />
+                        </td>
+                        <td style="width:270px;vertical-align:middle;text-align:center;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <h3>Omnichannel sales</h3>
+                            <p class="o_mail_no_margin" style="text-align:justify;">Get your inside sales (CRM) fully integrated with online sales (eCommerce), in-store sales (Point of Sale) and marketplaces like eBay and Amazon.</p>
+                            <div class="text-center" style="margin-top:15px;">
+                                <a href="#" class="btn btn-link">Read More...</a>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_text_image" name="Text - Image">
     <div class="o_mail_block_text_image">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td style="width:270px;vertical-align:middle;text-align:justify;" class="col_mv horizontal-padding vertical-padding mobile-col">
-                                <p class="display-2">Account Information</p>
-                                <p class="no-margin">We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.</p>
-                                <div class="text-center" style="margin-top:15px;">
-                                    <a href="#" class="link-color">Read More...</a>
-                                </div>
-                            </td>
-                            <td style="width:270px;text-align:center;vertical-align:middle" class="col_mv horizontal-padding vertical-padding">
-                                <img src="http://www.odoocdn.com/openerp_website/static/src/img/2016/sales/sale_top_banner.jpg" style="height:auto;max-width:270px;width:270px;" alt="Your Logo" />
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td style="width:270px;vertical-align:middle;text-align:center;" class="o_mail_col_mvo_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <h3>A unique value</h3>
+                            <p class="o_mail_no_margin" style="text-align:justify;">The open source model of Odoo has allowed us to leverage thousands of developers and business experts to build hundreds of apps in just a few years.</p>
+                            <div class="text-center" style="margin-top:15px;">
+                                <a href="#" class="btn btn-link">Read More...</a>
+                            </div>
+                        </td>
+                        <td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_img_container o_mail_h_padding o_mail_v_padding">
+                            <img src="/web/image/mass_mailing.s_default_image_block_text_image" class="center-block" alt="Your Picture" />
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_image" name="Image">
     <div class="o_mail_block_image">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td width="100%" align="center" style="text-align:center" class="horizontal-padding vertical-padding">
-                                &amp;nbsp;
-                                <span class="fa fa-camera fa-10x"></span>
-                                &amp;nbsp;
-                            </td>
-                        </tr>
-                        <tr>
-                            <td width="100%" class="horizontal-padding vertical-padding">
-                                <p class="no-margin"><strong>We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.</strong></p>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_h_padding">
+                <tbody>
+                    <tr>
+                        <td width="100%" align="center" style="text-align:center" class="">
+                            <img src="/web/image/mass_mailing.s_default_image_block_image" class="center-block" alt="Your Picture" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td width="100%" class="o_mail_col_mv o_mail_v_padding bg-beta">
+                            <p class="text-center">With strong technical foundations, Odoo's framework is unique. It provides <strong>top notch usability that scales across all apps</strong>.</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_footer_separator" name="Separator">
     <div class="o_mail_block_footer_separator">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td valign="top" style="width:600px;" class="vertical-padding">
-                                <div style="width:600px;" class="separator"></div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:100%;" class="o_mail_v_padding">
+                            <div style="width:100%;" class="separator"></div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_footer_tag_line" name="Tag Line">
     <div class="o_mail_block_footer_tag_line">
-        <div class="snippet_row">
-            <div class="snippet-general" bgcolor="#875a7b" style="background-color:#875a7b;width:600px;">
-                <table class="table-styles" width="600" align="center" cellpadding="0" cellspacing="0">
-                    <tbody>
-                        <tr>
-                            <td width="600" class="text-center horizontal-padding vertical-padding bg-beta">
-                                <p class="display-2" style="margin:10px 0;">Apps That Help You Grow Your Business</p>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class="horizontal-padding vertical-padding bg-beta" style="padding:10px;">
-                                &amp;nbsp;
-                                <a href="#" class="newsletter-btn">My Account</a>
+        <div class="o_mail_snippet_general">
+            <table class="o_mail_table_styles o_mail_full_width_padding" align="center" cellpadding="0" cellspacing="0">
+                <tbody>
+                    <tr>
+                        <td class="text-center o_mail_h_padding o_mail_v_padding bg-beta">
+                            <h3 style="margin:10px 0;">Apps That Help You Grow Your Business</h3>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="o_mail_h_padding o_mail_v_padding bg-beta" style="padding:10px;">
+                            &amp;nbsp;
+                            <a href="#" class="btn btn-primary">My Account</a>
+                            &amp;nbsp;
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="bg-beta">
                                 &amp;nbsp;
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <div class="bg-beta">
-                                    &amp;nbsp;
-
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_discount2" name="Discount Coupon">
-    <div class="o_mail_block_discount2">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td class="horizontal-padding vertical-padding">
-                                <div class="text-center center-block">
-                                    <p class="display-coupon no-margin text-center text-beta" style="font-weight:800;">
-                                        $20
-                                    </p>
-                                    <span class="display-2">FROM YOUR NEXT ORDER!</span>
-                                </div>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td valign="top" style="width:600px;" class="vertical-padding">
-                                <div style="width:600px;" class="separator"></div>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <p class="text-center" style="margin-top:10px;">
-                                    Use This Promo Code BEFORE 1st of August
-                                </p>
-                                <p class="horizontal-padding vertical-padding display-2 text-center">
-                                    Code: <strong>45A9E77DGW8455</strong>
-                                </p>
-                                <p class="text-center">
-                                    to receive $20 from your next purchase!
+    <div class="o_mail_block_discount2 mb16">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_h_padding">
+                <tbody>
+                    <tr>
+                        <td class="o_mail_v_padding">
+                            <div class="text-center center-block">
+                                <p class="o_mail_display_coupon o_mail_no_margin text-center text-beta" style="font-weight:800;">
+                                    $20
                                 </p>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td valign="top" style="width:600px;" class="vertical-padding">
-                                <div style="width:600px;" class="separator"></div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+                                <h3 class="o_mail_no_margin">FROM YOUR NEXT ORDER!</h3>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="text-center">
+                            <p class="text-center" style="margin-top:10px;">
+                                Use This Promo Code BEFORE 1st of August
+                            </p>
+                            <p class="o_mail_h_padding text-center">
+                                <small>CODE</small>:   <strong class="o_code h3">45A9E77DGW8455</strong>
+                            </p>
+                            <p class="text-center">
+                                to receive $20 from your next purchase!
+                            </p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_discount1" name="Discount Offer">
     <div class="o_mail_block_discount1">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellpadding="0" cellspacing="0" width="600" class="table-styles">
-                    <tbody>
-                        <tr>
-                            <td class="horizontal-padding vertical-padding text-center col_mv" width="250">
-                                <table>
-                                    <tr>
-                                        <td>
-                                            <p class="display-coupon text-beta text-center no-margin" style="font-weight:800;">20%</p>
-                                            <p class="display-3 text-beta text-center" style="font-weight:800;">OFF</p>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <p class="display-3 text-center">FROM YOUR NEXT ORDER! <br/> &amp;nbsp;</p>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td class="text-center">
-                                            &amp;nbsp;
-                                            <a href="#" class="newsletter-btn" style="margin-top:15px;">Redeem Discount!</a>
-                                            &amp;nbsp;
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                            <td class="horizontal-padding vertical-padding col_mv" width="350">
-                                <p class="no-margin">We are continuing to grow and we miss seeing you be a part of it! We've increased store hours and have lot's of new brands available. To welcome you back please accept this 20% discount on you next purchase by clicking the button.</p>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="o_mail_snippet_general">
+            <table align="center" cellpadding="0" cellspacing="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td class="o_mail_h_padding o_mail_v_padding text-center o_mail_col_mv" width="250">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <p class="o_mail_display_coupon text-beta text-center o_mail_no_margin" style="font-weight:800;">20%</p>
+                                        <h4 class="text-beta text-center mt0 mb16" style="font-weight:800;">OFF</h4>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <p class="text-center">FROM YOUR NEXT ORDER!</p>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="text-center">
+                                        <a href="#" class="btn btn-primary">Redeem Discount!</a>
+                                        &amp;nbsp;
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                        <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv" width="350">
+                            <p class="o_mail_no_margin">We are continuing to grow and we miss seeing you be a part of it! We've increased store hours and have lot's of new brands available. To welcome you back please accept this 20% discount on you next purchase by clicking the button.</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
 <template id="s_mail_block_event" name="Event">
     <div class="o_mail_block_event">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellpadding="0" cellspacing="0" width="600" class="table-styles">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellpadding="0" cellspacing="0" class="o_mail_table_styles">
+                <tr>
+                    <td style="width:25%;min-height: 150px;vertical-align:middle;" class="o_mail_h_padding o_mail_v_padding bg-beta text-center o_mail_col_mv">
+                        <h3 class="o_mail_no_margin">21 Jul</h3>
+                        <p class="o_mail_no_margin">ALL DAY</p>
+                    </td>
+                    <td style="width:25%;min-height: 150px;" class="text-center bg-delta o_mail_col_mv">
+                        <img src="/web/image/mass_mailing.s_default_image_block_event" class="center-block" alt="Your Picture" />
+                    </td>
+                    <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv" style="min-height: 150px;">
+                        <div style="min-height: 111px">
+                            <h4>Cybersecurity</h4>
+                            <p class="o_mail_no_margin">
+                                Cyber-threats continue to increase.<br/>
+                                The discussion will examine how to develop new norms and integrate them into EU
+                            </p>
+                        </div>
+                        <div class="small mt16">
+                            <a href="#" class="btn btn-sm btn-primary">Registration</a>
+                            <a href="#" class="btn btn-sm btn-link" style="margin-left:10px">More Info</a>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+
+<template id="s_mail_block_steps" name="Steps">
+    <div class="o_mail_block_steps">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                <tbody>
                     <tr>
-                        <td style="width:25%;height: 150px;vertical-align:middle;" class="horizontal-padding vertical-padding bg-beta text-center">
-                            <span class="display-1">21</span>
-                            <span class="display-1">Jul</span>
-                            <span style="display: block;font-weight: 600" class="display-3">
-                                ALL DAY
-                            </span>
-                        </td>
-                        <td style="width:25%;height: 150px;" class="horizontal-padding vertical-padding text-center bg-delta">
-                            <div style="margin:27px auto">
-                                &amp;nbsp;
-                                <span class="fa fa-calendar fa-5x"></span>
-                                &amp;nbsp;
-                            </div>
+                        <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <table class="o_mail_table_styles">
+                                <tr>
+                                    <td rowspan="2" class="text-right">
+                                        &amp;nbsp;
+                                        <span class="fa fa-compass fa-2x text-delta"></span>
+                                        &amp;nbsp;
+                                    </td>
+                                    <td style="padding-left:10px;">
+                                        <p class="o_mail_no_margin"><small>Step 1:</small></p>
+                                        <h4 class="o_mail_no_margin">Choose</h4>
+                                    </td>
+                                </tr>
+                            </table>
                         </td>
-                        <td style="vertical-align:top;width:50%;height:150px;min-width:255px" class="col_mv">
-                            <table style="width:100%;border-collapse:separate;">
-                                <tr style="padding-right:5px;">
-                                    <td style="padding-top:20px;padding-left:20px;float:left" width="90%">
-                                        <div style="min-height:100px;text-align:left">
-                                            <p class="no-margin display-3">Your Event Name</p>
-                                            <p class="no-margin">Description</p>
-                                        </div>
-                                        <div style="padding-left:0">
-                                            <p style="display: table-cell;cursor: pointer;font-size: 11px;font-weight: 300;padding: 3px 30px;">
-                                                <a href="#" class="link-color">Link </a>
-                                            </p>
-                                            <p style="display: table-cell;cursor: pointer;font-size: 11px;font-weight: 300;padding: 3px 30px;">
-                                                <a href="#" class="link-color">Info</a>
-                                            </p>
-                                        </div>
+                        <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <table class="o_mail_table_styles">
+                                <tr>
+                                    <td rowspan="2" class="text-right">
+                                        &amp;nbsp;
+                                        <span class="fa fa-credit-card fa-2x text-delta"></span>
+                                        &amp;nbsp;
+                                    </td>
+                                    <td style="padding-left:10px;">
+                                        <p class="o_mail_no_margin"><small>Step 2:</small></p>
+                                        <h4 class="o_mail_no_margin ">Order</h4>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                        <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <table class="o_mail_table_styles">
+                                <tr>
+                                    <td rowspan="2" class="text-right">
+                                        &amp;nbsp;
+                                        <span class="fa fa-smile-o fa-2x text-delta"></span>
+                                        &amp;nbsp;
                                     </td>
-                                    <td style="vertical-align:middle;">
-                                        <div t-if="website" style="padding-left:16px">
-                                            <t t-if="website.social_facebook">
-                                                <div style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_facebook">
-                                                      <span class="fa fa-facebook-square fa-2x"></span>
-                                                    </a>
-                                                </div>
-                                            </t>
-                                            <t t-if="website.social_twitter">
-                                                <div style="width:34%;margin-left:0">
-                                                    <a t-att-href="website.social_twitter">
-                                                      <span class="fa fa-twitter-square fa-2x"></span>
-                                                    </a>
-                                                </div>
-                                            </t>
-                                            <t t-if="website.social_googleplus">
-                                                <div style="width:33%;margin-left:0">
-                                                    <a t-att-href="website.social_googleplus">
-                                                      <span class="fa fa-google-plus-square fa-2x"></span>
-                                                    </a>
-                                                </div>
-                                            </t>
-                                        </div>
+                                    <td style="padding-left:10px;">
+                                        <p class="o_mail_no_margin"><small>Step 3:</small></p>
+                                        <h4 class="o_mail_no_margin ">Enjoy!</h4>
                                     </td>
                                 </tr>
                             </table>
                         </td>
                     </tr>
-                </table>
-            </div>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
-<template id="s_mail_block_steps" name="Steps">
-    <div class="o_mail_block_steps">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td class="col_mv horizontal-padding vertical-padding bg-beta">
-                                <table class="table-styles">
-                                    <tr>
-                                        <td rowspan="2">
-                                            &amp;nbsp;
-                                            <span class="fa fa-hand-pointer-o fa-3x"></span>
-                                            &amp;nbsp;
-                                        </td>
-                                        <td style="padding-left:10px;">
-                                            <p style="font-weight:bold;margin:0 0 3px 0;" class="display-3">Step 1:</p>
-                                            <p class="no-margin">Register</p>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                            <td class="col_mv horizontal-padding vertical-padding">
-                                <table class="table-styles">
-                                    <tr>
-                                        <td rowspan="2">
-                                            &amp;nbsp;
-                                            <span class="fa fa-map-marker fa-3x"></span>
-                                            &amp;nbsp;
-                                        </td>
-                                        <td style="padding-left:10px;">
-                                            <p style="font-weight:bold;margin:0 0 3px 0" class="display-3">Step 2:</p>
-                                            <p class="no-margin">Attend</p>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                            <td class="col_mv horizontal-padding vertical-padding">
-                                <table class="table-styles">
-                                    <tr>
-                                        <td rowspan="2">
-                                            &amp;nbsp;
-                                            <span class="fa fa-money fa-3x"></span>
-                                            &amp;nbsp;
-                                        </td>
-                                        <td style="padding-left:10px;">
-                                            <p style="font-weight:bold;margin:0 0 3px 0" class="display-3">Step 3:</p>
-                                            <p class="no-margin">Win</p>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+<template id="s_mail_block_footer_social" name="Footer Center">
+    <div class="o_mail_block_footer_social o_mail_footer_social_center">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                <tbody>
+                    <tr>
+                        <td class="o_mail_footer_social">
+                            &amp;nbsp;
+                            <t t-if="website.social_facebook">
+                                <a t-att-href="website.social_facebook" class="btn btn-link">
+                                    <span class="fa fa-facebook"></span>
+                                </a>
+                            </t>
+                            <t t-if="website.social_googleplus">
+                                <a t-att-href="website.social_googleplus" style="padding-left:10px;" class="btn btn-link">
+                                    <span class="fa fa-google-plus"></span>
+                                </a>
+                            </t>
+                            <t t-if="website.social_linkedin">
+                                <a t-att-href="website.social_linkedin" style="padding-left:10px;" class="btn btn-link">
+                                    <span class="fa fa-linkedin"></span>
+                                </a>
+                            </t>
+                            <t t-if="website.social_twitter">
+                                <a t-att-href="website.social_twitter" style="padding-left:10px;" class="btn btn-link">
+                                    <span class="fa fa-twitter"></span>
+                                </a>
+                            </t>
+                            &amp;nbsp;
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="o_mail_footer_links">
+                            <a href="/unsubscribe_from_list" class="btn btn-link">Unsubscribe</a> | <a href="/page/contactus" class="btn btn-link">Contact</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <p class="o_mail_footer_copy">© 2014 All Rights Reserved</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
 
-<template id="s_mail_block_footer_social" name="Footer">
-    <div class="o_mail_block_footer_social">
-        <div class="snippet_row">
-            <div class="snippet-general">
-                <table align="center" cellspacing="0" cellpadding="0" class="table-styles" width="600">
-                    <tbody>
-                        <tr>
-                            <td style="text-align:center">
-                                &amp;nbsp;
-                                <t t-if="website.social_facebook">
-                                    <a t-att-href="website.social_facebook" class="link-color">
-                                        <span class="fa fa-facebook-square fa-2x"></span>
-                                    </a>
-                                </t>
-                                <t t-if="website.social_googleplus">
-                                    <a t-att-href="website.social_googleplus" style="padding-left:5px;" class="link-color">
-                                        <span class="fa fa-google-plus-square fa-2x"></span>
-                                    </a>
-                                </t>
-                                <t t-if="website.social_linkedin">
-                                    <a t-att-href="website.social_linkedin" style="padding-left:5px;" class="link-color">
-                                        <span class="fa fa-linkedin-square fa-2x"></span>
-                                    </a>
-                                </t>
-                                <t t-if="website.social_twitter">
-                                    <a t-att-href="website.social_twitter" style="padding-left:5px;" class="link-color">
-                                        <span class="fa fa-twitter-square fa-2x"></span>
-                                    </a>
-                                </t>
-                                &amp;nbsp;
-                            </td>
-                        </tr>
-                        <tr>
-                            <td style="font-size:12px;text-align:center;padding:10px">
-                                &amp;nbsp;
-                                <a href="/unsubscribe_from_list" class="link-color">Unsubscribe</a> | <a href="/page/contactus" class="link-color">Contact</a>
-                                &amp;nbsp;
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class="horizontal-padding vertical-padding">
-                                <p style="font-size:12px;text-align:center;" class="no-margin">© 2014 All Rights Reserved</p>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+<template id="s_mail_block_footer_social_left" name="Footer Left">
+    <div class="o_mail_block_footer_social o_mail_footer_social_left">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                <tbody>
+                    <tr>
+                        <td class="o_mail_footer_description">
+                            <p class="o_mail_no_margin">
+                                <strong><t t-esc="res_company.partner_id.name"/></strong>
+                            </p>
+                            <div class="o_mail_footer_links">
+                                <a href="/unsubscribe_from_list" class="btn btn-link">Unsubscribe</a> | <a href="/page/contactus" class="btn btn-link">Contact</a>
+                            </div>
+                            <div>
+                                <p class="o_mail_footer_copy">© 2016 All Rights Reserved</p>
+                            </div>
+                        </td>
+                        <td class="o_mail_footer_social">
+                            &amp;nbsp;
+                            <t t-if="website.social_facebook">
+                                <a t-att-href="website.social_facebook" class="btn btn-link">
+                                    <span class="fa fa-facebook"></span>
+                                </a>
+                            </t>
+                            <t t-if="website.social_googleplus">
+                                <a t-att-href="website.social_googleplus" style="padding-left:10px;" class="btn btn-link">
+                                    <span class="fa fa-google-plus"></span>
+                                </a>
+                            </t>
+                            <t t-if="website.social_linkedin">
+                                <a t-att-href="website.social_linkedin" style="padding-left:10px;" class="btn btn-link">
+                                    <span class="fa fa-linkedin"></span>
+                                </a>
+                            </t>
+                            <t t-if="website.social_twitter">
+                                <a t-att-href="website.social_twitter" style="padding-left:10px;" class="btn btn-link">
+                                    <span class="fa fa-twitter"></span>
+                                </a>
+                            </t>
+                            &amp;nbsp;
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>
diff --git a/addons/mass_mailing/views/snippets_themes_options.xml b/addons/mass_mailing/views/snippets_themes_options.xml
index d7f1c4f320f..2da35caec92 100644
--- a/addons/mass_mailing/views/snippets_themes_options.xml
+++ b/addons/mass_mailing/views/snippets_themes_options.xml
@@ -4,39 +4,37 @@
 <template id="snippet_options">
     <t t-raw="0"/>
 
-    <div data-js='width-x'
-        data-selector="img, .mv, .col_mv">
+    <div data-js="width-x"
+        data-selector="img, .mv, .col_mv, td, th">
     </div>
 
-    <div data-js='table_row'
-        data-selector="tr:has(>.row), tr:has(>.col_mv)"
-        data-drop-near="tr:has(>.row), tr:has(>.col_mv)">
+    <div data-js="table_row"
+        data-selector="tr:has(> .row), tr:has(> .col_mv)"
+        data-drop-near="tr:has(> .row), tr:has(> .col_mv)">
     </div>
 
-    <div data-js='table_column'
+    <div data-js="table_column"
         data-selector=".col>td, .col>th"
         data-drop-near=".col>td, .col>th">
     </div>
 
-    <div data-js='table_column_mv'
-        data-selector=".col_mv"
-        data-drop-near=".col_mv">
+    <div data-js="table_column_mv"
+        data-selector=".col_mv, td, th"
+        data-drop-near=".col_mv, td, th">
     </div>
 
-    <div data-js='content' class="hidden"
+    <div data-js="content"
         data-selector="[data-oe-field='body_html'] > div:not(.o_layout), [data-oe-field='body_html'] .oe_structure > div, .oe_snippet_body"
         data-drop-near="[data-oe-field='body_html']:not(:has(.o_layout)) > *, .oe_structure > *"
         data-drop-in="[data-oe-field='body_html']:not(:has(.o_layout)), .oe_structure">
     </div>
 
-    <!-- <div data-js='background'
-        data-selector="div.snippet_row">
-        <li data-choose_image="choose_image" data-background=""><a>Choose a background image</a></li>
-        <li data-background=""><a>No background image</a></li>
-    </div> -->
-
     <div data-js="colorpicker"
-        data-selector="div.snippet_row td">
+        data-selector="
+            [data-oe-field='body_html'] > div:not(.o_layout):not(.o_mail_block_event):not(.o_mail_block_steps),
+            [data-oe-field='body_html'] .oe_structure > div:not(.o_mail_block_event):not(.o_mail_block_steps),
+            td, th
+        ">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Background Color</a>
             <ul class="dropdown-menu">
diff --git a/addons/mass_mailing/views/themes_templates.xml b/addons/mass_mailing/views/themes_templates.xml
new file mode 100644
index 00000000000..5f32790a4d3
--- /dev/null
+++ b/addons/mass_mailing/views/themes_templates.xml
@@ -0,0 +1,755 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Default Theme -->
+    <template id="theme_default_template">
+        <div class="o_mail_wrapper">
+            <div class="o_mail_block_header_logo mb16">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles o_mail_h_padding">
+                        <tr>
+                            <td width="20%"/>
+                            <td valign="center" width="60%" class="o_mail_logo_container text-center o_mail_v_padding">
+                                <img border="0" src="/mass_mailing/static/src/img/theme_default/s_default_image_logo.png" style="height:auto;max-width:400px;" alt="Your Logo" />
+                            </td>
+                            <td width="20%" style="text-align:right"/>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+
+            <t t-call="mass_mailing.s_mail_block_title_text" />
+            <t t-call="mass_mailing.s_mail_block_footer_social_left"/>
+        </div>
+    </template>
+
+    <!-- Newsletter Theme (based on 'Default' style) -->
+    <template id="theme_newsletter_template">
+        <div class="o_mail_wrapper">
+
+            <div class="o_mail_block_header_social">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td width="80%" class="o_mail_logo_container o_mail_h_padding o_mail_v_padding">
+                                    <a style="text-decoration:none;float:none;" href="http://www.example.com">
+                                         <img border="0" src="/mass_mailing/static/src/img/theme_newsletter/s_default_image_logo.png" style="height:auto;max-width:400px;" alt="Your Logo"/>
+                                    </a>
+                                </td>
+                                <td width="20%">
+                                    <table class="o_mail_header_social" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate;">
+                                        <tbody>
+                                            <tr>
+                                                <td align="right">
+                                                    <a href="https://www.facebook.com/Odoo">
+                                                      <span class="fa fa-facebook"></span>
+                                                    </a>
+                                                </td>
+
+                                                <td align="right" style="padding-left:10px">
+                                                    <a href="https://plus.google.com/+Odooapps">
+                                                        <span class="fa fa-google-plus"></span>
+                                                    </a>
+                                                </td>
+                                                <td align="right" style="padding-left:10px">
+                                                    <a href="https://www.linkedin.com/company/odoo">
+                                                        <span class="fa fa-linkedin"></span>
+                                                    </a>
+                                                </td>
+                                                <td align="right" style="padding-left:10px">
+                                                    <a href="https://twitter.com/Odoo">
+                                                        <span class="fa fa-twitter"></span>
+                                                    </a>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="o_mail_block_footer_separator">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                        <tbody>
+                            <tr>
+                                <td valign="top" style="width:100%;">
+                                    <div style="width:100%;" class="separator"></div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="o_mail_block_paragraph">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td width="100%" class="o_mail_h_padding o_mail_v_padding">
+                                    <p> Hi there!</p>
+                                    <p> The next edition of Odoo Experience looks very promising. More than 150 talks are scheduled during those 3 days!
+                                        Find below some stand-out talks for the Business tracks.</p>
+                                    <p> To stir up your curiosity, have a look at all the great talks scheduled and highlighted in our agenda!</p>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="o_mail_block_event mb32">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellpadding="0" cellspacing="0" class="o_mail_table_styles">
+                        <tbody><tr>
+                            <td style="width:25%;min-height: 150px;vertical-align:middle;" class="o_mail_h_padding o_mail_v_padding bg-beta text-center o_mail_col_mv">
+                                <h3 class="o_mail_no_margin ">21 Jul</h3>
+                                <p class="o_mail_no_margin ">ALL DAY</p>
+                            </td>
+                            <td style="width:25%;min-height: 150px;" class="text-center bg-delta o_mail_col_mv">
+                                <img src="/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_event.jpg" class="center-block" alt="Your Picture"/>
+                            </td>
+                            <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv" style="min-height: 150px;">
+                                <div style="min-height: 111px">
+                                    <h4>Register Now!</h4>
+                                    <p class="o_mail_no_margin ">
+                                        Discover the new version of our software, with a great overview on all the new features.
+                                    </p>
+                                </div>
+                                <div class="small mt16">
+                                    <a href="#" class="btn btn-sm btn-primary ">Registration</a>
+                                    <a href="#" class="btn btn-sm btn-link " style="margin-left:10px">More Info</a>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody></table>
+                </div>
+            </div>
+
+            <div class="o_mail_block_footer_separator">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                        <tbody>
+                            <tr>
+                                <td valign="top" style="width:100%;" class="o_mail_v_padding">
+                                    <div style="width:100%;" class="separator"></div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="o_mail_block_image_text">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td style="width: 250px; text-align: center; vertical-align: middle;" class="o_mail_col_mv o_mail_img_container o_mail_h_padding o_mail_v_padding">
+                                    <img src="/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_text_image.jpg" class="center-block" alt="Your Picture" style=""/>
+                                </td>
+                                <td style="width: 350px; vertical-align: middle; text-align: center;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <h3 class="text-left mt0">Premium Pass</h3>
+                                    <p class="o_mail_no_margin " style="text-align:justify;">This pass gives you access to the catering and evening activities! </p>
+                                    <div class="text-left" style="margin-top:15px;">
+                                        <a href="#" class="btn btn-sm btn-primary ">Read More</a>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="o_mail_block_image_text">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td style="width: 250px; text-align: center; vertical-align: middle;" class="o_mail_col_mv o_mail_img_container o_mail_h_padding o_mail_v_padding">
+                                    <img src="/mass_mailing/static/src/img/theme_newsletter/s_default_image_block_image_text.jpg" class="center-block" alt="Your Picture" style=""/>
+                                </td>
+                                <td style="width: 350px; vertical-align: middle; text-align: center;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <h3 class="text-left mt0">Call for Speakers</h3>
+                                    <p class="o_mail_no_margin " style="text-align:justify;">Odoo Experience is the place to be to showcase your expertize.</p>
+                                    <div class="text-left" style="margin-top:15px;">
+                                        <a href="#" class="btn btn-sm btn-primary ">Read More</a>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <t t-call="mass_mailing.s_mail_block_footer_social_left"/>
+        </div>
+    </template>
+
+    <template id="theme_airmail_template">
+        <div class="o_mail_wrapper">
+            <div class="o_mail_block_header_social">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                        <tr>
+                            <td width="80%"  class="o_mail_logo_container o_mail_h_padding o_mail_v_padding">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
+                                     <img border="0" src="/mass_mailing/static/src/img/theme_airmail/s_default_image_logo.png" style="height:auto;max-width:400px;" alt="Your Logo" />
+                                </a>
+                            </td>
+                            <td width="20%">
+                                <table t-if="website" class="o_mail_header_social" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate;">
+                                    <tr>
+                                        <t t-if="website.social_facebook">
+                                            <td align="right">
+                                                <a t-att-href="website.social_facebook">
+                                                  <span class="fa fa-facebook"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                        <t t-if="website.social_googleplus">
+                                            <td align="right" style="padding-left:10px">
+                                                <a t-att-href="website.social_googleplus">
+                                                    <span class="fa fa-google-plus"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                        <t t-if="website.social_linkedin">
+                                            <td align="right" style="padding-left:10px">
+                                                <a t-att-href="website.social_linkedin">
+                                                    <span class="fa fa-linkedin"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <td align="right" style="padding-left:10px">
+                                                <a t-att-href="website.social_twitter">
+                                                    <span class="fa fa-twitter"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_banner">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td width="100%" valign="top" class="o_mail_full_width_padding">
+                                    <a href="#">
+                                        <img src="/mass_mailing/static/src/img/theme_airmail/s_default_image_block_banner.jpg" class="center-block" alt="Your Banner Image"/>
+                                    </a>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_two_cols">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
+                        <tbody>
+                            <tr>
+                                <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_airmail/s_default_image_block_two_cols_1.jpg" class="center-block" alt="Your Picture"/>
+                                        <h4 class="text-center">Gibson Les Paul Junior</h4>
+                                        <p class="text-center o_mail_no_margin">
+                                            Check the top electric guitar brands and their models!
+                                        </p>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-link">Read More...</a>
+                                        </div>
+                                    </div>
+                                </td>
+
+                                <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_airmail/s_default_image_block_two_cols_2.jpg" class="center-block" alt="Your Picture"/>
+                                        <h4 class="text-center">Sony BDVE210</h4>
+                                        <p class="text-center o_mail_no_margin">
+                                            Heat up the popcorn and get ready for an immersive experience.
+                                        </p>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-link">Read More...</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_discount1">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellpadding="0" cellspacing="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td class="o_mail_h_padding o_mail_v_padding text-center o_mail_col_mv" width="250">
+                                    <table>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    <p class="o_mail_display_coupon text-beta text-center o_mail_no_margin" style="font-weight:800;">20%</p>
+                                                    <h4 class="text-beta text-center mt0 mb16" style="font-weight:800;">OFF</h4>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <p class="text-center">FROM YOUR NEXT ORDER!</p>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class="text-center">
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                                <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv" width="350">
+                                    <p class="o_mail_no_margin">We are continuing to grow and we miss seeing you be a part of it! We've increased store hours and have lot's of new brands available.<br/>To welcome you back please accept this 20% discount on you next purchase by clicking the button.</p>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_three_cols">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
+                        <tbody>
+                            <tr>
+                                <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_1.jpg" class="center-block" alt="Your Picture"/>
+                                        <h4 class="text-center">1958 Royal</h4>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-primary">Discover</a>
+                                        </div>
+                                    </div>
+                                </td>
+
+                                <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_2.jpg" class="center-block" alt="Your Picture"/>
+                                        <h4 class="text-center">Classic D8 Skate</h4>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-primary">Discover</a>
+                                        </div>
+                                    </div>
+                                </td>
+
+                                <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_airmail/s_default_image_block_three_cols_3.jpg" class="center-block" alt="Your Picture"/>
+                                        <h4 class="text-center">Puccini Jar</h4>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-primary">Discover</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <t t-call="mass_mailing.s_mail_block_footer_social"/>
+        </div>
+    </template>
+
+    <template id="theme_tech_template">
+        <div class="o_mail_wrapper">
+            <div class="o_mail_block_header_social">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                        <tr>
+                            <td width="80%"  class="o_mail_logo_container o_mail_h_padding o_mail_v_padding">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
+                                     <img border="0" src="/mass_mailing/static/src/img/theme_tech/s_default_image_logo.png" style="height:auto;max-width:400px;" alt="Your Logo" />
+                                </a>
+                            </td>
+                            <td width="20%">
+                                <table t-if="website" class="o_mail_header_social" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate;">
+                                    <tr>
+                                        <t t-if="website.social_facebook">
+                                            <td align="right">
+                                                <a t-att-href="website.social_facebook">
+                                                  <span class="fa fa-facebook"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                        <t t-if="website.social_googleplus">
+                                            <td align="right" style="padding-left:10px">
+                                                <a t-att-href="website.social_googleplus">
+                                                    <span class="fa fa-google-plus"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                        <t t-if="website.social_linkedin">
+                                            <td align="right" style="padding-left:10px">
+                                                <a t-att-href="website.social_linkedin">
+                                                    <span class="fa fa-linkedin"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <td align="right" style="padding-left:10px">
+                                                <a t-att-href="website.social_twitter">
+                                                    <span class="fa fa-twitter"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_banner">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                        <tbody>
+                          <tr>
+                              <td width="100%" valign="top" class="o_mail_full_width_padding">
+                                    <img src="/mass_mailing/static/src/img/theme_tech/s_default_image_block_banner.jpg" class="center-block" alt="Your Banner Image" />
+                              </td>
+                          </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_image_text">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td style="width:200px;text-align:center;vertical-align:middle" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <img src="/mass_mailing/static/src/img/theme_tech/s_default_image_block_image.jpg" class="center-block" alt="Your Picture"/>
+                                </td>
+                                <td style="width:400px;vertical-align:middle;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <h4 class="">The Rise Of The Drone</h4>
+                                    <p class="o_mail_no_margin">They sit at terminals at Holloman Air Force Base, watching grainy images from a drone video feed.</p>
+                                    <div class="text-left" style="margin-top:15px;">
+                                        <a href="#" class="btn btn-link">Read More...</a>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_image_text">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td style="width:200px;text-align:center;vertical-align:middle" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <img src="/mass_mailing/static/src/img/theme_tech/s_default_image_block_image_text.jpg" class="center-block" alt="Your Picture"/>
+                                </td>
+                                <td style="width:400px;vertical-align:middle;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <h4 class="">New 45Hc-270A laptop</h4>
+                                    <p class="o_mail_no_margin">The new laptops look nearly identical to the original models, but closer inspection reveals a refined design.</p>
+                                    <div class="text-left" style="margin-top:15px;">
+                                        <a href="#" class="btn btn-link">Read More...</a>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_image_text">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td style="width:200px;text-align:center;vertical-align:middle" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <img src="/mass_mailing/static/src/img/theme_tech/s_default_image_block_text_image.jpg" class="center-block" alt="Your Picture"/>
+                                </td>
+                                <td style="width:400px;vertical-align:middle;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <h4 class="">Two-lens phone cameras</h4>
+                                    <p class="o_mail_no_margin">Normally mirrorless cameras have always sat slightly above entry-level in terms of price..</p>
+                                    <div class="text-left" style="margin-top:15px;">
+                                        <a href="#" class="btn btn-link">Read More...</a>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <t t-call="mass_mailing.s_mail_block_footer_social"/>
+        </div>
+    </template>
+
+    <template id="theme_resto_template">
+        <div class="o_mail_wrapper">
+            <div class="o_mail_block_header_social">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                        <tr>
+                            <td width="80%"  class="o_mail_logo_container o_mail_h_padding o_mail_v_padding">
+                                <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
+                                     <img border="0" src="/mass_mailing/static/src/img/theme_resto/s_default_image_logo.png" style="height:auto;max-width:400px;" alt="Your Logo" />
+                                </a>
+                            </td>
+                            <td width="20%">
+                                <table t-if="website" class="o_mail_header_social" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:separate;">
+                                    <tr>
+                                        <t t-if="website.social_facebook">
+                                            <td align="right">
+                                                <a t-att-href="website.social_facebook">
+                                                  <span class="fa fa-facebook"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                        <t t-if="website.social_googleplus">
+                                            <td align="right" style="padding-left:10px">
+                                                <a t-att-href="website.social_googleplus">
+                                                    <span class="fa fa-google-plus"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                        <t t-if="website.social_linkedin">
+                                            <td align="right" style="padding-left:10px">
+                                                <a t-att-href="website.social_linkedin">
+                                                    <span class="fa fa-linkedin"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                        <t t-if="website.social_twitter">
+                                            <td align="right" style="padding-left:10px">
+                                                <a t-att-href="website.social_twitter">
+                                                    <span class="fa fa-twitter"></span>
+                                                </a>
+                                            </td>
+                                        </t>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_banner">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td width="100%" valign="top" class="o_mail_full_width_padding">
+                                    <a href="#">
+                                        <img src="/mass_mailing/static/src/img/theme_resto/s_default_image_block_banner.jpg" class="center-block" alt="Your Banner Image"/>
+                                    </a>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_steps">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                        <tbody>
+                            <tr>
+                                <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <table class="o_mail_table_styles">
+                                        <tr>
+                                            <td rowspan="2" class="text-right">
+                                                <span class="fa fa-compass fa-2x text-delta"></span>
+                                            </td>
+                                            <td style="padding-left:10px;">
+                                                <p class="o_mail_no_margin"><small>Step 1:</small></p>
+                                                <h4 class="o_mail_no_margin ">Choose</h4>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <table class="o_mail_table_styles">
+                                        <tr>
+                                            <td rowspan="2" class="text-right">
+                                                <span class="fa fa-credit-card fa-2x text-delta"></span>
+                                            </td>
+                                            <td style="padding-left:10px;">
+                                                <p class="o_mail_no_margin"><small>Step 2:</small></p>
+                                                <h4 class="o_mail_no_margin ">Order</h4>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <table class="o_mail_table_styles">
+                                        <tr>
+                                            <td rowspan="2" class="text-right">
+                                                <span class="fa fa-smile-o fa-2x text-delta"></span>
+                                            </td>
+                                            <td style="padding-left:10px;">
+                                                <p class="o_mail_no_margin"><small>Step 3:</small></p>
+                                                <h4 class="o_mail_no_margin ">Enjoy!</h4>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_title_sub mt8">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td class="o_mail_h_padding">
+                                    <h3 class="text-center ">Starters</h3>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_three_cols">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table">
+                        <tbody>
+                            <tr>
+                                <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_1.jpg" class="center-block" alt="Your Picture"/>
+                                        <h5 class="text-center">Tomato Soup</h5>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-primary">Order</a>
+                                        </div>
+                                    </div>
+                                </td>
+
+                                <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_2.jpg" class="center-block" alt="Your Picture"/>
+                                        <h5 class="text-center">Captain’s Salad</h5>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-primary">Order</a>
+                                        </div>
+                                    </div>
+                                </td>
+
+                                <td style="vertical-align:top;width:180px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_resto/s_default_image_block_three_cols_3.jpg" class="center-block" alt="Your Picture"/>
+                                        <h5 class="text-center">Mini Hamburgers</h5>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-primary">Order</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_footer_separator">
+                <div class="snippet_row">
+                    <div class="o_mail_snippet_general">
+                        <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                            <tbody>
+                                <tr>
+                                    <td valign="top" style="width:100%;" class="o_mail_v_padding">
+                                        <div style="width:100%;" class="separator"></div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="o_mail_block_title_sub mt16">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td class="o_mail_h_padding">
+                                    <h3 class="text-center">Mains</h3>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_two_cols">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table">
+                        <tbody>
+                            <tr>
+                                <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_resto/s_default_image_block_two_cols_1.jpg" class="center-block" alt="Your Picture"/>
+                                        <h5 class="text-center">Tagliatelle Boscaiola</h5>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-primary">Order</a>
+                                        </div>
+                                    </div>
+                                </td>
+
+                                <td style="vertical-align:top;width:270px;" class="o_mail_col_mv">
+                                    <div class="o_mail_col_container">
+                                        <img src="/mass_mailing/static/src/img/theme_resto/s_default_image_block_two_cols_2.jpg" class="center-block" alt="Your Picture"/>
+                                        <h5 class="text-center">BBQ Mix</h5>
+                                        <div class="text-center" style="margin-top:15px;">
+                                            <a href="#" class="btn btn-primary">Order</a>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="o_mail_block_footer_separator">
+                <div class="snippet_row">
+                    <div class="o_mail_snippet_general">
+                        <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                            <tbody>
+                                <tr>
+                                    <td valign="top" style="width:100%;" class="o_mail_v_padding">
+                                        <div style="width:100%;" class="separator"></div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="o_mail_block_image_text mt16 mb32">
+                <div class="o_mail_snippet_general">
+                    <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                        <tbody>
+                            <tr>
+                                <td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_img_container o_mail_h_padding o_mail_v_padding">
+                                    <img src="/mass_mailing/static/src/img/theme_resto/s_default_image_block_image_text.jpg" class="center-block" alt="Your Picture"/>
+                                </td>
+                                <td style="width:270px;vertical-align:middle;text-align:justify;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                                    <h3 class="">Recipe of the day</h3>
+                                    <p class="o_mail_no_margin">A delicious soup made of one or more seasonal vegetables, without added fat, starches and lactose.</p>
+                                    <div class="text-center" style="margin-top:15px;">
+                                        <a href="#" class="btn btn-link">Read More...</a>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <t t-call="mass_mailing.s_mail_block_footer_social_left"/>
+        </div>
+    </template>
+</odoo>
\ No newline at end of file
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index 81910fc0b1e..00b6414bd16 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -1069,23 +1069,20 @@ body.editor_enable {
 #web_editor_inside_iframe {
     background-color: @odoo-brand-secondary;
 
-    &.editor_enable #wrapwrap {
+    #wrapwrap {
         height: 100%;
+
         > main {
             height: 100%;
+
             #editable_area {
                 position: relative;
-                overflow: hidden;
-                min-height: 100%;
-                margin: 0 auto;
-
+                width: 100%;
+                height: 100%;
                 background-color: white;
             }
         }
     }
-    .note-color-palette .colorpicker {
-        display: none;
-    }
 }
 
 // Mixins for buttons with alpha bg-color