modul email

mailing_themes/COPYRIGHT

+
+Most of the files are
+
+Copyright (c) 2019 - present Droggol.
+
+Some javascript files might be from from third
+parties libraries. In that case the original
+copyright of the contributions can be traced
+through the history of the source version
+control system.
+
+When that is not the case, the files contain a prominent
+notice stating the original copyright and applicable
+license, or come with their own dedicated COPYRIGHT
+and/or LICENSE file.
+

mailing_themes/LICENSE

+Odoo Proprietary License v1.0
+
+This software and associated files (the "Software") may only be used (executed,
+modified, executed after modifications) if you have purchased a valid license
+from the authors, typically via Odoo Apps, or if you have received a written
+agreement from the authors of the Software (see the COPYRIGHT file).
+
+You may develop Odoo modules that use the Software as a library (typically
+by depending on it, importing it and using its resources), but without copying
+any source code or material from the Software. You may distribute those
+modules under the license of your choice, provided that this license is
+compatible with the terms of the Odoo Proprietary License (For example:
+LGPL, MIT, or proprietary licenses similar to this one).
+
+It is forbidden to publish, distribute, sublicense, or sell copies of the Software
+or modified copies of the Software.
+
+The above copyright notice and this permission notice must be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.
\ No newline at end of file

mailing_themes/__init__.py

+# -*- coding: utf-8 -*-
+
+from . import controllers
+from . import models

mailing_themes/__manifest__.py

+# -*- coding: utf-8 -*-
+
+{
+    'name': 'Mass Mailing Theme (with color picker)',
+    'summary': 'Send beautiful and mobile compatible emails with your brand colors. 60+ new mailing snippets. (Mass mailing theme, Mass mailing template, Massmailing theme, Email Template)',
+    'description': """
+        Send beautiful and mobile compatible mail with your brand colors (with color picker).
+        60+ new mailing snippets.
+        Mass mailing theme,
+        Mass mailing template,
+        Custom mass mailing theme,
+        Custom mail theme,
+        Massmailing theme,
+        Responsive mail templates,
+        Email Template,
+        Email colors,
+        Email template colors,
+        Custom color email,
+        Custom color mass mailing theme,
+        Mobile compatible email,
+        Dynamic mail snippets,
+        Auto fill mail,
+        Auto fill mass mail,
+        Products email,
+        Products mail,
+        Offers email,
+        Offers mail,
+        Blog email,
+        Coupon email,
+        Coupon mass mail,
+        Coupon mail,
+        Blog mail,
+        Event email,
+        Event mail,
+        Blog newsletter mail,
+        Blog newsletter email,
+        Email Branding,
+        Email Branding color,
+        Custom Email Branding,
+        Custom Email Branding,
+        Mass mail custom color,
+        Mass mail snippets,
+        Mass mail building blocks,
+        Email snippets
+    """,
+
+    'version': '14.0.0.0.2',
+    'license': 'OPL-1',
+    'category': 'Marketing',
+    'author': 'Droggol',
+    'company': 'Droggol',
+    'maintainer': 'Droggol',
+    'website': 'https://www.droggol.com/',
+
+    'depends': [
+        'mass_mailing',
+    ],
+    'data': [
+        'views/mass_mailing_themes_templates.xml',
+        'views/assets.xml',
+        'views/res_config_settings_views.xml',
+        'views/s_generic_blocks.xml',
+        'views/snippets.xml'
+    ],
+
+    "price": 153.50,
+    "currency": "EUR",
+    "live_test_url": "https://www.youtube.com/watch?v=lYITjsSmxDI",
+
+    'qweb': ['static/src/xml/*.xml'],
+    'images': ['static/description/images/banner.png'],
+    'installable': True,
+    'application': True
+}

mailing_themes/controllers/__init__.py

+# -*- coding: utf-8 -*-
+
+from . import main

mailing_themes/controllers/main.py

+# -*- coding: utf-8 -*-
+
+import json
+
+from odoo import http, fields
+from odoo.http import request
+
+from odoo.osv import expression
+import babel
+
+from odoo.tools import posix_to_ldml
+
+
+class DroggolMassMailingThemes(http.Controller):
+
+    @http.route('/droggol_mass_mailing_themes/get_module_state', type='json', auth='user')
+    def get_module_state(self, module_name='', **post):
+        is_installed = self.module_is_installed(module_name)
+        extra_info = {}
+        def_name = '_extra_info_' + module_name
+        if is_installed and hasattr(self, def_name):
+            extra_info = getattr(self, def_name)()
+        return {
+            'is_installed': is_installed,
+            'extra_info': extra_info
+        }
+
+    def module_is_installed(self, module_name):
+        if module_name:
+            domain = [('name', '=', module_name)]
+            module = request.env['ir.module.module'].sudo().search(domain)
+            if module and module.state in ['installed', 'to install', 'to upgrade']:
+                return True
+        return False
+
+    def _extra_info_sale(self):
+        return {
+            'has_pricelist': request.env.user.has_group('product.group_sale_pricelist'),
+            'pricelists': request.env['product.pricelist'].search_read([], ['name', 'id']),
+            'is_website_sale_installed': self.module_is_installed('website_sale')
+        }
+
+    def _get_events(self, domain):
+        order = None
+        is_website_event = self.module_is_installed('website_event')
+        if is_website_event:
+            order = 'is_published desc'
+        events = request.env['event.event'].search(domain, limit=25, order=order)
+        result = events.read(['name', 'organizer_id', 'date_begin', 'date_end', 'address_id', 'event_type_id', 'website_url'])
+        for res_event, event in zip(result, events):
+            res_event['start_month'] = res_event.get('date_begin').strftime('%b')
+            res_event['start_year'] = res_event.get('date_begin').strftime('%Y')
+            res_event['start_day'] = res_event.get('date_begin').strftime('%d')
+            # res_event['date_begin'] = tools.format_date(request.env, res_event.get('date_begin').strftime(DEFAULT_SERVER_DATETIME_FORMAT), date_format="DD MMM ")
+            # res_event['date_end'] = tools.format_date(request.env, res_event.get('date_end').strftime(DEFAULT_SERVER_DATETIME_FORMAT), date_format="D MMM YY")
+
+            res_event['date_begin'] = self.format_user_lang(res_event.get('date_begin'))
+            res_event['date_end'] = self.format_user_lang(res_event.get('date_end'))
+            if res_event.get('event_type_id'):
+                res_event['event_type'] = res_event.get('event_type_id')[1]
+            if res_event.get('organizer_id'):
+                res_event['organizer_name'] = res_event.get('organizer_id')[1]
+            if event.address_id.country_id:
+                res_event['country_name'] = event.address_id.country_id.name
+                res_event['street'] = event.address_id.street
+                res_event['address'] = event.address_id.name
+            if is_website_event:
+                cover_properties = json.loads(event.cover_properties)
+                res_event['cover_img'] = cover_properties.get('background-image', 'none')[4:-1].strip("'")
+        return result
+
+    def format_user_lang(self, value):
+        if not value:
+            return ''
+
+        lang_code = request.env.user._context.get('lang') or 'en_US'
+        lang = request.env['res.lang']._lang_get(lang_code)
+        locale = babel.Locale.parse(lang.code)
+
+        value = fields.Datetime.from_string(value)
+        value = fields.Datetime.context_timestamp(request.env.user, value)
+        strftime_pattern = (u"%s %s" % (lang.date_format, lang.time_format))
+        pattern = posix_to_ldml(strftime_pattern, locale=locale)
+        pattern = pattern.replace(":ss", "").replace(":s", "")
+        return babel.dates.format_datetime(value, format=pattern, locale=locale)
+
+    @http.route('/droggol_mass_mailing_themes/get_event_by_name', type='http', website=True)
+    def get_event_by_name(self, term='', **post):
+        domain = [('name', 'ilike', (term or ''))]
+        if self.module_is_installed('website_event'):
+            domain.append(('website_published', '=', True))
+        result = self._get_events(domain)
+        return json.dumps(result)
+
+    @http.route('/droggol_mass_mailing_themes/get_events_info', type='json', auth='public', website=True)
+    def get_events_info(self, domain):
+        return {
+            'items': self._get_events(domain)
+        }
+
+    def _get_blogs(self, domain):
+        blogs = request.env['blog.post'].search(domain, limit=25, order='is_published desc')
+        result = blogs.read(['name', 'author_id', 'website_url', 'teaser', 'post_date', 'visits'])
+        for res_blog, blog in zip(result, blogs):
+            cover_properties = json.loads(blog.cover_properties)
+            res_blog['blog_img'] = cover_properties.get('background-image', 'none')[4:-1].strip("'")
+            if res_blog.get('author_id'):
+                res_blog['author_img'] = '/web/image/blog.post/'+str(res_blog.get('author_id')[0])+'/author_avatar'
+                res_blog['author_name'] = res_blog.get('author_id')[1]
+                res_blog['post_date'] = res_blog.get('post_date').strftime('%b-%Y')
+        return result
+
+    @http.route('/droggol_mass_mailing_themes/get_blog_by_name', type='http', website=True)
+    def get_blog_by_name(self, term='', **post):
+        domain = [('website_published', '=', True), ('name', 'ilike', (term or ''))]
+        result = self._get_blogs(domain)
+        return json.dumps(result)
+
+    @http.route('/droggol_mass_mailing_themes/get_blogs_info', type='json', auth='public', website=True)
+    def get_blogs_info(self, domain):
+        return {
+            'items': self._get_blogs(domain)
+        }
+
+    def _get_produts_fields(self):
+        fields_to_fetch = ['id', 'name', 'display_name', 'description_sale', 'default_code']
+        if self.module_is_installed('website_sale'):
+            fields_to_fetch.extend(['website_url', 'is_published'])
+        return fields_to_fetch
+
+    def get_products(self, domain, order=None, pricelist_id=None):
+        PriceListModel = request.env['product.pricelist']
+        if pricelist_id:
+            pricelist = PriceListModel.browse(pricelist_id)
+        else:
+            pricelist = PriceListModel.search([], limit=1)
+        Model = request.env['product.template'].with_context(pricelist=pricelist.id)
+        products = Model.search(domain, limit=25,)
+        fields_to_fetch = self._get_produts_fields()
+        products_data = products.read(fields_to_fetch)
+        FieldMonetary = request.env['ir.qweb.field.monetary']
+        monetary_options = {
+            'display_currency': pricelist.currency_id,
+        }
+        is_rating_active = False
+        if self.module_is_installed('website_sale'):
+            is_rating_active = request.website.viewref('website_sale.product_comment').active
+
+        for res_product, product in zip(products_data, products):
+            combination_info = product._get_combination_info(only_template=True, pricelist=pricelist)
+            res_product.update(combination_info)
+            res_product['price'] = FieldMonetary.value_to_html(res_product['price'], monetary_options)
+            description = res_product.get('description_sale')
+            if description and len(description) > 180:
+                res_product['description_sale'] = description[:180] + '...'
+            elif description:
+                res_product['description_sale'] = description
+            else:
+                res_product['description_sale'] = ''
+            if is_rating_active:
+                res_product['rating'] = product.rating_get_stats()
+            if 'website_url' in fields_to_fetch and not res_product.get('is_published'):
+                res_product.pop('website_url', None)
+        return products_data
+
+    @http.route('/droggol_mass_mailing_themes/get_product_by_name', type='http', website=True)
+    def get_product_by_name(self, term='', **post):
+        domains = []
+        order = None
+        try:
+            pricelist_id = int(post['pricelist_id'])
+        except ValueError:
+            pricelist_id = False
+        if self.module_is_installed('website_sale'):
+            domains = [request.website.sale_product_domain()]
+            if post.get('only_published') == 'published':
+                domains.append([('website_published', '=', True)])
+            order = 'website_sequence ASC, id desc'
+        subdomains = [
+            [('name', 'ilike', (term or ''))],
+            [('product_variant_ids.default_code', 'ilike', (term or ''))]
+        ]
+        domains.append(expression.OR(subdomains))
+        result = self.get_products(expression.AND(domains), order=order, pricelist_id=pricelist_id)
+        return json.dumps(result)
+
+    @http.route('/droggol_mass_mailing_themes/get_products_info', type='json', auth='public', website=True)
+    def get_snippet_product_info(self, domain, pricelist_id=None):
+        return {
+            'items': self.get_products(domain, pricelist_id=pricelist_id),
+        }

mailing_themes/models/__init__.py

+# -*- coding: utf-8 -*-
+
+from . import res_config_settings

mailing_themes/models/res_config_settings.py

+# -*- coding: utf-8 -*-
+import json
+
+from odoo import fields, models
+
+
+class ResConfigSettings(models.TransientModel):
+    _inherit = 'res.config.settings'
+
+    d_mass_mailing_theme_colors = fields.Char(string="Theme Colors", default='{"primary": "#4285f4", "secondary": "#f3f5f9", "info": "#33b5e5", "warning": "#ffbb33", "danger": "#ff3547", "header": "#333333", "content": "#737373"}', config_parameter='d_mass_mailing_theme_colors')
+
+    def set_values(self):
+        old_palette = self.env['ir.config_parameter'].get_param('d_mass_mailing_theme_colors')
+        super(ResConfigSettings, self).set_values()
+        new_palette = self.env['ir.config_parameter'].get_param('d_mass_mailing_theme_colors')
+        if old_palette != new_palette:
+            url = '/droggol_mass_mailing_themes/static/src/scss/themes/_drgl_theme_variable.scss'
+            bundle_id = 'mass_mailing.assets_mail_themes'
+            palette = json.loads(new_palette)
+            content = '\n'.join(['$o-mm-prime-color-'+k+':'+v+';' for k, v in palette.items()])
+            WebEditorAssets = self.env['web_editor.assets']
+            WebEditorAssets.save_asset(url, bundle_id, content, 'scss')
+
+            # Clear website id from view and attachment
+            custom_url = WebEditorAssets.make_custom_asset_file_url(url, bundle_id)
+            attachment = WebEditorAssets._get_custom_attachment(custom_url)
+            if 'website_id' in attachment._fields:
+                attachment.website_id = False
+
+            view = WebEditorAssets._get_custom_view(custom_url)
+            if 'website_id' in attachment._fields:
+                view.with_context(no_cow=True).website_id = False
+
+    def dr_mm_clean_internal(self):
+        WebEditorAssets = self.env['web_editor.assets']
+
+        url = '/droggol_mass_mailing_themes/static/src/scss/themes/_drgl_theme_variable.scss'
+        bundle_id = 'mass_mailing.assets_mail_themes'
+
+        custom_url = WebEditorAssets.make_custom_asset_file_url(url, bundle_id)
+        attachment = WebEditorAssets._get_custom_attachment(custom_url)
+        view = WebEditorAssets._get_custom_view(custom_url)
+
+        # Delete the custom attachment
+        if attachment:
+            attachment.unlink()
+
+        # Delete the custom views
+        if view:
+            view.with_context(no_cow=True).unlink()
+
+        # Delete config params
+        config = self.env['ir.config_parameter'].search([('key', '=', 'd_mass_mailing_theme_colors')])
+        if config:
+            config.unlink()

mailing_themes/static/description/images/bg.svg

+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'><path fill='#ffffff' fill-opacity='0.15' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'></path></svg>
\ No newline at end of file

