design-themes/theme_bewise/views/snippets_options.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="bewise_snippet_options" inherit_id="website.snippet_options">
        <xpath expr="//div[@data-js='background']//ul" position="replace">
            <ul class="dropdown-menu">
                <li data-select_class="oe_custom_bg" data-choose_image="choose_image"><a><b>Choose an image...</b></a></li>
                <li><a style="background: none; padding: 5px; border-top: 1px solid #ddd;"/></li>

                <li data-select_class="bg-img-01"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_01.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-02"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_02.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-03"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_03.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-04"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_04.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-05"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_05.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-06"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_06.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-07"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_07.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-08"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_08.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-09"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_09.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-10"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_10.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-11"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_11.jpg" class="bg_option_menu_img center-block"/></a></li>
                <li data-select_class="bg-img-12"><a><img src="/theme_bewise/static/src/img/backgrounds/bg_img_thumb_12.jpg" class="bg_option_menu_img center-block"/></a></li>

                <li data-select_class=""><a>None</a></li>
            </ul>
        </xpath>

        <xpath expr="//div[@data-js='background']" position="attributes">
            <attribute name="data-selector">section, .carousel, .parallax, .s_color_blocks_2_block, .s_color_blocks_4_block, .s_big_image</attribute>
        </xpath>

        <xpath expr="//div[@data-js='background']" position="after">
            <div data-js='margin-x'
                 data-selector=".row.simple-stepwizard-row > .simple-stepwizard-step"
                 data-drop-in='.row.simple-stepwizard-row'/>

            <div data-js="animation"
            data-selector=".s_color_blocks_2_block, .s_color_blocks_2_block img, .s_color_blocks_4_block, .s_color_blocks_4_block img, .s_discount_box, .s_pricing_box, .s_text img, .s_text_image img, .s_image_text img, .s_big_image img, .s_big_image_parallax img, .s_column img, .s_two_columns img, .s_three_columns img, .s_team_profile_box, .s_timeline_panel, .s_lead_bar div, .s_text_highlight, .s_big_icon_circle_box, .s_big_icon_square_box, .s_color_blocks_img_title">
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">Animate</a>
                    <ul class="dropdown-menu">
                        <li data-select_class="o_anim_fade_in"><a>Fade In</a></li>
                        <li data-select_class="o_anim_fade_in_down"><a>Fade In Down</a></li>
                        <li data-select_class="o_anim_fade_in_left"><a>Fade In Left</a></li>
                        <li data-select_class="o_anim_fade_in_right"><a>Fade In Right</a></li>
                        <li data-select_class="o_anim_fade_in_up"><a>Fade In Up</a></li>
                        <li data-select_class=""><a>None</a></li>
                    </ul>
                </li>
            </div>

            <div data-js="scroll_nav"
            data-selector="section">
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">Scroll Nav</a>
                    <ul class="dropdown-menu">
                        <li data-select_class="o_scroll_nav"><a>Enabled</a></li>
                        <li data-select_class=""><a>Disabled</a></li>
                    </ul>
                </li>
            </div>

            <div data-selector="s_separator_multicolor"
                 data-drop-near="section, p, h1, h2, h3, blockquote, .well, .panel, .oe_share, .progress"/>

            <div data-selector=".s_separator_color"
                 data-drop-near="section, p, h1, h2, h3, blockquote, .well, .panel, .oe_share, .progress"/>

            <div data-selector=".s_separator_shade"
                 data-drop-near="section, p, h1, h2, h3, blockquote, .well, .panel, .oe_share, .progress"/>

            <div data-selector=".s_text_highlight"
                 data-drop-near="section, p, h1, h2, h3, blockquote, .well, .panel, .oe_share, .progress"/>
        </xpath>
    </template>

    <!-- Option colorpicker override default from website and add a new one for some object  -->
    <template id="options_colorpicker" inherit_id="website.snippet_options">
        <xpath expr="//div[@data-js='colorpicker']" position="replace">
            <div data-js='colorpicker' data-selector="section, .carousel, .parallax, .s_big_image, .s_team_profile_box, .s_color_blocks_2_block, .s_color_blocks_4_block, .s_event_list time, .s_text_highlight, .s_color_blocks_img_title">
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">Color</a>
                    <ul class="dropdown-menu">
                        <li>
                            <table class="colorpicker">
                                <tr>
                                    <td colspan="9">Theme colors</td>
                                </tr>
                                <tr>
                                    <td><button data-color="alpha"></button></td>
                                    <td><button data-color="beta"></button></td>
                                    <td><button data-color="gamma"></button></td>
                                    <td><button data-color="delta"></button></td>
                                    <td><button data-color="epsilon"></button></td>
                                </tr>
                                <tr>
                                    <td><button data-color="white"></button></td>
                                    <td><button data-color="black"></button></td>
                                </tr>
                            </table>
                        </li>
                    </ul>
                </li>
            </div>
        </xpath>
    </template>

    <!-- Colorpicker used for editor and when li of color option is empty  -->
    <template id="colorpicker" inherit_id="web_editor.colorpicker" name="theme_clean colorpicker">
        <xpath expr="colorpicker" position="replace">
            <table class="colorpicker">
                <tr>
                    <td colspan="9">Theme colors</td>
                </tr>
                <tr>
                    <td><button data-color="alpha"></button></td>
                    <td><button data-color="beta"></button></td>
                    <td><button data-color="gamma"></button></td>
                    <td><button data-color="delta"></button></td>
                    <td><button data-color="epsilon"></button></td>
                </tr>
                <tr>
                  <td colspan="9">Custom colors</td>
                </tr>
                <tr>
                    <td><button data-color="turquoise-light"/></td>
                    <td><button data-color="green-light"/></td>
                    <td><button data-color="blue-light"/></td>
                    <td><button data-color="purple-light"/></td>
                    <td><button data-color="pink-light"/></td>
                    <td><button data-color="red-light"/></td>
                    <td><button data-color="brown-light"/></td>
                    <td><button data-color="orange-light"/></td>
                    <td><button data-color="yellow-light"/></td>
                </tr>
                <tr>
                    <td><button data-color="turquoise"/></td>
                    <td><button data-color="green"/></td>
                    <td><button data-color="blue"/></td>
                    <td><button data-color="purple"/></td>
                    <td><button data-color="pink"/></td>
                    <td><button data-color="red"/></td>
                    <td><button data-color="brown"/></td>
                    <td><button data-color="orange"/></td>
                    <td><button data-color="yellow"/></td>
                </tr>
                <tr>
                    <td><button data-color="turquoise-dark"/></td>
                    <td><button data-color="green-dark"/></td>
                    <td><button data-color="blue-dark"/></td>
                    <td><button data-color="purple-dark"/></td>
                    <td><button data-color="pink-dark"/></td>
                    <td><button data-color="red-dark"/></td>
                    <td><button data-color="brown-dark"/></td>
                    <td><button data-color="orange-dark"/></td>
                    <td><button data-color="yellow-dark"/></td>
                </tr>
                <tr>
                    <td><button data-color="white"/></td>
                    <td><button data-color="clouds"/></td>
                    <td><button data-color="silver"/></td>
                    <td><button data-color="concrete"/></td>
                    <td><button data-color="stone"/></td>
                    <td><button data-color="asphalt"/></td>
                    <td><button data-color="midnight"/></td>
                    <td><button data-color="black"/></td>
                </tr>
            </table>
        </xpath>
    </template>
</odoo>