mailing_themes/static/description/images/cards/cloud.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg6"
+   sodipodi:docname="lnr-cloud-upload.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     fill="#000000"
+     d="M16.006 16h-3.506c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3.506c1.651 0 2.994-1.343 2.994-2.994s-1.343-2.994-2.994-2.994c-0.352 0-0.696 0.060-1.023 0.179-0.218 0.079-0.462-0.002-0.589-0.196s-0.104-0.45 0.056-0.618c0.355-0.373 0.55-0.862 0.55-1.377 0-1.103-0.897-2-2-2-0.642 0-1.229 0.297-1.61 0.814-0.229 0.31-0.362 0.677-0.386 1.061-0.013 0.212-0.159 0.393-0.364 0.451s-0.423-0.021-0.545-0.195l-0.005-0.007c-0.107-0.152-0.226-0.302-0.351-0.442-0.949-1.068-2.312-1.681-3.74-1.681-2.757 0-5 2.243-5 5s2.243 5 5 5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-2.5c-3.308 0-6-2.692-6-6s2.692-6 6-6c1.603 0 3.137 0.643 4.261 1.775 0.087-0.195 0.196-0.381 0.324-0.555 0.564-0.764 1.467-1.22 2.415-1.22 1.654 0 3 1.346 3 3 0 0.351-0.061 0.694-0.176 1.017 0.061-0.003 0.122-0.004 0.183-0.004 2.202 0 3.994 1.792 3.994 3.994s-1.792 3.994-3.994 3.994z"
+     id="path2"
+     style="fill:#ab47bc;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M12.854 12.146l-2-2c-0.195-0.195-0.512-0.195-0.707 0l-2 2c-0.195 0.195-0.195 0.512 0 0.707s0.512 0.195 0.707 0l1.146-1.146v3.793c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-3.793l1.146 1.146c0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146c0.195-0.195 0.195-0.512 0-0.707z"
+     id="path4"
+     style="fill:#ab47bc;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/cards/code.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg8"
+   sodipodi:docname="lnr-code.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     fill="#000000"
+     d="M5 15c-0.128 0-0.256-0.049-0.354-0.146l-4-4c-0.195-0.195-0.195-0.512 0-0.707l4-4c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-3.646 3.646 3.646 3.646c0.195 0.195 0.195 0.512 0 0.707-0.098 0.098-0.226 0.146-0.354 0.146z"
+     id="path2"
+     style="fill:#0080ff;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M15 15c-0.128 0-0.256-0.049-0.354-0.146-0.195-0.195-0.195-0.512 0-0.707l3.646-3.646-3.646-3.646c-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0l4 4c0.195 0.195 0.195 0.512 0 0.707l-4 4c-0.098 0.098-0.226 0.146-0.354 0.146z"
+     id="path4"
+     style="fill:#0080ff;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M7.5 15c-0.091 0-0.182-0.025-0.265-0.076-0.234-0.146-0.305-0.455-0.159-0.689l5-8c0.146-0.234 0.455-0.305 0.689-0.159s0.305 0.455 0.159 0.689l-5 8c-0.095 0.152-0.258 0.235-0.424 0.235z"
+     id="path6"
+     style="fill:#0080ff;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/cards/coffee.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg6"
+   sodipodi:docname="lnr-coffee-cup.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     fill="#000000"
+     d="M10 15c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zM10 10c-1.103 0-2 0.897-2 2s0.897 2 2 2c1.103 0 2-0.897 2-2s-0.897-2-2-2z"
+     id="path2"
+     style="fill:#141a1f;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M15.904 2.056l-0.177-0.707c-0.189-0.756-0.948-1.349-1.728-1.349h-8c-0.78 0-1.538 0.593-1.728 1.349l-0.177 0.707c-0.631 0.177-1.096 0.757-1.096 1.444v1c0 0.663 0.432 1.226 1.029 1.424l0.901 12.614c0.058 0.806 0.762 1.462 1.57 1.462h7c0.808 0 1.512-0.656 1.57-1.462l0.901-12.614c0.597-0.198 1.029-0.761 1.029-1.424v-1c0-0.687-0.464-1.267-1.096-1.444zM6 1h8c0.319 0 0.68 0.282 0.757 0.591l0.102 0.409h-9.719l0.102-0.409c0.077-0.309 0.438-0.591 0.757-0.591zM14.892 7h-9.783l-0.071-1h9.926l-0.071 1zM14.249 16h-8.497l-0.571-8h9.64l-0.571 8zM13.5 19h-7c-0.29 0-0.552-0.244-0.573-0.533l-0.105-1.467h8.355l-0.105 1.467c-0.021 0.289-0.283 0.533-0.573 0.533zM16 4.5c0 0.276-0.224 0.5-0.5 0.5h-11c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.275 0.224-0.499 0.499-0.5 0.001 0 0.001 0 0.002 0s0.002-0 0.003-0h10.997c0.276 0 0.5 0.224 0.5 0.5v1z"
+     id="path4"
+     style="fill:#141a1f;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/cards/hat.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg4"
+   sodipodi:docname="lnr-graduation-hat.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     fill="#000000"
+     d="M18.658 7.026l-9-3c-0.103-0.034-0.214-0.034-0.316 0l-9 3c-0.204 0.068-0.342 0.259-0.342 0.474s0.138 0.406 0.342 0.474l2.658 0.886v2.64c0 0.133 0.053 0.26 0.146 0.354 0.088 0.088 2.194 2.146 6.354 2.146 1.513 0 2.924-0.272 4.195-0.809 0.254-0.107 0.373-0.401 0.266-0.655s-0.401-0.373-0.655-0.266c-1.147 0.485-2.427 0.73-3.805 0.73-1.945 0-3.376-0.504-4.234-0.926-0.635-0.313-1.060-0.629-1.266-0.799v-2.081l5.342 1.781c0.051 0.017 0.105 0.026 0.158 0.026s0.107-0.009 0.158-0.026l5.342-1.781v0.892c-0.582 0.206-1 0.762-1 1.414 0 0.611 0.367 1.137 0.892 1.371l-0.877 3.508c-0.037 0.149-0.004 0.308 0.091 0.429s0.24 0.192 0.394 0.192h2c0.154 0 0.299-0.071 0.394-0.192s0.128-0.28 0.091-0.429l-0.877-3.508c0.525-0.234 0.892-0.76 0.892-1.371 0-0.652-0.418-1.208-1-1.414v-1.226l2.658-0.886c0.204-0.068 0.342-0.259 0.342-0.474s-0.138-0.406-0.342-0.474zM15.5 11c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5zM15.14 16l0.36-1.438 0.36 1.438h-0.719zM15.46 7.986l-5.877-0.98c-0.273-0.045-0.53 0.139-0.575 0.411s0.139 0.53 0.411 0.575l4.014 0.669-3.932 1.311-7.419-2.473 7.419-2.473 7.419 2.473-1.459 0.486z"
+     id="path2"
+     style="fill:#28a745;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/cards/highlight.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg4"
+   sodipodi:docname="lnr-highlight.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     fill="#000000"
+     d="M19.854 9.646c-0.195-0.195-0.512-0.195-0.707 0l-3.586 3.586c-0.585 0.585-1.537 0.585-2.121 0l-4.672-4.672c-0.282-0.282-0.437-0.658-0.437-1.061s0.155-0.779 0.437-1.061l3.586-3.586c0.195-0.195 0.195-0.512 0-0.707s-0.512-0.195-0.707 0l-3.586 3.586c-0.471 0.471-0.73 1.098-0.73 1.768 0 0.285 0.048 0.563 0.138 0.824l-7.322 7.322c-0.094 0.094-0.146 0.221-0.146 0.354v1.5c0 0.276 0.224 0.5 0.5 0.5h9.5c0.133 0 0.26-0.053 0.354-0.146l3.322-3.322c0.261 0.091 0.539 0.138 0.824 0.138 0.669 0 1.297-0.259 1.768-0.73l3.586-3.586c0.195-0.195 0.195-0.512 0-0.707zM9.793 17h-8.793v-0.793l7.002-7.002c0.020 0.021 0.039 0.042 0.059 0.062l4.672 4.672c0.020 0.020 0.041 0.040 0.062 0.059l-3.002 3.002z"
+     id="path2"
+     style="fill:#ffad0a;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/cards/layers.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg8"
+   sodipodi:docname="lnr-layers.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     fill="#000000"
+     d="M10 12c-0.066 0-0.132-0.013-0.194-0.039l-9.5-4c-0.185-0.078-0.306-0.26-0.306-0.461s0.121-0.383 0.306-0.461l9.5-4c0.124-0.052 0.264-0.052 0.388 0l9.5 4c0.185 0.078 0.306 0.26 0.306 0.461s-0.121 0.383-0.306 0.461l-9.5 4c-0.062 0.026-0.128 0.039-0.194 0.039zM1.788 7.5l8.212 3.457 8.212-3.457-8.212-3.457-8.212 3.457z"
+     id="path2"
+     style="fill:#00a98f;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M10 15c-0.066 0-0.132-0.013-0.194-0.039l-9.5-4c-0.254-0.107-0.374-0.4-0.267-0.655s0.4-0.374 0.655-0.267l9.306 3.918 9.306-3.918c0.254-0.107 0.548 0.012 0.655 0.267s-0.012 0.548-0.267 0.655l-9.5 4c-0.062 0.026-0.128 0.039-0.194 0.039z"
+     id="path4"
+     style="fill:#00a98f;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M10 18c-0.066 0-0.132-0.013-0.194-0.039l-9.5-4c-0.254-0.107-0.374-0.4-0.267-0.655s0.4-0.374 0.655-0.267l9.306 3.918 9.306-3.918c0.254-0.107 0.548 0.012 0.655 0.267s-0.012 0.548-0.267 0.655l-9.5 4c-0.062 0.026-0.128 0.039-0.194 0.039z"
+     id="path6"
+     style="fill:#00a98f;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/cards/pulse.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg8"
+   sodipodi:docname="lnr-heart-pulse.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     fill="#000000"
+     d="M9.5 19c-0.084 0-0.167-0.021-0.243-0.063-0.116-0.065-2.877-1.611-5.369-4.082-0.196-0.194-0.197-0.511-0.003-0.707s0.511-0.197 0.707-0.003c1.979 1.962 4.186 3.346 4.908 3.776 0.723-0.431 2.932-1.817 4.908-3.776 0.196-0.194 0.513-0.193 0.707 0.003s0.193 0.513-0.003 0.707c-2.493 2.471-5.253 4.017-5.369 4.082-0.076 0.042-0.159 0.063-0.243 0.063z"
+     id="path2"
+     style="fill:#ff5c75;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M1.279 11c-0.188 0-0.368-0.106-0.453-0.287-0.548-1.165-0.826-2.33-0.826-3.463 0-2.895 2.355-5.25 5.25-5.25 0.98 0 2.021 0.367 2.931 1.034 0.532 0.39 0.985 0.86 1.319 1.359 0.334-0.499 0.787-0.969 1.319-1.359 0.91-0.667 1.951-1.034 2.931-1.034 2.895 0 5.25 2.355 5.25 5.25 0 1.133-0.278 2.298-0.826 3.463-0.118 0.25-0.415 0.357-0.665 0.24s-0.357-0.415-0.24-0.665c0.485-1.031 0.731-2.053 0.731-3.037 0-2.343-1.907-4.25-4.25-4.25-1.703 0-3.357 1.401-3.776 2.658-0.068 0.204-0.259 0.342-0.474 0.342s-0.406-0.138-0.474-0.342c-0.419-1.257-2.073-2.658-3.776-2.658-2.343 0-4.25 1.907-4.25 4.25 0 0.984 0.246 2.006 0.731 3.037 0.118 0.25 0.010 0.548-0.24 0.665-0.069 0.032-0.141 0.048-0.212 0.048z"
+     id="path4"
+     style="fill:#ff5c75;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M10.515 15c-0.005 0-0.009-0-0.013-0-0.202-0.004-0.569-0.109-0.753-0.766l-1.217-4.334-0.807 3.279c-0.158 0.643-0.525 0.778-0.73 0.8s-0.592-0.027-0.889-0.62l-0.606-1.211c-0.029-0.058-0.056-0.094-0.076-0.117-0.003 0.004-0.007 0.009-0.011 0.015-0.37 0.543-1.192 0.953-1.913 0.953h-1c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1c0.421 0 0.921-0.272 1.087-0.516 0.223-0.327 0.547-0.501 0.891-0.478 0.374 0.025 0.708 0.279 0.917 0.696l0.445 0.89 0.936-3.803c0.158-0.64 0.482-0.779 0.726-0.783s0.572 0.125 0.751 0.76l1.284 4.576 1.178-3.608c0.205-0.628 0.582-0.736 0.788-0.745s0.59 0.068 0.847 0.677l0.724 1.719c0.136 0.322 0.578 0.616 0.927 0.616h1.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1.5c-0.747 0-1.559-0.539-1.849-1.228l-0.592-1.406-1.274 3.9c-0.207 0.634-0.566 0.733-0.771 0.733z"
+     id="path6"
+     style="fill:#ff5c75;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/cards/store.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg12"
+   sodipodi:docname="lnr-store.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     fill="#000000"
+     d="M18 9.5v-1c0-0.078-0.018-0.154-0.053-0.224l-2-4c-0.085-0.169-0.258-0.276-0.447-0.276h-12c-0.189 0-0.363 0.107-0.447 0.276l-2 4c-0.035 0.069-0.053 0.146-0.053 0.224v1c0 0.816 0.393 1.542 1 1.999v6.501h-0.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h16c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5h-0.5v-6.501c0.607-0.457 1-1.182 1-1.999zM11.5 11c-0.827 0-1.5-0.673-1.5-1.5v-0.5h3v0.5c0 0.827-0.673 1.5-1.5 1.5zM2 9.5v-0.5h3v0.5c0 0.827-0.673 1.5-1.5 1.5s-1.5-0.673-1.5-1.5zM9 5v3h-2.86l0.75-3h2.11zM12.11 5l0.75 3h-2.86v-3h2.11zM6 9h3v0.5c0 0.827-0.673 1.5-1.5 1.5s-1.5-0.673-1.5-1.5v-0.5zM14 9h3v0.5c0 0.827-0.673 1.5-1.5 1.5s-1.5-0.673-1.5-1.5v-0.5zM16.691 8h-2.801l-0.75-3h2.051l1.5 3zM3.809 5h2.051l-0.75 3h-2.801l1.5-3zM3 11.95c0.162 0.033 0.329 0.050 0.5 0.050 0.817 0 1.544-0.394 2-1.002 0.456 0.608 1.183 1.002 2 1.002s1.544-0.394 2-1.002c0.361 0.48 0.89 0.827 1.5 0.951v6.050h-8v-6.050zM16 18h-4v-6.050c0.61-0.124 1.139-0.471 1.5-0.951 0.456 0.608 1.183 1.002 2 1.002 0.171 0 0.338-0.017 0.5-0.050v6.050z"
+     id="path2"
+     style="fill:#17a2b8;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M14 14.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5z"
+     id="path4"
+     style="fill:#17a2b8;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M4.5 15c-0.128 0-0.256-0.049-0.354-0.146-0.195-0.195-0.195-0.512 0-0.707l1-1c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-1 1c-0.098 0.098-0.226 0.146-0.354 0.146z"
+     id="path6"
+     style="fill:#17a2b8;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M5.5 17c-0.128 0-0.256-0.049-0.354-0.146-0.195-0.195-0.195-0.512 0-0.707l3-3c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-3 3c-0.098 0.098-0.226 0.146-0.354 0.146z"
+     id="path8"
+     style="fill:#17a2b8;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M8.5 17c-0.128 0-0.256-0.049-0.354-0.146-0.195-0.195-0.195-0.512 0-0.707l1-1c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-1 1c-0.098 0.098-0.226 0.146-0.354 0.146z"
+     id="path10"
+     style="fill:#17a2b8;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/cards/tablet.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg8"
+   sodipodi:docname="lnr-tablet.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     fill="#000000"
+     d="M16.5 20h-13c-0.827 0-1.5-0.673-1.5-1.5v-17c0-0.827 0.673-1.5 1.5-1.5h13c0.827 0 1.5 0.673 1.5 1.5v17c0 0.827-0.673 1.5-1.5 1.5zM3.5 1c-0.276 0-0.5 0.224-0.5 0.5v17c0 0.276 0.224 0.5 0.5 0.5h13c0.276 0 0.5-0.224 0.5-0.5v-17c0-0.276-0.224-0.5-0.5-0.5h-13z"
+     id="path2"
+     style="fill:#ab47bc;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M10.5 18h-1c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"
+     id="path4"
+     style="fill:#ab47bc;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M15.5 16h-11c-0.276 0-0.5-0.224-0.5-0.5v-13c0-0.276 0.224-0.5 0.5-0.5h11c0.276 0 0.5 0.224 0.5 0.5v13c0 0.276-0.224 0.5-0.5 0.5zM5 15h10v-12h-10v12z"
+     id="path6"
+     style="fill:#ab47bc;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/dots_bg.svg

+<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><path d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='#f6f4f1' fill-opacity='0.72' fill-rule='evenodd'/></svg>
\ No newline at end of file

mailing_themes/static/description/images/layers.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg8"
+   sodipodi:docname="lnr-layers.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="-5.3813559"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     fill="#000000"
+     d="M10 12c-0.066 0-0.132-0.013-0.194-0.039l-9.5-4c-0.185-0.078-0.306-0.26-0.306-0.461s0.121-0.383 0.306-0.461l9.5-4c0.124-0.052 0.264-0.052 0.388 0l9.5 4c0.185 0.078 0.306 0.26 0.306 0.461s-0.121 0.383-0.306 0.461l-9.5 4c-0.062 0.026-0.128 0.039-0.194 0.039zM1.788 7.5l8.212 3.457 8.212-3.457-8.212-3.457-8.212 3.457z"
+     id="path2"
+     style="fill:#ab47bc;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M10 15c-0.066 0-0.132-0.013-0.194-0.039l-9.5-4c-0.254-0.107-0.374-0.4-0.267-0.655s0.4-0.374 0.655-0.267l9.306 3.918 9.306-3.918c0.254-0.107 0.548 0.012 0.655 0.267s-0.012 0.548-0.267 0.655l-9.5 4c-0.062 0.026-0.128 0.039-0.194 0.039z"
+     id="path4"
+     style="fill:#ab47bc;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M10 18c-0.066 0-0.132-0.013-0.194-0.039l-9.5-4c-0.254-0.107-0.374-0.4-0.267-0.655s0.4-0.374 0.655-0.267l9.306 3.918 9.306-3.918c0.254-0.107 0.548 0.012 0.655 0.267s-0.012 0.548-0.267 0.655l-9.5 4c-0.062 0.026-0.128 0.039-0.194 0.039z"
+     id="path6"
+     style="fill:#ab47bc;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/list.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg8"
+   sodipodi:docname="lnr-tablet.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     fill="#000000"
+     d="M16.5 20h-13c-0.827 0-1.5-0.673-1.5-1.5v-17c0-0.827 0.673-1.5 1.5-1.5h13c0.827 0 1.5 0.673 1.5 1.5v17c0 0.827-0.673 1.5-1.5 1.5zM3.5 1c-0.276 0-0.5 0.224-0.5 0.5v17c0 0.276 0.224 0.5 0.5 0.5h13c0.276 0 0.5-0.224 0.5-0.5v-17c0-0.276-0.224-0.5-0.5-0.5h-13z"
+     id="path2"
+     style="fill:#ff657d;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M10.5 18h-1c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"
+     id="path4"
+     style="fill:#ff657d;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M15.5 16h-11c-0.276 0-0.5-0.224-0.5-0.5v-13c0-0.276 0.224-0.5 0.5-0.5h11c0.276 0 0.5 0.224 0.5 0.5v13c0 0.276-0.224 0.5-0.5 0.5zM5 15h10v-12h-10v12z"
+     id="path6"
+     style="fill:#ff657d;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/lock.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg12"
+   sodipodi:docname="lnr-magic-wand.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     fill="#000000"
+     d="M11.5 7c-0.276 0-0.5-0.224-0.5-0.5 0-1.378-1.122-2.5-2.5-2.5-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5c1.378 0 2.5-1.122 2.5-2.5 0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5c0 1.378 1.122 2.5 2.5 2.5 0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5c-1.378 0-2.5 1.122-2.5 2.5 0 0.276-0.224 0.5-0.5 0.5zM10.301 3.5c0.49 0.296 0.903 0.708 1.199 1.199 0.296-0.49 0.708-0.903 1.199-1.199-0.49-0.296-0.903-0.708-1.199-1.199-0.296 0.49-0.708 0.903-1.199 1.199z"
+     id="path2"
+     style="fill:#ffbf40;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M1.5 10c-0.276 0-0.5-0.224-0.5-0.5s-0.224-0.5-0.5-0.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5c0.276 0 0.5-0.224 0.5-0.5s0.224-0.5 0.5-0.5 0.5 0.224 0.5 0.5c0 0.276 0.224 0.5 0.5 0.5s0.5 0.224 0.5 0.5-0.224 0.5-0.5 0.5c-0.276 0-0.5 0.224-0.5 0.5s-0.224 0.5-0.5 0.5z"
+     id="path4"
+     style="fill:#ffbf40;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M18.147 15.939l-10.586-10.586c-0.283-0.283-0.659-0.438-1.061-0.438s-0.778 0.156-1.061 0.438l-0.586 0.586c-0.283 0.283-0.438 0.659-0.438 1.061s0.156 0.778 0.438 1.061l10.586 10.586c0.283 0.283 0.659 0.438 1.061 0.438s0.778-0.156 1.061-0.438l0.586-0.586c0.283-0.283 0.438-0.659 0.438-1.061s-0.156-0.778-0.438-1.061zM5.561 6.646l0.586-0.586c0.094-0.094 0.219-0.145 0.354-0.145s0.26 0.052 0.354 0.145l1.439 1.439-1.293 1.293-1.439-1.439c-0.195-0.195-0.195-0.512 0-0.707zM17.439 17.354l-0.586 0.586c-0.094 0.094-0.219 0.145-0.353 0.145s-0.26-0.052-0.353-0.145l-8.439-8.439 1.293-1.293 8.439 8.439c0.195 0.195 0.195 0.512 0 0.707z"
+     id="path6"
+     style="fill:#ffbf40;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M3.5 5c-0.276 0-0.5-0.224-0.5-0.5 0-0.827-0.673-1.5-1.5-1.5-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5c0.827 0 1.5-0.673 1.5-1.5 0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5c0 0.827 0.673 1.5 1.5 1.5 0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5c-0.827 0-1.5 0.673-1.5 1.5 0 0.276-0.224 0.5-0.5 0.5zM2.998 2.5c0.19 0.143 0.359 0.312 0.502 0.502 0.143-0.19 0.312-0.359 0.502-0.502-0.19-0.143-0.359-0.312-0.502-0.502-0.143 0.19-0.312 0.359-0.502 0.502z"
+     id="path8"
+     style="fill:#ffbf40;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M3.5 15c-0.276 0-0.5-0.224-0.5-0.5 0-0.827-0.673-1.5-1.5-1.5-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5c0.827 0 1.5-0.673 1.5-1.5 0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5c0 0.827 0.673 1.5 1.5 1.5 0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5c-0.827 0-1.5 0.673-1.5 1.5 0 0.276-0.224 0.5-0.5 0.5zM2.998 12.5c0.19 0.143 0.359 0.312 0.502 0.502 0.143-0.19 0.312-0.359 0.502-0.502-0.19-0.143-0.359-0.312-0.502-0.502-0.143 0.19-0.312 0.359-0.502 0.502z"
+     id="path10"
+     style="fill:#ffbf40;fill-opacity:1" />
+</svg>

mailing_themes/static/description/images/logo.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="181.86093mm"
+   height="67.946495mm"
+   viewBox="0 0 181.86093 67.946496"
+   version="1.1"
+   id="svg8"
+   inkscape:export-filename="/home/pga/bitmap.png"
+   inkscape:export-xdpi="76"
+   inkscape:export-ydpi="76"
+   inkscape:version="0.92.4 (unknown)"
+   sodipodi:docname="white_logo.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.50000001"
+     inkscape:cx="354.53399"
+     inkscape:cy="111.871"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     width="296mm" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-82.949981,-6.7938269)">
+    <g
+       aria-label="Droggo"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Kollektif;-inkscape-font-specification:Kollektif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       id="text817">
+      <path
+         id="path838"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.79999924px;font-family:Kollektif;-inkscape-font-specification:Kollektif;fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
+         d="m 240.34981,38.469121 q 2.6924,0 5.08,1.0668 2.3876,1.016 4.1656,2.8448 1.778,1.778 2.794,4.2164 1.0668,2.3876 1.0668,5.1308 0,2.7432 -1.0668,5.1816 -1.016,2.3876 -2.794,4.2164 -1.778,1.778 -4.1656,2.8448 -2.3876,1.016 -5.08,1.016 -2.7432,0 -5.1308,-1.016 -2.3876,-1.0668 -4.1656,-2.8448 -1.778,-1.8288 -2.8448,-4.2164 -1.016,-2.4384 -1.016,-5.1816 0,-2.7432 1.016,-5.1308 1.0668,-2.4384 2.8448,-4.2164 1.778,-1.8288 4.1656,-2.8448 2.3876,-1.0668 5.1308,-1.0668 z m 0,20.3708 q 1.27,0 2.3368,-0.508 1.1176,-0.508 1.9304,-1.3716 0.8636,-0.9144 1.3208,-2.1336 0.508,-1.27 0.508,-2.794 0,-1.524 -0.508,-2.8448 -0.4572,-1.3208 -1.3208,-2.286 -0.8128,-1.016 -1.9304,-1.5748 -1.0668,-0.6096 -2.3368,-0.6096 -1.27,0 -2.3876,0.6096 -1.1176,0.5588 -1.9812,1.5748 -0.8128,0.9652 -1.3208,2.286 -0.4572,1.3208 -0.4572,2.8448 0,1.524 0.4572,2.794 0.508,1.2192 1.3208,2.1336 0.8636,0.8636 1.9812,1.3716 1.1176,0.508 2.3876,0.508 z m -22.7965,-19.6596 h 5.9944 v 16.6624 q 0,2.8956 -0.1016,5.1816 -0.0508,2.2352 -0.3556,4.0132 -0.3048,1.8288 -1.016,3.2512 -0.6604,1.4224 -1.8796,2.6416 -2.2352,2.1844 -5.0292,2.9972 -2.7432,0.8128 -5.7912,0.8128 -2.5908,0 -4.8768,-0.6096 -2.286,-0.6096 -4.1148,-1.6764 v -6.5532 q 0.4572,0.7112 1.27,1.27 0.8636,0.5588 1.9304,0.9652 1.1176,0.4064 2.3368,0.6096 1.27,0.254 2.54,0.254 1.6764,0 3.1496,-0.4572 1.4732,-0.4064 2.54,-1.3716 1.1176,-0.9652 1.7272,-2.4384 0.6604,-1.4224 0.6604,-3.5052 v -0.508 q -1.4732,1.3208 -3.4036,2.1336 -1.9304,0.762 -4.2164,0.762 -2.54,0 -4.7244,-0.9652 -2.1336,-1.016 -3.7084,-2.6924 -1.5748,-1.7272 -2.4892,-4.0132 -0.8636,-2.3368 -0.8636,-4.9276 0,-2.5908 0.8636,-4.8768 0.9144,-2.286 2.4892,-3.9624 1.5748,-1.7272 3.7084,-2.6924 2.1844,-1.016 4.7244,-1.016 2.3876,0 4.318,0.6604 1.9304,0.6096 3.302,1.9812 z m -7.2136,18.1864 q 1.6256,0 2.794,-0.5588 1.1684,-0.6096 1.9304,-1.524 0.762,-0.9144 1.1176,-2.032 0.3556,-1.1176 0.3556,-2.1844 0,-1.1684 -0.4064,-2.286 -0.3556,-1.1684 -1.1176,-2.032 -0.762,-0.9144 -1.9304,-1.4732 -1.1684,-0.5588 -2.7432,-0.5588 -1.3208,0 -2.4384,0.508 -1.1176,0.508 -1.9812,1.3716 -0.8128,0.8636 -1.3208,2.032 -0.4572,1.1176 -0.4572,2.4384 0,1.3208 0.4572,2.4892 0.508,1.1176 1.3208,1.9812 0.8636,0.8636 1.9812,1.3716 1.1176,0.4572 2.4384,0.4572 z m -22.9489,-18.1864 h 5.9944 v 16.6624 q 0,2.8956 -0.1016,5.1816 -0.0508,2.2352 -0.3556,4.0132 -0.3048,1.8288 -1.016,3.2512 -0.6604,1.4224 -1.8796,2.6416 -2.2352,2.1844 -5.0292,2.9972 -2.7432,0.8128 -5.7912,0.8128 -2.5908,0 -4.8768,-0.6096 -2.286,-0.6096 -4.1148,-1.6764 v -6.5532 q 0.4572,0.7112 1.27,1.27 0.8636,0.5588 1.9304,0.9652 1.1176,0.4064 2.3368,0.6096 1.27,0.254 2.54,0.254 1.6764,0 3.1496,-0.4572 1.4732,-0.4064 2.54,-1.3716 1.1176,-0.9652 1.7272,-2.4384 0.6604,-1.4224 0.6604,-3.5052 v -0.508 q -1.4732,1.3208 -3.4036,2.1336 -1.9304,0.762 -4.2164,0.762 -2.54,0 -4.7244,-0.9652 -2.1336,-1.016 -3.7084,-2.6924 -1.5748,-1.7272 -2.4892,-4.0132 -0.8636,-2.3368 -0.8636,-4.9276 0,-2.5908 0.8636,-4.8768 0.9144,-2.286 2.4892,-3.9624 1.5748,-1.7272 3.7084,-2.6924 2.1844,-1.016 4.7244,-1.016 2.3876,0 4.318,0.6604 1.9304,0.6096 3.302,1.9812 z m -7.2136,18.1864 q 1.6256,0 2.794,-0.5588 1.1684,-0.6096 1.9304,-1.524 0.762,-0.9144 1.1176,-2.032 0.3556,-1.1176 0.3556,-2.1844 0,-1.1684 -0.4064,-2.286 -0.3556,-1.1684 -1.1176,-2.032 -0.762,-0.9144 -1.9304,-1.4732 -1.1684,-0.5588 -2.7432,-0.5588 -1.3208,0 -2.4384,0.508 -1.1176,0.508 -1.9812,1.3716 -0.8128,0.8636 -1.3208,2.032 -0.4572,1.1176 -0.4572,2.4384 0,1.3208 0.4572,2.4892 0.508,1.1176 1.3208,1.9812 0.8636,0.8636 1.9812,1.3716 1.1176,0.4572 2.4384,0.4572 z m -29.32271,-18.8976 q 2.6924,0 5.08,1.0668 2.3876,1.016 4.1656,2.8448 1.778,1.778 2.794,4.2164 1.0668,2.3876 1.0668,5.1308 0,2.7432 -1.0668,5.1816 -1.016,2.3876 -2.794,4.2164 -1.778,1.778 -4.1656,2.8448 -2.3876,1.016 -5.08,1.016 -2.7432,0 -5.1308,-1.016 -2.3876,-1.0668 -4.1656,-2.8448 -1.778,-1.8288 -2.8448,-4.2164 -1.016,-2.4384 -1.016,-5.1816 0,-2.7432 1.016,-5.1308 1.0668,-2.4384 2.8448,-4.2164 1.778,-1.8288 4.1656,-2.8448 2.3876,-1.0668 5.1308,-1.0668 z m 0,20.3708 q 1.27,0 2.3368,-0.508 1.1176,-0.508 1.9304,-1.3716 0.8636,-0.9144 1.3208,-2.1336 0.508,-1.27 0.508,-2.794 0,-1.524 -0.508,-2.8448 -0.4572,-1.3208 -1.3208,-2.286 -0.8128,-1.016 -1.9304,-1.5748 -1.0668,-0.6096 -2.3368,-0.6096 -1.27,0 -2.3876,0.6096 -1.1176,0.5588 -1.9812,1.5748 -0.8128,0.9652 -1.3208,2.286 -0.4572,1.3208 -0.4572,2.8448 0,1.524 0.4572,2.794 0.508,1.2192 1.3208,2.1336 0.8636,0.8636 1.9812,1.3716 1.1176,0.508 2.3876,0.508 z m -26.42156,-16.1544 q 0.508,-0.8128 1.1684,-1.524 0.6604,-0.762 1.5748,-1.3208 0.9144,-0.6096 2.0828,-0.9652 1.1684,-0.3556 2.6416,-0.3556 1.7272,0 4.0132,0.6096 l -0.6604,6.2484 q -0.5588,-0.1016 -1.1176,-0.254 -0.4572,-0.1016 -1.016,-0.1524 -0.5588,-0.1016 -1.016,-0.1016 -1.6256,0 -3.048,0.4572 -1.3716,0.4572 -2.3876,1.27 -1.016,0.8128 -1.6256,1.9812 -0.6096,1.1176 -0.6096,2.4384 v 13.3604 h -7.0104 v -25.1968 h 6.35 z M 97.478781,28.359922 q 3.911599,0 6.908799,1.422399 2.9972,1.4224 4.9784,3.8608 2.032,2.4384 3.048,5.7404 1.0668,3.302 1.0668,7.0104 0,3.7592 -1.1176,7.0612 -1.0668,3.2512 -2.9972,5.6896 -1.9304,2.4384 -4.572,3.8608 -2.6416,1.3716 -5.740399,1.3716 h -16.1036 V 28.359922 Z m 0.0508,29.057599 q 2.1844,0 3.708399,-0.8636 1.5748,-0.9144 2.5908,-2.4384 1.016,-1.524 1.4732,-3.5052 0.508,-1.9812 0.508,-4.1656 0,-2.1844 -0.4572,-4.1656 -0.4572,-2.032 -1.4732,-3.556 -1.016,-1.524 -2.5908,-2.4384 -1.574799,-0.9144 -3.759199,-0.9144 h -6.858 v 22.0472 z" />
+    </g>
+    <g
+       style="fill:#000000"
+       id="g883"
+       transform="matrix(0,-0.19310706,0.19310706,0,205.77714,22.550297)">
+      <g
+         id="__id241_s1j87qcj7g"
+         transform="translate(-54.80552)">
+        <polygon
+           points="72.2,308.2 69,184.1 64.2,308.2 "
+           style="fill:#0080ff"
+           id="polygon875"
+           transform="matrix(1,0,0,0.71294449,0,52.846919)" />
+      </g>
+      <g
+         id="__id242_s1j87qcj7g"
+         transform="translate(-54.80552)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 136.4,138.4 c 0,70.2 -68.2,115.9 -68.2,115.9 C 68.2,254.3 0,208.6 0,138.4 0,68.2 68.2,0 68.2,0 c 0,0 68.2,68.2 68.2,138.4 z"
+           style="fill:#0080ff"
+           id="path878" />
+      </g>
+      <path
+         inkscape:connector-curvature="0"
+         d="m 13.39448,0 c 0,0 -68.2,68.2 -68.2,138.4 0,70.2 68.2,115.9 68.2,115.9 z"
+         style="opacity:0.07999998"
+         id="path881" />
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="331.40643"
+       y="89.479347"
+       id="text3545"><tspan
+         sodipodi:role="line"
+         id="tspan3543"
+         x="331.40643"
+         y="98.843117"
+         style="stroke-width:0.26458332" /></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="269.7471"
+       y="67.670288"
+       id="text826"><tspan
+         sodipodi:role="line"
+         id="tspan824"
+         x="269.7471"
+         y="77.034058"
+         style="stroke-width:0.26458332" /></text>
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:0.09526565"
+       id="rect830"
+       width="7.521822"
+       height="44.456753"
+       x="257.28909"
+       y="19.125162" />
+  </g>
+</svg>

mailing_themes/static/description/images/pages_bg.svg

+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'><path fill='#f4f4f4' fill-opacity='1' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'></path></svg>
\ No newline at end of file

mailing_themes/static/description/images/select.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg6"
+   sodipodi:docname="lnr-select.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1004"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="11.8"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     fill="#000000"
+     d="M5.5 15h-4c-0.827 0-1.5-0.673-1.5-1.5v-12c0-0.827 0.673-1.5 1.5-1.5h14c0.827 0 1.5 0.673 1.5 1.5v7c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-7c0-0.276-0.224-0.5-0.5-0.5h-14c-0.276 0-0.5 0.224-0.5 0.5v12c0 0.276 0.224 0.5 0.5 0.5h4c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"
+     id="path2"
+     style="fill:#00a98f;fill-opacity:1" />
+  <path
+     fill="#000000"
+     d="M13 20c-0.198 0-0.386-0.119-0.464-0.314l-1.697-4.242-2.963 3.386c-0.137 0.157-0.357 0.212-0.552 0.139s-0.324-0.26-0.324-0.468v-15c0-0.198 0.117-0.377 0.298-0.457s0.392-0.046 0.539 0.087l11 10c0.153 0.139 0.205 0.358 0.13 0.55s-0.26 0.32-0.466 0.32h-4.261l1.726 4.314c0.103 0.256-0.022 0.547-0.279 0.65l-2.5 1c-0.061 0.024-0.124 0.036-0.186 0.036zM11 14c0.028 0 0.056 0.002 0.084 0.007 0.172 0.029 0.315 0.146 0.38 0.307l1.814 4.536 1.572-0.629-1.814-4.536c-0.062-0.154-0.043-0.329 0.050-0.466s0.248-0.22 0.414-0.22h3.707l-9.207-8.37v12.539l2.624-2.999c0.096-0.109 0.233-0.171 0.376-0.171z"
+     id="path4"
+     style="fill:#00a98f;fill-opacity:1" />
+</svg>

mailing_themes/static/description/index.html

+<div class="container position-relative">
+    <div class="first-parent position-absolute d-none d-lg-block"
+        style="width:100vw;height:100%;background-color: #f4f9ff;margin-left:calc((1080px - 100vw) / 2);margin-top: -15px;">
+    </div>
+
+
+    <!-- Nav START -->
+    <div class="position-relative my-5">
+        <div class="row no-gutters shadow-sm" style="border-radius: 14px;">
+
+            <nav class="navbar navbar-expand-lg navbar-light bg-light overflow-hidden w-100"
+                style="background-color:#fff !important;border-radius:14px;padding:0px;border:1px solid rgb(0 0 0 / 12%);">
+                <span class="navbar-brand" href="https://www.droggol.com" target="_blank"
+                    style="background-color:#374e65; padding:13px 20px 11px 20px">
+                    <img style="max-width:90px; margin-bottom:6px" src="images/logo.svg">
+                </span>
+                <div class="ml-auto text-right" id="navbarNav">
+                    <ul class="nav navbar-nav ml-auto text-right">
+                        <li class="nav-item" style="padding: 17px 10px;">
+                            <span class="badge badge-pill badge-primary"
+                                style="background-color:#7c7bad33; border:1px solid #7c7bbb4f; font-size:14px; color:#7c7bad; margin:3px; padding-left:23px">
+                                <i class="fa fa-check-circle position-absolute"
+                                    style="font-size:16px; margin-left:-17px; margin-top:-2px"></i>
+                                Community
+                            </span>
+                            <span class="badge badge-pill badge-primary"
+                                style="background-color:#eadae5;border: 1px solid rgb(144 90 123 / 29%);font-size:14px;color:#875a7b;margin:3px;padding-left:23px;">
+                                <i class="fa fa-check-circle position-absolute"
+                                    style="font-size:16px; margin-left:-17px; margin-top:-2px"></i>
+                                Enterprise
+                            </span>
+                        </li>
+                        <li class="nav-item d-none d-md-block position-relative">
+                            <div class="text-center position-absolute w-100" style="margin-top: 3px; ">
+                                <small style="font-weight: 600;color: #374e65;font-size: 9px;display: inline-block;">
+                                    Need a help? </small>
+                            </div>
+                            <span href="https://www.droggol.com/contactus"
+                                style="color:#0080FF;font-weight:bold;font-size:14px;display:inline-block;padding: 25px 20px 19px 20px;background-color: #e5f2ff;border-left: 1px solid #d6e6ff;"
+                                target="_blank">
+                                droggol.com/contactus </span>
+                            <div></div>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+
+        </div>
+    </div>
+    <!-- Nav END -->
+
+
+    <!-- Hero START -->
+    <div class="row pb64 pt32">
+        <div class="col-12 col-md-6 col-lg-6">
+            <h1 style="color: #374e65;">
+                <span style="color: #0080FF;"> Mass Mailing Theme </span>
+                <span style="font-weight: 300;"> with color picker. </span>
+            </h1>
+            <p style="color: #728294;font-weight: 400;font-family: 'Montserrat';" class="lead mb-4">
+                With this module you will be able to create beautiful, mobile compatible mails with your own brand
+                colors.
+            </p>
+            <div class="media">
+                <div class="d-flex mr-4">
+                    <div style="background-color: rgba(0, 169, 143, 0.1);" class="badge border-0 rounded-circle p-3">
+                        <img src="images/select.svg" style="height:2em; height: 2em;" />
+                    </div>
+                </div>
+                <div class="media-body">
+                    <h5 style="color: #3C4858;">Choose your own colors.</h5>
+                    <p style="color: #8492A6;" class="mb-4">With this module, you will be able to configure your color
+                        palette to design an email based on your branding colors. </p>
+                </div>
+            </div>
+            <div class="media">
+                <div class="d-flex mr-4">
+                    <div style="background-color: rgba(171, 71, 188, 0.1);" class="badge border-0 rounded-circle p-3">
+                        <img src="images/layers.svg" style="height:2em; height: 2em;" />
+                    </div>
+                </div>
+                <div class="media-body">
+                    <h5 style="color: #3C4858;">60+ new snippets.</h5>
+                    <p style="color: #8492A6;" class="mb-4">This theme adds <b> 60+ dynamic & static snippets</b>. All
+                        of
+                        the snippets will follow your brand colors.</p>
+                </div>
+            </div>
+            <div class="media">
+                <div class="d-flex mr-4">
+                    <div style="background-color: rgba(255, 92, 117, 0.1);" class="badge border-0 rounded-circle p-3">
+                        <img src="images/list.svg" style="height:2em; height: 2em;" />
+                    </div>
+                </div>
+                <div class="media-body">
+                    <h5 style="color: #3C4858;"> Fully mobile compatible.</h5>
+                    <p style="color: #8492A6;" class="mb-4">All of the snippets are mobile compatible so email design
+                        via
+                        this theme will looks extraordinary in mobile too. </p>
+                </div>
+            </div>
+            <div class="media">
+                <div class="d-flex mr-4">
+                    <div style="background-color: rgba(255, 173, 10, 0.1);" class="badge border-0 rounded-circle p-3">
+                        <img src="images/lock.svg" style="height:2em; height: 2em;" />
+                    </div>
+                </div>
+                <div class="media-body">
+                    <h5 style="color: #3C4858;"> Auto generate dynamic blocks.</h5>
+                    <p style="color: #8492A6;" class="mb-4">This theme provide several dynamic snippets for products,
+                        blogs
+                        and events. Just select the records and rest will be generated automatically.</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 col-md-5 col-lg-5 col-md-offset-1">
+            <div style="perspective-origin: left center; perspective: 1500px; transform-style: preserve-3d;">
+                <img src="images/cover.png" class="img-fluid shadow"
+                    style="transform: rotateY(-24deg) rotateX(12deg) !important; border-radius: .625rem; box-shadow: 25px 60px 125px -25px rgba(80,102,144,.1), 16px 40px 75px -40px rgba(0,0,0,.2);">
+            </div>
+        </div>
+    </div>
+    <!-- Hero END -->
+
+    <div class="position-relative">
+
+        <!-- Screenshots START -->
+        <div class="row shadow overflow-hidden" style="background-color: white;border-radius: 12px;overflow: hidden;">
+            <div class="col-md-12 text-center p-3" style="background-color: #0080ff; color: white;">
+                <i class="fa fa-star"></i>
+                <b> 60+ New Snippets </b>
+                <i class="fa fa-star"></i>
+                <b> Configure your brand color </b>
+                <i class="fa fa-star"></i>
+                <b> Mobile Compatible </b>
+                <i class="fa fa-star"></i>
+            </div>
+            <div class="col-md-12 text-center">
+                <img src="images/para.png" class="img img-fluid" />
+            </div>
+            <div class="col-md-12 text-center p-3 bg-200" style="background-color: #e5f2ff !important;color: #0080ff;">
+                <i class="fa fa-picture-o"></i>
+                All of screenshots given above are generated with this app.
+            </div>
+        </div>
+        <!-- Screenshots END -->
+
+        <!-- Picker START -->
+        <div class="row pb32 pt32 align-items-center bg-white my-5 shadow" style="border-radius: 14px;">
+            <div class="col-12 col-md-7 col-lg-6 p-5">
+                <h1 style="color: #3C4858;">
+                    <span style="font-weight: 300; color: black;"> Send emails with </span> <br />
+                    <span style="color: #0080FF;"> Your Brand Color </span>
+                </h1>
+                <p style="color: #273240;font-weight: 400;font-family: 'Montserrat';" class="mb-4">
+                    You will be able to configure the colors of the brand from the mass mailing configuration. <b>You
+                        just need
+                        to configure
+                        your brand colors once and that all</b>. All of the available snippets, buttons, background
+                    colors, and
+                    text colors will use
+                    your brand colors.
+                </p>
+            </div>
+            <div class="col-12 col-md-5 col-lg-6">
+                <div style="perspective-origin: left center; perspective: 1500px; transform-style: preserve-3d;">
+                    <img src="images/picker.png" class="img-fluid" />
+                </div>
+            </div>
+        </div>
+        <!-- Picker END -->
+
+        <!-- Mobile START -->
+        <div class="row pb32 pt32 align-items-center bg-white my-5 shadow" style="border-radius: 14px;">
+            <div class="col-12 col-md-5 col-lg-6">
+                <div style="perspective-origin: left center; perspective: 1500px; transform-style: preserve-3d;">
+                    <img src="images/mobile.png" class="img-fluid pt-5" />
+                </div>
+            </div>
+            <div class="col-12 col-md-7 col-lg-6 p-5">
+                <h1 style="color: #3C4858;">
+                    <span style="font-weight: 300;color: black;"> Send </span>
+                    <span style="color: #0080FF;"> Mobile Responsive </span>
+                    <span style="font-weight: 300;color: black;"> emails. </span>
+                </h1>
+                <p style="color: #273240;font-weight: 400;font-family: 'Montserrat';">
+                    All the emails generated via our theme are mobile compatible. All of our snippets are carefully
+                    crafted
+                    for mobile.
+                    That's why our emails look stunning on mobile. <b>The width of our email is adjusted automatically
+                        and
+                        multiple columns
+                        break into rows in mobile.</b> This gives pleasing user-experience to the end-user.
+                </p>
+            </div>
+        </div>
+        <!-- Mobile END -->
+
+        <!-- Options START -->
+        <div class="row pb32 pt32 align-items-center bg-white my-5 shadow" style="border-radius: 14px;">
+            <div class="col-12 col-md-7 col-lg-6  p-5">
+                <h1 style="color: #3C4858;">
+                    <span style="color: #0080FF;"> Elegantly Crafted </span>
+                    <span style="font-weight: 300;color: black;"> Options. </span>
+                </h1>
+                <p style="color: #273240;font-weight: 400;font-family: 'Montserrat';">
+                    All of the snippet options are beautifully crafted. It automatically tasks the smart decision to
+                    save
+                    your time. Example
+                    for, <b>when you change the background color of the snippet, buttons and text colors automatically
+                        updated to save your
+                        time.</b> These options are also updated when you change the theme's color configuration.
+                </p>
+            </div>
+            <div class="col-12 col-md-5 col-lg-6">
+                <div>
+                    <img src="images/options.gif" class="img-fluid shadow my-5" />
+                </div>
+            </div>
+        </div>
+        <!-- Options END -->
+
+        <!-- Fill Data START -->
+        <div class="row pb32 pt32 align-items-center bg-white my-5 shadow" style="border-radius: 14px;">
+            <div class="col-12 col-md-5 col-lg-6">
+                <div>
+                    <img src="images/dynamic_products.gif" class="img-fluid shadow my-5" />
+                </div>
+            </div>
+            <div class="col-12 col-md-7 col-lg-6 px-5">
+                <h1 style="color: #3C4858;">
+                    <span style="font-weight: 300;color: black;"> Fill data </span>
+                    <span style="color: #0080FF;"> Dynamically. </span>
+                </h1>
+                <p style="color: #273240;font-weight: 400;font-family: 'Montserrat';">
+                    This theme comes with dynamic snippets. Example for, <b>just select few products and product block
+                        will
+                        be generated automatically</b>. 
+                    <br />
+                    These dynamic snippets are available for,
+                <div class="d-flex p-0 flex-column justify-content-center">
+                    <div style="padding: 20px 12px 20px 48px;"
+                        class="w-100  position-relative d-flex align-items-center">
+                        <i class="fa fa-shopping-cart position-absolute"
+                            style="padding:11px 10px; background-color:#dee3fd; color:#5c77fb; font-size:15px; height:38px; width:38px; text-align:center; border-radius:8px; float:left; margin-left:-51px"></i>
+                        <div class="d-flex flex-column">
+                            <h5 class="mb-0" style="font-weight:700">Products</h5>
+                            <small style="color: #737373;"> Multiple styles, priceline support, publish filters for shop and more</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="d-flex p-0 flex-column justify-content-center">
+                    <div style="padding: 20px 12px 20px 48px;"
+                        class="w-100  position-relative d-flex align-items-center">
+                        <i class="fa fa-rss position-absolute"
+                            style="padding:11px 10px; background-color:#dee3fd; color:#5c77fb; font-size:15px; height:38px; width:38px; text-align:center; border-radius:8px; float:left; margin-left:-51px"></i>
+                        <div class="d-flex flex-column">
+                            <h5 class="mb-0" style="font-weight:700">Blogs</h5>
+                            <small style="color: #737373;"> Multiple styles available. Also supports cover images. </small>
+                        </div>
+                    </div>
+                </div>
+                <div class="d-flex p-0 flex-column justify-content-center">
+                    <div style="padding: 20px 12px 20px 48px;"
+                        class="w-100  position-relative d-flex align-items-center">
+                        <i class="fa fa-calendar position-absolute"
+                            style="padding:11px 10px; background-color:#dee3fd; color:#5c77fb; font-size:15px; height:38px; width:38px; text-align:center; border-radius:8px; float:left; margin-left:-51px"></i>
+                        <div class="d-flex flex-column">
+                            <h5 class="mb-0" style="font-weight:700">Events</h5>
+                            <small style="color: #737373;"> Multiple styles available, cover image support etc. </small>
+                        </div>
+                    </div>
+                </div>
+
+                </p>
+            </div>
+        </div>
+        <!-- Fill Data END -->
+
+        <!-- Border Options START -->
+        <div class="row pb32 pt32 align-items-center bg-white my-5 shadow" style="border-radius: 14px;">
+            <div class="col-12 col-md-5 col-lg-6">
+                <div>
+                    <img src="images/borders.gif" class="img-fluid shadow my-5" />
+                </div>
+            </div>
+            <div class="col-12 col-md-7 col-lg-6  p-5">
+                <h1 style="color: #3C4858;">
+                    <span style="font-weight: 300;color: black;"> Dynamic </span>
+                    <span style="color: #0080FF;"> Separator & Border </span>
+                    <span style="font-weight: 300;color: black;"> Options. </span>
+                </h1>
+                <p style="color: #273240;font-weight: 400;font-family: 'Montserrat';">
+                    All of our new snippets are having the possibility of adding borders and separators. And it comes
+                    with
+                    several
+                    configurable options like border style, border position, colors, the thickness of the border.
+                </p>
+            </div>
+        </div>
+        <!-- Border Options END -->
+
+        <!-- Snippet List START -->
+        <div class="row pb64 pt32 align-items-center justify-content-center">
+            <div class="col-12 col-md-12 col-lg-12 text-center">
+                <h1 style="color: #3C4858;">
+                    <span style="color: #0080FF;"> 60+ </span>
+                    <span style="font-weight: 300;color: #000;"> New Snippet </span>
+                </h1>
+            </div>
+            <div class="col-12 col-md-12 col-lg-12 text-center oe_styling_v8" style="background-color: transparent;">
+                <h4 class="oe_slogan text-center mb-2" style="color: #0080ff;">Headers</h4>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_header_light.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Header Light
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_header_color.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Header Color
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_header_dark.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Header Dark
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_header_center_light.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Header Center Light
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_header_center_color.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Header Center Color
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_header_center_dark.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Header Center Dark
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_header_jumbo_light.png"
+                        style="border-radius: 3px;">
+                    <small style="png-top: 4px;display: block;color: #4d4b4b;">
+                        Header Jumbo Light
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_header_jumbo_color.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Header Jumbo Color
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_header_jumbo_dark.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Header Jumbo Dark
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_preheader_light.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Pre Header Light
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_preheader_color.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Pre Header Color
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_preheader_dark.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Pre Header Dark
+                    </small>
+                </div>
+            </div>
+            <div class="col-12 col-md-12 col-lg-12 text-center oe_styling_v8" style="background-color: transparent;">
+                <h4 class="oe_slogan text-center mb-2" style="color: #0080ff;">Dynamic Snippets</h4>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_dynamic_products.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Product List
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_dynamic_products2.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Product Grid
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_dynamic_products2.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Product Grid Small
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_dynamic_blog1.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Blog List
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_dynamic_blog2.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Blog Grid
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_dynamic_event1.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Event List
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_dynamic_event2.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Event Grid
+                    </small>
+                </div>
+            </div>
+            <div class="col-12 col-md-12 col-lg-12 text-center oe_styling_v8" style="background-color: transparent;">
+                <h4 class="oe_slogan text-center mb-2" style="color: #0080ff;">Body Snippets</h4>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_title.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Title
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_tagline.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Tagline
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_hero_block.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Hero Block
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_full_img.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Full Image
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_content_btn.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Content with button
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_text_image.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Text + Image
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_large_block.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Large Content + Image
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_services.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Services
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_features.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Features
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_banner.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Banner
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_three_cards.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Three Columns Card
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_three_col.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Three Columns
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_three_col2.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Three Columns Images
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_product_grid.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Grid
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_sugg_products.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Recommended Products
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_cta.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Call to action
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_cta2.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Call to action (Thin)
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_cta3.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Call to action (Centered)
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_counter.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Icon + Counter
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_pricing.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Pricing
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_order.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Order Info
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_note.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Note
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_icon_grid.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Icon Grid
+                    </small>
+                </div>
+            </div>
+            <div class="col-12 col-md-12 col-lg-12 text-center oe_styling_v8" style="background-color: transparent;">
+                <h4 class="oe_slogan text-center mb-2" style="color: #0080ff;">Marketing Content</h4>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_event.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Event
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_img_event.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Image + Event
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_discount.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Discount
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_discount2.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Offers
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_coupon.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Festive Offers
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_coupon2.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Coupon
+                    </small>
+                </div>
+            </div>
+            <div class="col-12 col-md-12 col-lg-12 text-center oe_styling_v8" style="background-color: transparent;">
+                <h4 class="oe_slogan text-center mb-2" style="color: #0080ff;">Footers</h4>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_col.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Footer Columns Light
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_col_color.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Footer Columns Color
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_col_dark.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Footer Columns Dark
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_center_light.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Footer Centered Light
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_center_color.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Footer Centered Color
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_center_dark.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Footer Centered Dark
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_light.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Footer Logo Light
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_color.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Footer Logo Color
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_dark.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Footer Logo Dark
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_light_mini.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Mini Footer Light
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_color_mini.png"
+                        style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Mini Footer Color
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_footer_dark_mini.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Mini Footer Dark
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_social_light.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Social Light
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_social_color.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Social Color
+                    </small>
+                </div>
+            </div>
+            <div class="col-6 col-md-2 col-lg-2 text-center mt-3">
+                <div class="deep-2 deep_hover p-1" style="background-color: white;border-radius: 3px;">
+                    <img class="img img-fluid" src="images/thumbs/drg_social_dark.png" style="border-radius: 3px;">
+                    <small style="padding-top: 4px;display: block;color: #4d4b4b;">
+                        Social Dark
+                    </small>
+                </div>
+            </div>
+        </div>
+        <!-- Snippet List END -->
+
+        <!-- All Features START -->
+        <div class="row pb16 pt16">
+            <div class="col-12 col-md-12 col-lg-12 text-center mt32 mb16">
+                <h2 style="font-weight: 300;"> All Features </h2>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #0080FF;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-paint-brush"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;">Choose your brand colors</h5>
+                            <p style="color: #8492A6;" class="mb-0">Just configure your brand colors once and start
+                                sending
+                                emails with your brand color.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #AB47BC;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-cubes"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;">60+ new snippets</h5>
+                            <p style="color: #8492A6;" class="mb-0">This theme adds 60+ dynamic & static snippets. All
+                                of the
+                                snippets will follow your brand colors.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #00bcd4;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-diamond"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;"> Beautiful Design </h5>
+                            <p style="color: #8492A6;" class="mb-0"> All of the snippets have pixel perfect design. You
+                                will
+                                have several beautiful snippets for different usage. </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #17a2b8;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-mobile"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;">Fully mobile compatible</h5>
+                            <p style="color: #8492A6;" class="mb-0">All of the snippets are mobile compatible so email
+                                design
+                                via this theme will looks extraordinary in mobile too.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #00A98F;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-magic"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;">Dynamic Snippets</h5>
+                            <p style="color: #8492A6;" class="mb-0">Dynamic snippets helps you fill data automatically.
+                                Just
+                                select the products, events, or blogs and email block will be generated automatically.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #FF5C75;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-usd"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;">Pricelist Support</h5>
+                            <p style="color: #8492A6;" class="mb-0">Dynamic snippets for products supports pricelist. So
+                                you
+                                will get correct prices when you generate blocks from dynamic snippets. </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #FFAD0A;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-chain-broken"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;">Loosely coupled </h5>
+                            <p style="color: #8492A6;" class="mb-0"> This module does not have extra dependencies, even
+                                if this
+                                module auto fill for products, blogs, events. (Yes, magic happens)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #03a9f4;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-twitter"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;"> Automatic Social Links </h5>
+                            <p style="color: #8492A6;" class="mb-0"> Some of our headers and footers are having social
+                                icons.
+                                The links of those social media are automatically filled from website or company data.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #8bc34a;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-adjust"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;"> Custom Background Color </h5>
+                            <p style="color: #8492A6;" class="mb-0"> After configuring brand colors from settings, you
+                                can use
+                                those colors as a background. But if you want new colors, you can add new background
+                                colors
+                                runtime. </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #607d8b;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-cogs"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;"> Easy snippet options </h5>
+                            <p style="color: #8492A6;" class="mb-0"> All of the snippet options are beautifully crafted.
+                                It
+                                automatically tasks the smart decision to save your time. </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #6da5f1;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle">
+                                <i class="fa fa-sort-amount-asc"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;"> Custom Border Options </h5>
+                            <p style="color: #8492A6;" class="mb-0"> Custom borders and separator options help you fill
+                                the gaps
+                                between different snippets. </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-6 col-lg-4 my-2">
+                <div style="background-color: white;border-radius: 3px;" class="card deep-2 deep_hover p-3 h-100">
+                    <div class="media">
+                        <div class="d-flex mr-4">
+                            <div style="background-color: #ba55cc;height: 60px;width: 60px;line-height: 60px;text-align: center;font-size: 24px;color: white;"
+                                class=" rounded-circle ">
+                                <i class="fa fa-rocket"></i>
+                            </div>
+                        </div>
+                        <div class="media-body">
+                            <h5 style="color: #3C4858;"> Fully Customizable </h5>
+                            <p style="color: #8492A6;" class="mb-0"> Snippets are beautifully crafted. So unleash your
+                                creativity and generate new snippets with simple tweaks. </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- All Features END -->
+
+        <!-- Help START -->
+        <div class="row pb16 pt16 mb-5">
+            <div class="alert alert-warning text-center w-100"
+                style="padding: 21px 51px;background-color: #ffffff;border: 0px;box-shadow: 0px 1px 7px 0px #35353521;color: #414d5c;margin: auto;display: block;border-radius: 1px;min-width: 80%;border: 1px solid #dee2e6;border-top: 3px solid #0080ff;">
+                <div>
+                    <div style="background-color: rgba(0, 128, 255, 0.12);color: #0080ff;"
+                        class="badge border-0 rounded-circle p-3">
+                        <i class="fa  fa-question-circle fa-2x"></i>
+                    </div>
+                </div>
+                <h2 style="color: #3C4858;" class="mt-2 mb-4">Need a help for this module?</h2>
+                <h4 style="color: #3C4858;font-weight: 400;" class="mt-2 mb-4">Contact us <b
+                        style="color: #0080ff;background-color: #e0f0ff;padding: 3px 10px;border-radius: 3px;">www.droggol.com/contactus</b>
+                    for your
+                    queries</h4>
+            </div>
+        </div>
+        <!-- Help END -->
+
+    </div>
+</div>
+</div>
\ No newline at end of file

mailing_themes/static/src/js/d_color_palette_field.js

+odoo.define('droggol_mass_mailing_themes.color_palette_field', function (require) {
+'use strict';
+
+var AbstractField = require('web.AbstractField');
+var core = require('web.core');
+var fieldRegistry = require('web.field_registry');
+const {ColorpickerDialog} = require('web.Colorpicker');
+
+var QWeb = core.qweb;
+
+var FieldColorPalette = AbstractField.extend({
+    className: 'd_field_color_palette',
+    events: _.extend({}, AbstractField.prototype.events, {
+        "click .d_theme_customize_color": "_onThemeCustomizeClick",
+    }),
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @override _render from FieldChar
+     * @returns {Deferred}
+     */
+    _render: function () {
+        if (this.value) {
+            this.$el.html($(QWeb.render('droggol_assets_mail_themes.color_palette_field', {colors: JSON.parse(this.value)})));
+            this.$('.d_mail_tooltip_1').tooltip({
+                delay: 0,
+                html: true,
+                title: "\
+                        <div class='p-2'>\
+                            <b class='bg-primary p-1'> <i class='fa fa-question-circle'></i> Help </b> \
+                            <div class='mt-2'> • Choose your main brand color. </div> \
+                            <div> • By default, all snippets will use this color. </div> \
+                            <div> • You can also use it as a button, border, background or text color. </div> \
+                        </div> \
+                    "
+            });
+            this.$('.d_mail_tooltip_2').tooltip({
+                delay: 0,
+                html: true,
+                title: "\
+                        <div class='p-2'>\
+                            <b class='bg-primary p-1'> <i class='fa fa-question-circle'></i> Help </b> \
+                            <div class='mt-2'> • These are the extra colors in theme. </div> \
+                            <div> •  You can use them as a background, border or text color. </div> \
+                        </div> \
+                    "
+            });
+            this.$('.d_mail_tooltip_3').tooltip({
+                delay: 0,
+                html: true,
+                title: "\
+                        <div class='p-2'>\
+                            <b class='bg-primary p-1'> <i class='fa fa-question-circle'></i> Help </b> \
+                            <div class='mt-2'> • The <i><b>header</b></i> color is used for title and headers e.g. H1, H2, H3...  </div> \
+                            <div> •  The <i><b>content</b></i> color is used for all the text. </div> \
+                            <div> •   Note: Dark colors are recommended for both. </div> \
+                        </div> \
+                    "
+            });
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Open ColorpickerDialog
+     *
+     * @private
+     * @param {MouseEvent} event
+     */
+    _onThemeCustomizeClick: function (event) {
+        var self = this;
+        var color = $(event.currentTarget).data('color');
+        var type = $(event.currentTarget).data('type');
+        var colorpicker = new ColorpickerDialog(this, {
+            defaultColor: color,
+        });
+        colorpicker.on('colorpicker:saved', this, function (ev) {
+            var value = JSON.parse(self.value);
+            value[type] = ev.data.cssColor;
+            self._setValue(JSON.stringify(value));
+        });
+        colorpicker.open();
+    },
+});
+
+fieldRegistry.add('d_field_color_palette', FieldColorPalette);
+
+return FieldColorPalette;
+});

mailing_themes/static/src/js/dialog.js

+odoo.define('droggol_mass_mailing_themes.dialogs', function (require) {
+'use strict';
+
+var Dialog = require('web.Dialog');
+var core = require('web.core');
+var _t = core._t;
+
+/**
+ * Extend Dialog class to handle save/cancel of edition components.
+ */
+var MassMailingDialog = Dialog.extend({
+    routePath: '',
+    routeForItemDetail: false,
+    DialogTitleName: false,
+    template: 'droggol_mass_mailing_themes.dialog',
+    xmlDependencies: Dialog.prototype.xmlDependencies.concat(
+        ['/droggol_mass_mailing_themes/static/src/xml/dialog.xml']
+    ),
+    /**
+     * @constructor
+     */
+    init: function (parent, options) {
+        options = options || {};
+        options ['title'] = this.DialogTitleName || 'Droggol';
+        this.relatedApp = options.relatedApp || false;
+        this.recordsIDs = options.recordsIDs || [];
+        this.snippetTemplate = options.snippetTemplate;
+        this._super(parent, _.extend({}, {
+            size: 'medium',
+            buttons: [
+                {text: options.save_btn_text || _t("Choose"), close: true, classes: 'btn-primary', click: this._onMassMailDialogSave.bind(this)},
+                {text: _t("Discard"), close: true, click: this._onMassMailDialogDiscard.bind(this)}
+            ]
+        }, options));
+    },
+    /**
+    * @override
+    */
+    willStart: function () {
+        var relatedApp = this.relatedApp;
+        var self = this;
+        var defs = [this._super.apply(this, arguments)];
+        if (!relatedApp) {
+            return Promise.all(defs);
+        }
+        defs.push(this._rpc({
+            route: '/droggol_mass_mailing_themes/get_module_state',
+            params: {
+                module_name: relatedApp,
+            },
+        }).then(function (res) {
+            self.isModuleInstalled = res.is_installed;
+            self.extraInfo = res.extra_info;
+        }));
+        if (this.recordsIDs.length && this.routeForItemDetail) {
+            defs.push(this._rpc({
+                route: this.routeForItemDetail,
+                params: this._getRouteInitParams(),
+            }).then(function (res) {
+                self.records = res;
+            }));
+        }
+        return Promise.all(defs);
+    },
+    /**
+    * @override
+    */
+    start: function () {
+        var self = this;
+        var defs = [this._super.apply(this, arguments)];
+        if (!this.isModuleInstalled) {
+            this.$el.empty();
+            var $alert = $('<div/>', {
+                class: 'alert alert-warning',
+                text: "To use this snippet you needs to install '" + this.relatedApp + "' module.",
+            });
+            $alert.appendTo(this.$el);
+            this.$footer.find('.btn-primary').addClass('d-none');
+        } else {
+            this.$('.d-select2-input').select2({
+                width: "100%",
+                tokenSeparators: [",", " ", "_"],
+                maximumInputLength: 35,
+                minimumInputLength: 3,
+                multiple: true,
+                // Default tags value
+                initSelection: function (element, callback) {
+                    var data = _.map(self.recordsIDs, function (recordsID) {
+                        var rec = _.findWhere(self.records.items, {id: recordsID});
+                        return {'id': rec.id, 'text': rec.name};
+                    });
+                    element.val('');
+                    callback(data);
+                },
+                ajax: {
+                    url: this.routePath,
+                    dataType: 'json',
+                    data: function (term) {
+                        var data = self._getTermParam();
+                        data.term = term;
+                        return data;
+                    },
+                    results: function (data) {
+                        return self._processData(data);
+                    },
+                },
+                formatResult: function (result) {
+                    return self._getFormattedResult(result);
+                },
+            });
+            this.$('.d-select2-input').select2('container').find('ul.select2-choices').sortable({
+                containment: 'parent',
+                start: function () {
+                    self.$('.d-select2-input').select2('onSortStart');
+                },
+                update: function () {
+                    self.$('.d-select2-input').select2('onSortEnd');
+                }
+            });
+        }
+        return Promise.all(defs);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _getCurrentData: function () {
+        return {
+            routeForItemDetail: this.routeForItemDetail,
+            routeParams: this._getRouteParams(),
+            resIDs: this._getSelect2Ids(),
+            relatedApp: this.relatedApp,
+            snippetTemplate: this.snippetTemplate
+        };
+    },
+    _getSelect2Ids: function () {
+         // compact to avoid false NaN values
+        return _.compact(_.map(this.$('[name="selection"]').val().split(","), function (p) {
+            return parseInt(p);
+        }));
+    },
+    _getRouteInitParams: function () {
+        return {
+            'domain': [['id', 'in', this.recordsIDs]],
+        };
+    },
+    /**
+      * @private
+      */
+    _getRouteParams: function () {
+        return {
+            'domain': [['id', 'in', this._getSelect2Ids()]],
+        };
+    },
+    /**
+     * @private
+     */
+    _getFormattedResult: function () {
+        return '';
+    },
+    /**
+     * @private
+     */
+    _processData: function () {
+        return {};
+    },
+    /**
+     * @private
+     */
+    _getTermParam: function () {
+        return {};
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    _onMassMailDialogDiscard: function () {
+        this.trigger_up('d_mass_mailing_dialog_discard');
+    },
+    /**
+     * @private
+     */
+    _onMassMailDialogSave: function () {
+        this.trigger_up('d_mass_mailing_dialog_save', this._getCurrentData());
+    },
+});
+
+var ProductSelectorDialog = MassMailingDialog.extend({
+    template: 'droggol_mass_mailing_themes.dialog_products',
+    routePath: '/droggol_mass_mailing_themes/get_product_by_name',
+    routeForItemDetail: '/droggol_mass_mailing_themes/get_products_info',
+    DialogTitleName: _t("Select Products"),
+
+    /**
+    * @override
+    */
+    _getFormattedResult: function (result) {
+        return '<div class="media border-bottom">' +
+                    '<img style="width: 100px;height: auto;" class="img mr-3" src=/web/image/product.template/' + result.id + '/image_256/>' +
+                    '<div class="media-body border-left px-2">' +
+                        '<p class="font-weight-bold mt-1 mb-1">' + _.escape(result.text) + '</p>' +
+                        '<p class="mt-1">' + result.price + '</p>' +
+                    '</div>' +
+                '</div>';
+    },
+    /**
+    * @override
+    */
+    _processData: function (data) {
+        var ret = [];
+        _.each(data, function (x) {
+            ret.push({
+                id: x.id,
+                text: x.display_name,
+                price: x.price,
+            });
+        });
+        return {results: ret};
+    },
+    /**
+    * @override
+    */
+    _getTermParam: function () {
+        var termparams = {
+            pricelist_id: parseInt($("[name='pricelist']").val()) || false,
+        };
+        if (this.$('#only_published').length) {
+            termparams['only_published'] = this.$('#only_published').prop('checked') ? 'published' : 'all';
+        }
+        return termparams;
+    },
+    /**
+    * @override
+    */
+    _getRouteParams: function () {
+        var supObj = this._super.apply(this, arguments);
+        supObj.pricelist_id = parseInt($("[name='pricelist']").val()) || false;
+        return supObj;
+    }
+});
+
+var BlogSelectorDialog = MassMailingDialog.extend({
+    routePath: '/droggol_mass_mailing_themes/get_blog_by_name',
+    routeForItemDetail: '/droggol_mass_mailing_themes/get_blogs_info',
+    DialogTitleName: _t("Select Blogs"),
+
+    /**
+    * @override
+    */
+    _getFormattedResult: function (result) {
+        return '<div class="media border-bottom">' +
+                    '<img class="img mr-3" style="width: 70px;height: 70px;object-fit: cover;" src=' + result.blog_img + '>' +
+                    '<div class="media-body border-left px-2">' +
+                        '<p class="font-weight-bold mt-1 mb-1">' + _.escape(result.text) + '</p>' +
+                        '<p class="mt-2">By: ' + _.escape(result.author_name) + '</p>' +
+                    '</div>' +
+                '</div>';
+    },
+    /**
+    * @override
+    */
+    _processData: function (data) {
+        var ret = [];
+        _.each(data, function (x) {
+            ret.push({
+                id: x.id,
+                text: x.name,
+                author_name: x.author_name,
+                blog_img: x.blog_img,
+            });
+        });
+        return {results: ret};
+    },
+});
+
+var EventSelectorDialog = MassMailingDialog.extend({
+    routePath: '/droggol_mass_mailing_themes/get_event_by_name',
+    routeForItemDetail: '/droggol_mass_mailing_themes/get_events_info',
+    DialogTitleName: _t("Select Events"),
+
+    /**
+    * @override
+    */
+    _getFormattedResult: function (result) {
+        return '<div class="media">' +
+                    '<div class="media-body px-2">' +
+                        '<p class="font-weight-bold mt-1 mb-1">' + _.escape(result.text) + '</p>' +
+                        '<p class="mt-1 mb-1">By: ' + _.escape(result.organizer_name) + '</p>' +
+                        '<small><i class="fa fa-clock-o"/> ' + _.escape(result.date_begin) + ' to ' + _.escape(result.date_end) + '</small>' +
+                    '</div>' +
+                '</div>';
+    },
+    /**
+    * @override
+    */
+    _processData: function (data) {
+        var ret = [];
+        _.each(data, function (x) {
+            ret.push({
+                id: x.id,
+                text: x.name,
+                organizer_name: x.organizer_name,
+                date_begin: x.date_begin,
+                date_end: x.date_end,
+            });
+        });
+        return {results: ret};
+    },
+});
+
+return {
+    'MassMailingDialog': MassMailingDialog,
+    'ProductSelectorDialog': ProductSelectorDialog,
+    'BlogSelectorDialog': BlogSelectorDialog,
+    'EventSelectorDialog': EventSelectorDialog,
+};
+});

mailing_themes/static/src/js/snippet.options.js

+odoo.define('droggol_mass_mailing_themes.snippet.options', function (require) {
+'use strict';
+
+var options = require('web_editor.snippets.options');
+var core = require('web.core');
+var qweb = core.qweb;
+var MassMailingDialogs = require('droggol_mass_mailing_themes.dialogs');
+var ProductSelectorDialog = MassMailingDialogs.ProductSelectorDialog;
+var BlogSelectorDialog = MassMailingDialogs.BlogSelectorDialog;
+var EventSelectorDialog = MassMailingDialogs.EventSelectorDialog;
+
+options.registry.d_mass_mailing_theme_option_daddy = options.Class.extend({
+    xmlDependencies: ['/droggol_mass_mailing_themes/static/src/xml/snippets_template.xml'],
+
+    /**
+    * @override
+    */
+    onBuilt: function () {
+        var relatedApp = this.$target.data('relatedApp');
+        this._openDialog(relatedApp, this.$target.data('template'));
+    },
+    manageBlock: function (previewMode, value, $opt) {
+        var snippetParams = this.$target.attr('value');
+        this.snippetParams = snippetParams ? JSON.parse(snippetParams) : false;
+        if (this.snippetParams && _.has(this.snippetParams, 'relatedApp') && _.has(this.snippetParams, 'recordsIDs') && _.has(this.snippetParams, 'snippetTemplate')) {
+            this._openDialog(this.snippetParams.relatedApp, this.snippetParams.snippetTemplate, this.snippetParams.recordsIDs);
+        }
+    },
+    _openDialog: function (relatedApp, snippetTemplate, recordsIDs) {
+        var relatedDialog = _.find(this._getRelatedDialog(), function (dialog, module) {
+            return module === relatedApp;
+        });
+        var dialog = new relatedDialog(this, {relatedApp: relatedApp, recordsIDs: recordsIDs ? recordsIDs : false, snippetTemplate: snippetTemplate});
+        dialog.on('d_mass_mailing_dialog_discard', this, function () {
+            // remove if nothing to append
+            if (!this.$target.children().length) {
+                this.$target.remove();
+            }
+        });
+        dialog.on('d_mass_mailing_dialog_save', this, function (ev) {
+            if (ev.data.resIDs.length) {
+                this.$target.attr('value', JSON.stringify({snippetTemplate: ev.data.snippetTemplate, relatedApp: ev.data.relatedApp, recordsIDs: ev.data.resIDs}));
+                this._fetchAndAppend(ev.data);
+            } else {
+                this.$target.remove();
+            }
+        });
+        dialog.open();
+    },
+    /**
+    * @override
+    */
+    _getRelatedDialog: function () {
+        return {
+            'sale': ProductSelectorDialog,
+            'website_blog': BlogSelectorDialog,
+            'event': EventSelectorDialog,
+        };
+    },
+    /**
+    * @override
+    */
+    _fetchAndAppend: function (data) {
+        var self = this;
+        this._rpc({
+            route: data.routeForItemDetail,
+            params: data.routeParams,
+        }).then(function (result) {
+            var items = result.items;
+            result['items'] = _.map(data.resIDs, function (id) {
+                return _.findWhere(items, {id: id});
+            });
+            self.$target.empty().append(qweb.render('droggol_mass_mailing_themes.' + data.snippetTemplate, result));
+        });
+    },
+});
+
+});

mailing_themes/static/src/scss/d_color_palette_field.scss

+.d_field_color_palette {
+    .d_theme_customize_color {
+        background-color: white;
+        border: 1px solid gray('200');
+        &:hover {
+            background-color: gray('100');
+        }
+        .d-palette-color-preview {
+            position: relative;
+            display: inline-block;
+            width: 50px;
+            height: 27px;
+            border-radius: 3px;
+            box-shadow: 0px 0px 0px 2px inset rgba(22,22,22, 0.1);
+        }
+    }
+}

mailing_themes/static/src/scss/themes/_drgl_theme_variable.scss

+// ============================
+// Mass Mailing "Theme Prime"
+// ============================
+
+// ===== Prime Theme palette =====
+
+// /!\/!\/!\/!\ WARNING also change in python file
+
+$o-mm-prime-color-primary: #4285f4;
+$o-mm-prime-color-secondary: #f3f5f9;
+$o-mm-prime-color-info: #33b5e5;
+$o-mm-prime-color-warning: #ffbb33;
+$o-mm-prime-color-danger: #ff3547;
+$o-mm-prime-color-header: #333333;
+$o-mm-prime-color-content: #737373;

mailing_themes/static/src/scss/themes/_mixin.scss

+$d-color-map: (
+    'o-color-1': $o-mm-prime-color-primary,
+    'o-color-2': $o-mm-prime-color-secondary,
+    'o-color-3': $o-mm-prime-color-info,
+    'o-color-4': $o-mm-prime-color-warning,
+    'o-color-5': $o-mm-prime-color-danger,
+    'header': $o-mm-prime-color-header,
+    'content': $o-mm-prime-color-content,
+);
+
+
+// Text Colors
+@mixin d-text-color-mixin($color) {
+    color: $color !important;
+}
+
+// Background Colors
+@mixin d-bg-mixin($background, $color) {
+    background-color: $background !important;
+    color: $color !important;
+    .fa:not([class*="text-"]), .blockquote-text small, a:not(.btn),a.btn-link, p, h1, h2, h3, h4, h5, h6, div, small, span {
+        color: $color !important;
+    }
+    // theme-colors dropdown hover
+    &.d_dropdown_item, &[data-color] {
+        &:hover,&:focus {
+            background-color: darken($background, 10%) !important;
+        }
+    }
+}
+
+// Buttons Colors
+@mixin d-btn-outline-color($btn-color) {
+    color: $btn-color;
+    background-color: transparent;
+    background-image: none;
+    border-color: $btn-color;
+}
+@mixin d-btn-color($btn-color, $content-color) {
+    background-color: $btn-color;
+    color: $content-color;
+    border-radius: 0px;
+    border: 1px solid transparent;
+}
+
+
+// BG and Background Contrast text color mixins
+$yiq-text-light: #fff;
+$yiq-text-dark: rgba(0,0,0,0.6);
+$body-bg: #fff;
+$yiq-contrasted-threshold: 200 !default;
+
+@function luma($color) {
+    @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
+}
+
+@function o-get-most-contrast($color, $c1, $c2, $background: #FFFFFF, $threshold: false, $cross-mix: true) {
+    $background: if($background == null, #FFFFFF, $background);
+
+    $real-color: mix(rgba($color, 1.0), $background, percentage(alpha($color)));
+    $luma: luma($real-color);
+
+    $cross-color: if($cross-mix, $real-color, $background);
+
+    $real-c1: mix(rgba($c1, 1.0), $cross-color, percentage(alpha($c1)));
+    $luma-c1: luma($real-c1);
+
+    $real-c2: mix(rgba($c2, 1.0), $cross-color, percentage(alpha($c2)));
+    $luma-c2: luma($real-c2);
+
+    $-dark: if($luma-c1 <= $luma-c2, $c1, $c2);
+    $-light: if($luma-c1 > $luma-c2, $c1, $c2);
+
+    @if $threshold == false {
+        $threshold: ($luma-c1 + $luma-c2) * 0.515; // 150 / 145.63 * 0.5 would be the BS value
+    }
+
+    @return if($luma > $threshold, $-dark, $-light);
+}
+
+@function color-yiq($color, $background: $body-bg, $cross-mix: true) {
+    $threshold: if($yiq-contrasted-threshold != false, $yiq-contrasted-threshold / 255 * 100%, false);
+    @return o-get-most-contrast($color, $yiq-text-light, $yiq-text-dark, $background, $threshold, $cross-mix);
+}
+
+@mixin d-color-variant($name, $alt-name, $content-color) {
+    .text-#{$name}, .text-#{$alt-name} {
+        @include d-text-color-mixin(map-get($d-color-map, $name));
+    }
+    $bg-txt-color: color-yiq(map-get($d-color-map, $name));
+
+    .bg-#{$name}, .bg-#{$alt-name} {
+        @include d-bg-mixin(map-get($d-color-map, $name), $bg-txt-color);
+
+        .btn.btn-#{$name}, .btn.btn-#{$alt-name}{
+            @include d-btn-color($content-color, map-get($d-color-map, $name));
+        }
+    }
+
+    .btn.btn-#{$name}, .btn.btn-#{$alt-name}, .btn.btn-fill-#{$name}, .btn.btn-fill-#{$alt-name}{
+        @include d-btn-color(map-get($d-color-map, $name), $bg-txt-color);
+        // :active bcoz sometimes on focus(Click) on button is applying default BS4 css.
+        &:active {
+            @include d-btn-color(map-get($d-color-map, $name), $bg-txt-color);
+        }
+    }
+
+    .border-#{$name}, .border-#{$alt-name}{
+        border-color: map-get($d-color-map, $name) !important;
+    }
+
+    .btn.btn-outline-#{$name}, .btn.btn-outline-#{$alt-name} {
+        @include d-btn-outline-color(map-get($d-color-map, $name));
+        // :active bcoz sometimes on focus(Click) on button is applying default BS4 css.
+        &:active {
+            @include d-btn-outline-color(map-get($d-color-map, $name));
+        }
+    }
+
+}
+
+// Border mixins
+@mixin d-border-size-mixin {
+    @for $i from 1 through 5 {
+        .d-border-#{$i}px {
+            border: $i * 1px;
+            border-style: solid;
+        }
+    }
+}
+
+.d_border_option.border-0 {
+    border: none;
+}
+
+@mixin d-border-style-mixin {
+    @each $i in solid, dotted, dashed, double {
+        .d-border-#{$i} {
+            border-style: $i;
+        }
+    }
+}

mailing_themes/static/src/scss/themes/theme_prime.scss

+@include d-border-size-mixin();
+@include d-border-style-mixin();
+
+.d-border-gray {
+    border-color: rgba(0, 0, 0, 0.12);
+}
+
+.d-border-top {
+    border-left: none;
+    border-bottom: none;
+    border-right: none;
+}
+.d-border-left {
+    border-bottom: none;
+    border-right: none;
+    border-top: none;
+}
+.d-border-right {
+    border-left: none;
+    border-bottom: none;
+    border-top: none;
+}
+.d-border-bottom {
+    border-left: none;
+    border-right: none;
+    border-top: none;
+}
+.d-border-top-bottom {
+    border-left: none;
+    border-right: none;
+}
+
+.d-border-top-bottom {
+    border-left: none;
+    border-right: none;
+}
+
+.o_layout {
+    font-size: 14px;
+    table {
+        font-size: 14px;
+    }
+}
+
+.o_layout.o_prime_theme {
+    // User agent stylesheet spacing issues (occurred in v12 to v13 migration)
+    table {
+        line-height: 1.5;
+    }
+    // HECK TO display colors (bg-*)
+    .o_mail_snippet_general {
+        background-color: transparent;
+    }
+    // HECK TO display correct font-size
+    a, .btn.btn-link {
+        color: $o-mm-prime-color-primary;
+        font-weight: bold;
+        text-decoration: none !important;
+        span.fa {
+            color: $o-mm-prime-color-primary;
+        }
+    }
+
+    &, small, div, p, span {
+        color: $o-mm-prime-color-content;
+    }
+
+    // ALTERNATIVE IF ANY ISSUE FOUND
+    // :not([class*="bg-"]) {
+    //     &, small, div, p, span {
+    //         color: $o-mm-prime-color-content;
+    //     }
+    // }
+
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        color: $o-mm-prime-color-header;
+    }
+
+    // Hack for bg-900. We use bg-900 for dark header and footer.
+    // bg-900 color override by default font color so we change it to white.
+    .bg-900 {
+        .fa:not([class*="text-"]), .blockquote-text small, a:not(.btn), a.btn-link, p, h1, h2, h3, h4, h5, h6, div:not([class*="text-"]), small:not([class*="text-"]), span:not([class*="text-"]) {
+            color: #fff !important;
+        }
+    }
+
+    .border-primary {
+        border-color: $o-mm-prime-color-primary !important;
+    }
+    .badge-primary {
+        background: $o-mm-prime-color-primary !important;
+        background-color: $o-mm-prime-color-primary !important;
+        color: #fff;
+        padding: 5px 10px;
+    }
+}
+
+
+// Check can be merged
+.o_prime_theme {
+    @include d-color-variant('o-color-1', 'primary', #fff);
+    @include d-color-variant('o-color-2', 'secondary', #fff);
+    @include d-color-variant('o-color-3', 'info', #fff);
+    @include d-color-variant('o-color-4', 'warning', #fff);
+    @include d-color-variant('o-color-5', 'danger', #fff);
+}
+
+
+// Extras
+
+.d_mail_h_padding_mini {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+.d_mail_v_padding_mini {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+.d_mail_h_padding_md {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+.d_mail_v_padding_md {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+.d_mail_h_padding_sm {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.d_mail_v_padding_sm {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.d_border_right_dashed {
+    border-right: 1px dashed white;
+}
+.d_font_small {
+    font-size: 10px;
+}
+:root {
+    font-size: 16px !important;
+}

mailing_themes/static/src/xml/d_color_palette_field.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="droggol_assets_mail_themes.color_palette_field">
+        <h5>
+            Brand colors
+            <button type="button" class="btn btn-link p-0 d_mail_tooltip_1" data-toggle="tooltip" data-placement="top">
+                <i class="fa fa-question-circle"></i>
+            </button>
+        </h5>
+        <t t-set="color_list" t-value="['primary', 'secondary']"/>
+        <t t-call="drgl_mail_theme.color_palette_pills"/>
+        <t t-set="color_list" t-value="['info', 'warning', 'danger']"/>
+        <h5 class="mt-3">
+            Alternative colors
+            <button type="button" class="btn btn-link p-0 d_mail_tooltip_2" data-toggle="tooltip" data-placement="top">
+                <i class="fa fa-question-circle"></i>
+            </button>
+        </h5>
+        <t t-call="drgl_mail_theme.color_palette_pills"/>
+
+        <h5 class="mt-3">
+            Text color
+            <button type="button" class="btn btn-link p-0 d_mail_tooltip_3" data-toggle="tooltip" data-placement="top">
+                <i class="fa fa-question-circle"></i>
+            </button>
+        </h5>
+        <t t-set="color_list" t-value="['header', 'content']"/>
+        <t t-call="drgl_mail_theme.color_palette_pills"/>
+
+        <div class="mt-4">
+            <small class="text-muted">
+                Have a question for mass mailling theme?
+                <div>
+                    <a target="_blank" href="https://www.droggol.com/contactus"> <b>Get free support </b> <i class="fa fa-arrow-right" ></i> </a>
+                </div>
+            </small>
+        </div>
+    </t>
+    <t t-name="drgl_mail_theme.color_palette_pills">
+        <t t-foreach="color_list" t-as="color">
+            <button t-att-data-color="colors[color]" t-att-data-type="color" title="Click to edit" class="btn btn-dafault btn-sm d-flex align-items-center w-100 mt-2 justify-content-between d_theme_customize_color">
+                <span class="text-capitalize text-600 d-palette-color-name" t-esc="color"/>
+                <span class="d-palette-color-preview" t-att-style="'background-color: ' + colors[color] + ';'">
+                </span>
+            </button>
+        </t>
+    </t>
+
+
+</templates>

mailing_themes/static/src/xml/dialog.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <div t-name="droggol_mass_mailing_themes.dialog">
+        <div class="container">
+            <div class="form-group row">
+                <label t-esc="widget.title" class="col-form-label font-weight-bold col-md-3"/>
+                <div class="col-sm-9">
+                    <input type="hidden" class="d-select2-input" name="selection" t-att-value="widget.recordsIDs"/>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div t-name="droggol_mass_mailing_themes.dialog_products">
+        <div class="container">
+            <div class="form-group row">
+                <label t-esc="widget.title" class="col-form-label font-weight-bold col-md-3"/>
+                <div class="col-sm-9">
+                    <input type="hidden" class="d-select2-input" t-att-value="widget.recordsIDs" name="selection"/>
+                </div>
+            </div>
+        </div>
+        <div class="container" t-if="widget.extraInfo.has_pricelist">
+            <div class="form-group row">
+                <label class="col-form-label font-weight-bold col-md-3"> Pricelist </label>
+                <div class="col-sm-9">
+                    <select class="form-control" name="pricelist">
+                        <!-- We are using index in for loop as QWeb having some issues -->
+                        <t t-set="pricelists" t-value="widget.extraInfo.pricelists"/>
+                        <t t-foreach="pricelists" t-as="pricelist">
+                            <option t-att-value="pricelists[pricelist_index].id"> <t t-esc="pricelists[pricelist_index].name"/> </option>
+                        </t>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div class="container" t-if="widget.extraInfo.is_website_sale_installed">
+            <div class="form-row align-items-center">
+                <div class="col-auto my-1 offset-md-3">
+                    <div class="custom-control custom-checkbox mr-sm-2">
+                        <input type="checkbox" name="is_website_sale_installed" class="form-check-input" id="only_published" checked="1"/>
+                        <label class="form-check-label font-weight-bold" for="only_published">Show only published products</label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</templates>

mailing_themes/static/src/xml/snippets_template.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="droggol_mass_mailing_themes.rating_stars_static">
+        <t t-set="val_integer" t-value="Math.floor(val)"/>
+        <t t-set="val_decimal" t-value="val - val_integer"/>
+        <t t-set="empty_star" t-value="5 - (val_integer+Math.ceil(val_decimal))"/>
+        <div class="o_website_rating_static">
+            <t t-foreach="_.range(0, val_integer)" t-as="num">
+                <i class="fa fa-star" role="img" aria-label="One star" title="One star"></i>
+            </t>
+            <t t-if="val_decimal">
+                <i class="fa fa-star-half-o" role="img" aria-label="Half a star" title="Half a star"></i>
+            </t>
+            <t t-foreach="_.range(0, empty_star)" t-as="num" role="img" t-attf-aria-label="#{empty_star} on 5" t-attf-title="#{empty_star} on 5">
+                <i class="fa fa-star-o"></i>
+            </t>
+            <t t-if="total">
+                (<t t-esc="total"/>)
+            </t>
+        </div>
+    </t>
+
+    <t t-name="droggol_mass_mailing_themes.s_d_horizontal_product_block">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table">
+                <tbody>
+                    <t t-foreach="items" t-as="product">
+                        <tr>
+                            <td style="vertical-align:middle;width:210px;" class="o_mail_col_mv border-bottom text-center o_mail_col_container">
+                                <img t-attf-src="/web/image/product.template/#{product.id}/image_512" style="width:210px;max-width:210px;height:auto;" class="d-block mx-auto" />
+                            </td>
+                            <td style="vertical-align:middle;width:330px;" class="o_mail_col_mv border-bottom border-left o_mail_col_container o_mail_h_padding o_mail_v_padding">
+                                <h4 t-esc="product.name"/>
+                                <span class="text-primary mt-2 font-weight-bold" t-raw="product.price" style="display:block;"/>
+                                <small class="mt-2" style="display:block;" t-if="product.rating">
+                                    <t t-call="droggol_mass_mailing_themes.rating_stars_static">
+                                        <t t-set="val" t-value="product.rating.avg || 0"/>
+                                        <t t-set="total" t-value="product.rating.total || 0"/>
+                                    </t>
+                                </small>
+                                <small class="mt-2" t-esc="product.description_sale" style="display:block;"/>
+                                <div class="mt-4" t-if="product.website_url">
+                                    <a class="btn btn-primary" t-att-href="product.website_url"><i class="fa fa-shopping-cart"/> Buy Now</a>
+                                </div>
+                            </td>
+                        </tr>
+                    </t>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
+    <t t-name="droggol_mass_mailing_themes.s_d_product_item">
+        <td style="width:270px;vertical-align:middle;" class="o_mail_col_mv border o_mail_col_container">
+            <div>
+                <div class="p-2" style="height: 250px;text-align: center;">
+                    <span style="display: inline-block;height: 100%;vertical-align: middle;"/>
+                    <img t-attf-src="/web/image/product.template/#{product.id}/image_512/250x250" style="display: inline-block !important;width: auto;height: auto;max-width: 99%;max-height: 230px;" class="mx-auto" />
+                </div>
+                <div class="p-2" style="background-color:#f5f5f5;">
+                    <table class="d_inner_table" style="width:100%;" align="center">
+                        <tr>
+                            <td style="width:220px;vertical-align:middle;">
+                                <a t-att-href="product.website_url" class="font-weight-bold text-black"><t t-esc="product.name"/></a>
+                            </td>
+                            <td style="width:120px;vertical-align:middle;text-align:right;">
+                                <div class="py-2" t-if="product.rating">
+                                    <t t-call="droggol_mass_mailing_themes.rating_stars_static">
+                                        <t t-set="val" t-value="product.rating.avg || 0"/>
+                                    </t>
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+                    <table class="d_inner_table" style="width:100%;" align="center">
+                        <tr>
+                            <td style="width:170px;vertical-align:middle;">
+                                <div class="font-weight-bold mt-1" t-raw="product.price"/>
+                            </td>
+                            <td style="width:170px;vertical-align:middle;text-align:right;">
+                                <a t-if="product.website_url"  t-att-href="product.website_url" class="btn btn-sm btn-primary"><i class="fa fa-bolt"/> Buy now</a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </td>
+    </t>
+
+    <t t-name="droggol_mass_mailing_themes.s_d_product_horizontal_item">
+        <td style="vertical-align:middle;width:110px;" class="o_mail_col_mv border-bottom border-left text-center o_mail_col_container">
+            <img t-attf-src="/web/image/product.template/#{product.id}/image_512" style="width:110px;max-width:110px;height:auto;" class="d-block mx-auto" />
+        </td>
+        <td style="vertical-align:middle;width:330px;" class="o_mail_col_mv border-bottom border-left o_mail_col_container p-2">
+            <a t-att-href="product.website_url" class="font-weight-bold text-black"><t t-esc="product.name"/></a>
+            <small class="mt-2" style="display:block;" t-if="product.rating">
+                <t t-call="droggol_mass_mailing_themes.rating_stars_static">
+                    <t t-set="val" t-value="product.rating.avg || 0"/>
+                    <t t-set="total" t-value="product.rating.total || 0"/>
+                </t>
+            </small>
+            <span class="text-primary mt-2 font-weight-bold" t-raw="product.price" style="display:block;"/>
+            <div class="mt-2" t-if="product.website_url">
+                <a class="btn btn-primary btn-sm" t-att-href="product.website_url"><i class="fa fa-shopping-cart"/> Buy Now</a>
+            </div>
+        </td>
+    </t>
+
+    <t t-name="droggol_mass_mailing_themes.s_d_product_grid">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table">
+                <tbody>
+                    <t t-foreach="items" t-as="product">
+                        <t t-if="product_index % 2 === 0">
+                            <tr>
+                                <t t-call="droggol_mass_mailing_themes.s_d_product_item"/>
+                                <t t-if="items.length &gt; product_index+1">
+                                    <t t-call="droggol_mass_mailing_themes.s_d_product_item">
+                                        <t t-set="product" t-value="items[product_index+1]"/>
+                                    </t>
+                                </t>
+                            </tr>
+                        </t>
+                    </t>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
+    <t t-name="droggol_mass_mailing_themes.s_d_horizontal_product_grid">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table">
+                <tbody>
+                    <t t-foreach="items" t-as="product">
+                        <t t-if="product_index % 2 === 0">
+                            <tr>
+                                <t t-call="droggol_mass_mailing_themes.s_d_product_horizontal_item"/>
+                                <t t-if="items.length &gt; product_index+1">
+                                    <t t-call="droggol_mass_mailing_themes.s_d_product_horizontal_item">
+                                        <t t-set="product" t-value="items[product_index+1]"/>
+                                    </t>
+                                </t>
+                            </tr>
+                        </t>
+                    </t>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
+
+    <!-- Blogs -->
+    <t t-name="droggol_mass_mailing_themes.s_d_horizontal_blog_block">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table">
+                <tbody>
+                    <t t-foreach="items" t-as="blog">
+                        <tr>
+                            <td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container p-3">
+                                <div>
+                                    <img t-att-src="blog.blog_img" class="d-block mx-auto" style="max-height:280px;object-fit:cover;width:100%;"/>
+                                </div>
+                                <div>
+                                    <div class="py-2 border-bottom">
+                                        <img t-att-src="blog.author_img" style="max-height:25px;height:25px;object-fit:cover;width:auto;"/>
+                                        <small><b t-esc="blog.author_name"/></small>
+                                        <span class="mt-1" style="float:right;">
+                                            <small t-esc="blog.post_date"></small> |
+                                            <small><i class="fa fa-eye"/> <t t-esc="blog.visits"/> </small>
+                                        </span>
+                                    </div>
+                                    <h5 class="text-black mt-2 font-weight-bold" t-esc="blog.name"></h5>
+                                    <p t-esc="blog.teaser"></p>
+                                    <a class="" t-att-href="blog.website_url"> Read More ...</a>
+                                </div>
+                            </td>
+                        </tr>
+                    </t>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
+    <t t-name="droggol_mass_mailing_themes.s_d_blog_grid_item">
+        <td style="vertical-align:top;width:270px;" class="o_mail_h_padding o_mail_v_padding o_mail_col_mv">
+            <table cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td>
+                            <div>
+                                <img t-att-src="blog.blog_img" style="max-height:160px;height:160px;object-fit:cover;width:100%;" class="d-block mx-auto" alt="Your Picture"/>
+                            </div>
+                            <div class="border p-3">
+                                <h5 class="text-black my-2 font-weight-bold" t-esc="blog.name"></h5>
+                                <div class="py-2 border-bottom">
+                                    <table class="d_inner_table" style="width:100%;" align="center">
+                                        <tbody>
+                                            <tr>
+                                                <td rowspan="2" style="vertical-align: middle;">
+                                                    <img class="rounded-circle" t-att-src="blog.author_img" style="max-height:25px;height:25px;object-fit:cover;width:auto;"/>
+                                                </td>
+                                                <td>
+                                                    <span t-esc="blog.author_name"></span>
+                                                </td>
+                                                <td style="padding-right:10px;text-align:right;">
+                                                    <small t-esc="blog.post_date"></small> |
+                                                    <small><i class="fa fa-eye"/> <t t-esc="blog.visits"/> </small>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <p class="mt-2" t-esc="blog.teaser"></p>
+                                <a class="btn btn-link p-0" t-att-href="blog.website_url"> Read More ...</a>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </td>
+    </t>
+
+    <t t-name="droggol_mass_mailing_themes.s_d_blog_grid">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table">
+                <tbody>
+                    <t t-foreach="items" t-as="blog">
+                        <t t-if="blog_index % 2 === 0">
+                            <tr>
+                                <t t-call="droggol_mass_mailing_themes.s_d_blog_grid_item"/>
+                                <t t-if="items.length &gt; blog_index+1">
+                                    <t t-call="droggol_mass_mailing_themes.s_d_blog_grid_item">
+                                        <t t-set="blog" t-value="items[blog_index+1]"/>
+                                    </t>
+                                </t>
+                            </tr>
+                        </t>
+                    </t>
+                </tbody>
+            </table>
+        </div>
+    </t>
+    <!-- Events -->
+    <t t-name="droggol_mass_mailing_themes.s_d_event_item">
+        <td style="vertical-align:top;width:270px;" class="o_mail_h_padding o_mail_v_padding o_mail_col_mv">
+            <table cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td>
+                            <div class="border">
+                                <div t-id="event.cover_image">
+                                    <img t-att-src="event.cover_img" class="d-block mx-auto" style="max-height:280px;object-fit:cover;width:100%;"/>
+                                </div>
+                                <div class="p-3">
+                                    <small style="display:block;"><span class="badge badge-pill badge-primary" t-esc="event.event_type"/> | <span><t t-esc="event.start_day"/>, <t t-esc="event.start_month"/> <t t-esc="event.start_year"/></span></small>
+                                    <div class="pb-2">
+                                        <h5 class="text-black my-2 font-weight-bold" t-esc="event.name"></h5>
+                                        <small class="text-left mt-2" style="display:block;">Organized by: <t t-esc="event.organizer_name"/></small>
+                                        <small class="text-left mt-2" style="display:block;"><i class="text-primary fa fa-clock-o"/> <t t-esc="event.date_begin"/> - <t t-esc="event.date_end"/></small>
+                                        <small class="text-left mt-2" style="display:block;"><i class="text-primary fa fa-map-marker"/> <t t-esc="event.street"/>, <t t-esc="event.address"/></small>
+                                    </div>
+                                    <a class="btn btn-primary" t-if="event.website_url" t-att-href="event.website_url">Register</a>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </td>
+    </t>
+
+    <t t-name="droggol_mass_mailing_themes.s_d_events_grid">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table">
+                <tbody>
+                    <t t-foreach="items" t-as="event">
+                        <t t-if="event_index % 2 === 0">
+                            <tr>
+                                <t t-call="droggol_mass_mailing_themes.s_d_event_item"/>
+                                <t t-if="items.length &gt; event_index+1">
+                                    <t t-call="droggol_mass_mailing_themes.s_d_event_item">
+                                        <t t-set="event" t-value="items[event_index+1]"/>
+                                    </t>
+                                </t>
+                            </tr>
+                        </t>
+                    </t>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
+    <t t-name="droggol_mass_mailing_themes.s_d_event_block">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table">
+                <tbody>
+                    <t t-foreach="items" t-as="event">
+                        <tr>
+                            <td style="vertical-align:top;width:90px;" class="o_mail_col_mv text-center o_mail_col_container o_mail_h_padding o_mail_v_padding">
+                                <h1 t-esc="event.start_day" class="font-weight-bold text-primary"/>
+                                <small t-esc="event.start_month" style="display:block;"></small>
+                                <small t-esc="event.start_year" style="display:block;"></small>
+                            </td>
+                            <td style="vertical-align:top;width:330px;" class="o_mail_col_mv border-left o_mail_col_container o_mail_h_padding o_mail_v_padding">
+                                <h4 t-esc="event.name"></h4>
+                                <small class="text-left mt-2" style="display:block;">Organized by: <t t-esc="event.organizer_name"/></small>
+                                <small class="text-left mt-2" style="display:block;"><i class="text-primary fa fa-clock-o"/> <t t-esc="event.date_begin"/> - <t t-esc="event.date_end"/></small>
+                                <small class="text-left mt-2" style="display:block;"><i class="text-primary fa fa-map-marker"/> <t t-esc="event.street"/>, <t t-esc="event.address"/></small>
+                            </td>
+                            <td style="vertical-align:middle;width:120px;" class="o_mail_col_mv text-center o_mail_col_container o_mail_h_padding o_mail_v_padding">
+                                <div class="m-2" t-if="event.website_url">
+                                    <a class="btn btn-primary" t-att-href="event.website_url">Register</a>
+                                </div>
+                            </td>
+                        </tr>
+                    </t>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
+</templates>

mailing_themes/views/assets.xml

+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="droggol_assets_mail_themes" inherit_id="mass_mailing.assets_mail_themes">
+        <xpath expr="//link[last()]" position="after">
+            <link rel="stylesheet" type="text/scss" href="/droggol_mass_mailing_themes/static/src/scss/themes/_drgl_theme_variable.scss"/>
+            <link rel="stylesheet" type="text/scss" href="/droggol_mass_mailing_themes/static/src/scss/themes/_mixin.scss"/>
+            <link rel="stylesheet" type="text/scss" href="/droggol_mass_mailing_themes/static/src/scss/themes/theme_prime.scss"/>
+        </xpath>
+    </template>
+
+    <template id="assets_backend" name="Droggol" inherit_id="web.assets_backend">
+        <xpath expr="." position="inside">
+            <script type="text/javascript" src="/droggol_mass_mailing_themes/static/src/js/d_color_palette_field.js"/>
+            <link rel="stylesheet" type="text/scss" href="/droggol_mass_mailing_themes/static/src/scss/d_color_palette_field.scss"/>
+        </xpath>
+    </template>
+
+    <!-- Editor custom -->
+    <template id="assets_editor" inherit_id="web_editor.assets_wysiwyg" name="Editor Assets">
+        <xpath expr="." position="inside">
+            <script type="text/javascript" src="/droggol_mass_mailing_themes/static/src/js/dialog.js"/>
+            <script type="text/javascript" src="/droggol_mass_mailing_themes/static/src/js/snippet.options.js"/>
+        </xpath>
+    </template>
+
+    <template id="mass_mailing_mail_style" inherit_id="mass_mailing.mass_mailing_mail_style">
+        <xpath expr="." position="inside">
+            <style>
+                @media screen and (max-width: 768px) {
+                    .o_mail_col_mv {
+                        text-align: center !important;
+                    }
+                }
+            </style>
+        </xpath>
+    </template>
+</odoo>

mailing_themes/views/mass_mailing_themes_templates.xml

+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Add themes in editor -->
+    <template id="email_designer_snippets" inherit_id="mass_mailing.email_designer_snippets">
+        <xpath expr="//div[@id='email_designer_themes']" position="inside">
+            <div data-name="prime"
+                data-img="/droggol_mass_mailing_themes/static/src/img/prime_thumbs/prime"
+                data-images-info='{"logo": {"format": "png"}, "all": {"module": "droggol_mass_mailing_themes"}}'>
+                <t t-call="droggol_mass_mailing_themes.theme_prime_template"/>
+            </div>
+        </xpath>
+    </template>
+
+    <!-- Theme Prime -->
+    <template id="theme_prime_template">
+        <t t-call="droggol_mass_mailing_themes.d_mail_header_color"/>
+        <t t-call="droggol_mass_mailing_themes.d_mail_banner"/>
+        <t t-call="droggol_mass_mailing_themes.d_mail_counters"/>
+        <t t-call="droggol_mass_mailing_themes.d_grid_footer_color"/>
+    </template>
+
+    <!-- <template id="drgl_color_option" inherit_id="mass_mailing.snippet_options" name="Theme Prime BG Colors">
+        <xpath expr="//div[@data-js='colorpicker']" position="attributes">
+            <attribute name="data-selector">.note-editable > div:not(.o_layout), .note-editable .oe_structure > div, td, th, .d_bg_color</attribute>
+        </xpath>
+    </template> -->
+
+    <template id="drgl_border_options" inherit_id="mass_mailing.snippet_options" name="Theme Border Options">
+        <xpath expr="." position="inside">
+            <div data-selector=".d_border_option">
+                <we-select string="Border Color">
+                    <we-button class="d_dropdown_item" data-select-class="border-primary">Primary</we-button>
+                    <we-button data-select-class="border-secondary">Secondary</we-button>
+                    <we-button data-select-class="border-info">Info</we-button>
+                    <we-button data-select-class="border-warning">Warning</we-button>
+                    <we-button data-select-class="border-danger">Danger</we-button>
+                    <we-button data-select-class="d-border-gray">Gray</we-button>
+                </we-select>
+                <we-select string="Border Thickness">
+                    <we-button data-select-class="d-border-1px">1px</we-button>
+                    <we-button data-select-class="d-border-2px">2px</we-button>
+                    <we-button data-select-class="d-border-3px">3px</we-button>
+                    <we-button data-select-class="d-border-4px">4px</we-button>
+                    <we-button data-select-class="d-border-5px">5px</we-button>
+                </we-select>
+                <we-select string="Border Position">
+                    <we-button data-select-class="border-0">None</we-button>
+                    <we-button data-select-class="">Full</we-button>
+                    <we-button data-select-class="d-border-top">Top</we-button>
+                    <we-button data-select-class="d-border-bottom">Bottom</we-button>
+                    <we-button data-select-class="d-border-left">Left</we-button>
+                    <we-button data-select-class="d-border-right">Right</we-button>
+                    <we-button data-select-class="d-border-top-bottom">Top-Bottom</we-button>
+                </we-select>
+                <we-select string="Border Style">
+                    <we-button data-select-class="d-border-solid">Solid</we-button>
+                    <we-button data-select-class="d-border-dashed">Dashed</we-button>
+                    <we-button data-select-class="d-border-double">Double</we-button>
+                    <we-button data-select-class="d-border-dotted">Dotted</we-button>
+                </we-select>
+            </div>
+        </xpath>
+    </template>
+
+</odoo>

mailing_themes/views/res_config_settings_views.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+
+    <record id="res_config_settings_view_form" model="ir.ui.view">
+        <field name="name">res.config.settings.view.form.inherit.mass_mailing.color</field>
+        <field name="model">res.config.settings</field>
+        <field name="priority" eval="2"/>
+        <field name="inherit_id" ref="mass_mailing.res_config_settings_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@data-key='mass_mailing']" position="inside">
+                <h2>Customize Mass Mailing Theme</h2>
+                <div class="row mt16 o_settings_container" name="drgl_control">
+                    <div class="col-12 col-lg-6 o_setting_box">
+                        <div class="o_setting_left_pane"/>
+                        <div class="o_setting_right_pane">
+                            <field name="d_mass_mailing_theme_colors" widget="d_field_color_palette"/>
+                            <div>
+                                <button class="btn btn-danger btn-sm" string=" Reset Configuration" type="object"
+                                    name="dr_mm_clean_internal" icon="fa-exclamation-triangle"
+                                    groups="base.group_no_one"
+                                    confirm="Are you sure? This will reset everything related to mass mailing theme."/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+
+</odoo>

mailing_themes/views/s_generic_blocks.xml

+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+    <!-- Social Media -->
+    <template id="d_social_links_template">
+        <div class="d_social_container">
+            <t t-set="d_social_links" t-value="website or company_id"/>
+            <t t-set="_classes" t-value="_classes"/>
+            <t t-if="d_social_links.social_facebook">
+                <a class="p-2" t-att-href="d_social_links.social_facebook" aria-label="Facebook" title="Facebook">
+                    <span t-attf-class="fa fa-facebook #{_classes}"></span>
+                </a>
+            </t>
+            <t t-if="d_social_links.social_linkedin">
+                <a class="p-2" t-att-href="d_social_links.social_linkedin" style="margin-left:5px" aria-label="LinkedIn" title="LinkedIn">
+                    <span t-attf-class="fa fa-linkedin #{_classes}"></span>
+                </a>
+            </t>
+            <t t-if="d_social_links.social_twitter">
+                <a class="p-2" t-att-href="d_social_links.social_twitter" style="margin-left:5px" aria-label="Twitter" title="Twitter">
+                    <span t-attf-class="fa fa-twitter #{_classes}"></span>
+                </a>
+            </t>
+            <t t-if="d_social_links.social_instagram">
+                <a class="p-2" t-att-href="d_social_links.social_instagram" style="margin-left:5px" aria-label="Instagram" title="Instagram">
+                    <span t-attf-class="fa fa-instagram #{_classes}"></span>
+                </a>
+            </t>
+        </div>
+    </template>
+
+    <template id="d_mail_general_header">
+        <div t-attf-class="#{_parent_classes} d_bg_color">
+            <div class="o_mail_snippet_general">
+                <table align="center" cellspacing="0" cellpadding="0" border="0" t-attf-class="o_mail_table_styles #{_border_class}">
+                    <tr>
+                        <td style="vertical-align:middle;width:360px;" class="o_mail_col_mv o_mail_v_padding o_mail_h_padding">
+                            &amp;nbsp;
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
+                                <img border="0" t-att-src="_logo_url" style="height:auto;width:120px;" alt="Your Logo" />
+                            </a>
+                            &amp;nbsp;
+                        </td>
+                        <td style="vertical-align:middle;width:180px;" t-attf-class="text-center o_mail_col_mv o_mail_v_padding o_mail_h_padding #{_text_color}">
+                            <t t-call="droggol_mass_mailing_themes.d_social_links_template">
+                                <t t-set="_classes" t-value="''"/>
+                            </t>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </template>
+
+    <template id="d_mail_center_header">
+        <div t-attf-class="#{_parent_classes} d_bg_color">
+            <div class="o_mail_snippet_general">
+                <table align="center" cellspacing="0" cellpadding="0" border="0" class="d_light_header o_mail_table_styles">
+                    <tr>
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_container text-center o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <span>
+                                <span t-attf-class="#{_text_color} font-weight-bold">CALL US: </span> 1111-111-111</span>
+                        </td>
+                        <td style="vertical-align:top;width:180px;padding:15px;" class="text-center o_mail_col_container o_mail_col_mv">
+                            &amp;nbsp;
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
+                                <img border="0" t-att-src="_logo_url" style="height:auto;width:120px;" alt="Your Logo" />
+                            </a>
+                            &amp;nbsp;
+                        </td>
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_container o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <table class="d_inner_table" align="center">
+                                <tr>
+                                    <td rowspan="2" class="text-right">
+                                        <a href="/" t-attf-class="#{_text_color} font-weight-bold">ABOUT US</a>
+                                    </td>
+                                    <td style="padding-left:8px;">
+                                        <a href="/" t-attf-class="#{_text_color} font-weight-bold">PRODUCT</a>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </template>
+
+    <template id="d_mail_jumbo_header">
+        <div t-attf-class="#{_parent_classes} d_bg_color">
+            <div class="o_mail_snippet_general">
+                <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                    <tr>
+                        <td colspan="2" t-attf-class="#{_pre_bg_color} o_mail_col_container d_mail_h_padding_mini d_mail_v_padding_mini">
+                            <table class="d_inner_table" align="right">
+                                <tr>
+                                    <td rowspan="2" class="text-right">
+                                        <a href="/" t-attf-class="#{_pre_text_color} font-weight-bold">MEN</a>
+                                    </td>
+                                    <td style="padding-left:20px;" class="text-right">
+                                        <a href="/" t-attf-class="#{_pre_text_color} font-weight-bold">WOMEN</a>
+                                    </td>
+                                    <td style="padding-left:20px;">
+                                        <a href="/" t-attf-class="#{_pre_text_color} font-weight-bold">KIDS</a>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="width:180px;vertical-align:middle;" t-attf-class="#{_bg_color} o_mail_col_mv text-center o_mail_v_padding o_mail_h_padding">
+                            &amp;nbsp;
+                            <a t-att-href="(company_id.website) or '#'" style="text-decoration:none;float:none;">
+                                <img border="0" t-att-src="_logo_url" style="height:auto;width:120px;" alt="Your Logo" />
+                            </a>
+                            &amp;nbsp;
+                        </td>
+                        <td style="width:360px;vertical-align:middle;padding:12px;" t-attf-class="#{_bg_color} o_mail_col_mv text-right o_mail_img_container">
+                            <h4 t-attf-class="#{_text_color2} font-weight-bold" style="margin:0px;">HELLO SMILES!</h4>
+                            <h4 t-attf-class="#{_text_color2} font-weight-bold" style="margin:0px;">YOU'RE A <span t-attf-class="#{_text_color} text-primary">STAR</span>!
+                            </h4>
+                            <small>Shop and earn rewards</small>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </template>
+
+    <template id="d_mail_pre_header">
+        <div t-attf-class="#{_parent_classes} d_bg_color">
+            <div class="o_mail_snippet_general">
+                <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                    <tbody>
+                        <tr>
+                            <td style="width:180px;" class="o_mail_col_container o_mail_col_mv o_mail_h_padding pt4 pb4">
+                                <span class="o_default_snippet_text">
+                                    <span t-attf-class="#{_text_color} font-weight-bold o_default_snippet_text">CALL US: </span>
+                                    1111-111-111
+                                </span>
+                            </td>
+                            <td style="width:180px;" class="o_mail_col_container o_mail_col_mv o_mail_h_padding text-right pt4">
+                                <table class="d_inner_table" align="right">
+                                    <tbody>
+                                        <tr>
+                                            <td rowspan="2" class="text-right">
+                                                <a t-attf-class="#{_text_color} font-weight-bold o_default_snippet_text">ABOUT US</a>
+                                            </td>
+                                            <td style="padding-left:8px;">
+                                                <a t-attf-class="#{_text_color} font-weight-bold o_default_snippet_text">PRODUCT</a>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </template>
+
+    <template id="d_footer_grid">
+        <div t-attf-class="#{_parent_classes} d_bg_color">
+            <div class="o_mail_snippet_general">
+                <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_col_table d_footer_border_top">
+                    <tbody>
+                        <tr>
+                            <td style="vertical-align:top;width:180px;padding-right:5px;padding-left:5px;border-color: rgba(0, 0, 0, 0.12) !important;" class="o_mail_col_mv border text-center o_mail_col_container o_mail_h_padding o_mail_v_padding">
+                                <div class="pt-3">
+                                    <strong>Stores</strong>
+                                    <hr class="my-1 mx-2"/>
+                                    <small>Find your nearest shop</small>
+                                    <div class="m-2">
+                                        <a t-attf-class="btn #{_btn}" href="#">SEARCH</a>
+                                    </div>
+                                </div>
+                            </td>
+                            <td style="vertical-align:top;width:180px;padding-right:5px;padding-left:5px;border-color: rgba(0, 0, 0, 0.12) !important;border-left: 0px!important;" class="o_mail_col_mv border text-center o_mail_col_container o_mail_h_padding o_mail_v_padding">
+                                <div class="pt-3">
+                                    <strong>Stay connected</strong>
+                                    <hr class="my-1 mx-2"/>
+                                    <small>Get all latest news</small>
+                                    <div class="m-3">
+                                        <t t-call="droggol_mass_mailing_themes.d_social_links_template">
+                                            <t t-set="_classes" t-value="_icon"/>
+                                        </t>
+                                    </div>
+                                </div>
+                            </td>
+                            <td style="vertical-align:top;width:180px;padding-right:5px;padding-left:5px;border-color: rgba(0, 0, 0, 0.12) !important;border-left: 0px!important;" class="o_mail_col_mv border text-center o_mail_col_container o_mail_h_padding o_mail_v_padding">
+                                <div class="pt-3">
+                                    <strong>Customer service</strong>
+                                    <hr class="my-1 mx-2"/>
+                                    <small>Call us: 123-11-445</small>
+                                    <div class="m-2">
+                                        <a t-attf-class="btn #{_btn}" href="/contactus">CONTACT US</a>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="3" class="o_mail_col_mv text-center o_mail_col_container">
+                                <div class="p-1">
+                                    <p t-attf-class="#{_content} mb-0" style="font-size:10px;">
+                                        You have received this mail because you have subscribed for a newsletter at our website.
+                                        You can always unsubscribe from our mailing list, by clicking on Unsubscribe You can also reply to this message,
+                                        including unsubscribe in the topic.
+                                    </p>
+                                </div>
+                                <div class="border-top" style="border-color: rgba(0, 0, 0, 0.12) !important;">
+                                    <a href="/unsubscribe_from_list" class="btn btn-link d_font_small">Unsubscribe</a>
+                                    <a href="#" class="btn btn-link d_font_small">Privacy policy</a>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </template>
+
+    <template id="d_smooth_footer">
+        <div t-attf-class="#{_parent_classes} d_bg_color">
+            <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 class="o_mail_col_mv border text-center o_mail_col_container">
+                                <div class="p-5">
+                                    <h5 t-attf-class="#{_content} font-weight-bold mb-3">FOLLOW US ON</h5>
+                                    <t t-call="droggol_mass_mailing_themes.d_social_links_template">
+                                        <t t-set="_classes" t-value="_icon +' fa-2x'"/>
+                                    </t>
+                                    <div class="p-2">
+                                        <p t-attf-class="#{_content} mb-0" style="font-size:11px;">
+                                                    Sent with <i t-attf-class="fa fa-heart #{_text_color}"/> from My shop.
+                                        </p>
+                                    </div>
+                                    <div class="p-1">
+                                        <p t-attf-class="#{_content} mb-0" style="font-size:10px;">
+                                            You have received this mail because you have subscribed for a newsletter at our website.
+                                            You can always unsubscribe from our mailing list, by clicking on Unsubscribe You can also reply to this message,
+                                            including unsubscribe in the topic.
+                                        </p>
+                                    </div>
+                                    <div class="o_mail_footer_links">
+                                        <a role="button" href="/unsubscribe_from_list" t-attf-class="#{_text_color} btn d_font_small btn-link">Unsubscribe</a>
+                                                |                                <a role="button" href="/contactus" t-attf-class="#{_text_color} btn d_font_small btn-link" contenteditable="true">Contact</a>
+                                    </div>
+                                    <div>
+                                        <p t-attf-class="#{_content} o_mail_footer_copy" style="font-size:10px;">
+                                            <span class="fa fa-copyright" role="img" aria-label="Copyright" title="Copyright"></span> 2019 All Rights Reserved</p>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </template>
+
+    <template id="d_footer_logo">
+        <div t-attf-class="#{_parent_classes} d_bg_color">
+            <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 d_mail_h_padding_md d_mail_v_padding_md o_mail_col_container">
+                                <div>
+                                        &amp;nbsp;
+                                    <a class="text-left" t-att-href="(company_id.website) or '#'" style="text-decoration:none;display:block;float:none;">
+                                        <img border="0" t-att-src="_logo" style="height:auto;width:120px;" alt="Your Logo" />
+                                    </a>
+                                        &amp;nbsp;
+                                    <p style="font-size:10px;" t-attf-class="text-left #{_content}">
+                                            With live updates and regular emails, you'll always be the first to know about our latest arrivals and fashion tips.
+                                    </p>
+                                </div>
+                            </td>
+                            <td style="vertical-align:top;width:180px;" class="o_mail_col_mv d_mail_h_padding_md d_mail_v_padding_md o_mail_col_container">
+                                <div class="pt-3">
+                                    <h6 t-attf-class="#{_content} font-weight-bold ">SHOP</h6>
+                                    <hr class="my-1 mr-5"/>
+                                    <a style="display:block;font-weight:normal;" t-attf-class="mt-1 #{_content}" href="#">New</a>
+                                    <a style="display:block;font-weight:normal;" t-attf-class="mt-1 #{_content}" href="#">Collections</a>
+                                    <a style="display:block;font-weight:normal;" t-attf-class="mt-1 #{_content}" href="#">Stores</a>
+                                    <a style="display:block;font-weight:normal;" t-attf-class="mt-1 #{_content}" href="#">Latest Fashion</a>
+                                </div>
+                            </td>
+                            <td style="vertical-align:top;width:180px;" class="o_mail_col_mv d_mail_h_padding_md d_mail_v_padding_md o_mail_col_container">
+                                <div class="pt-3">
+                                    <h6 t-attf-class="#{_content} font-weight-bold ">USEFUL LINKS</h6>
+                                    <hr class="my-1 mr-5"/>
+                                    <a style="display:block;font-weight:normal;" t-attf-class="mt-1 #{_content}" href="#">Help</a>
+                                    <a style="display:block;font-weight:normal;" t-attf-class="mt-1 #{_content}" href="#">About us</a>
+                                    <a style="display:block;font-weight:normal;" t-attf-class="mt-1 #{_content}" href="/contactus">Contact</a>
+                                    <a style="display:block;font-weight:normal;" t-attf-class="mt-1 #{_content}" href="#">Our Services</a>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div t-attf-class="#{_parent_classes} d_bg_color">
+            <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 clospan="2" style="vertical-align:middle;width:360px;" class="o_mail_col_mv d_mail_h_padding_sm d_mail_v_padding_sm o_mail_col_container">
+                                <div>
+                                    <small class="o_mail_footer_copy" style="font-size:10px;">
+                                        <span class="fa fa-copyright" role="img" aria-label="Copyright" title="Copyright"></span> 2019 All Rights Reserved</small>
+                                    <a role="button" href="/unsubscribe_from_list" t-attf-class="#{_icon} px-1 d_font_small text-primary">Unsubscribe</a>
+                                        |    <a role="button" href="/contactus" t-attf-class="#{_icon} d_font_small px-1 text-primary" contenteditable="true">Contact</a>
+                                </div>
+                            </td>
+                            <td style="vertical-align:middle;width:180px;" class="o_mail_col_mv d_mail_h_padding_sm d_mail_v_padding_sm o_mail_col_container">
+                                <div class="m-3 text-center">
+                                    <t t-call="droggol_mass_mailing_themes.d_social_links_template">
+                                        <t t-set="_classes" t-value="_icon"/>
+                                    </t>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </template>
+
+    <template id="d_footer_mini">
+        <div t-attf-class="#{_parent_classes} d_bg_color">
+            <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 clospan="2" style="vertical-align:middle;width:360px;" class="o_mail_col_mv d_mail_h_padding_sm d_mail_v_padding_sm o_mail_col_container">
+                                <div>
+                                    <small t-attf-class="o_mail_footer_copy #{_text_color}" style="font-size:10px;">
+                                        <span class="fa fa-copyright" role="img" aria-label="Copyright" title="Copyright"></span> 2019 All Rights Reserved</small>
+                                    <a role="button" href="/unsubscribe_from_list" t-attf-class="#{_icon} px-1 d_font_small text-primary">Unsubscribe</a>
+                                    |                                    <a role="button" href="/contactus" t-attf-class="#{_icon} d_font_small px-1 text-primary" contenteditable="true">Contact</a>
+                                </div>
+                            </td>
+                            <td style="vertical-align:middle;width:180px;" class="o_mail_col_mv d_mail_h_padding_sm d_mail_v_padding_sm o_mail_col_container">
+                                <div class="m-3 text-center">
+                                    <t t-call="droggol_mass_mailing_themes.d_social_links_template">
+                                        <t t-set="_classes" t-value="_icon"/>
+                                    </t>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </template>
+
+    <template id="d_mail_social">
+        <div t-att-class="_parent_classes">
+            <div class="o_mail_snippet_general">
+                <table align="center" cellspacing="0" cellpadding="0" border="0" t-attf-class="o_mail_table_styles #{_border_class}">
+                    <tr>
+                        <td style="vertical-align:middle;width:180px;" t-attf-class="text-center o_mail_col_mv o_mail_v_padding o_mail_h_padding #{_text_color}">
+                            <t t-call="droggol_mass_mailing_themes.d_social_links_template">
+                                <t t-set="_classes" t-value="_text_color"/>
+                            </t>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </template>
+
+
+</odoo>