📁 Détails du thème : theme_buzzy
🧬 Lancer la duplication
🎨 Galerie d’images du thème
Ouvrir la galerie
Visualisez toutes les images disponibles dans
static/src/img pour le thème theme_buzzy.
Cliquez sur une vignette pour voir l’image en taille réelle.
🧩 Snippets personnalisés
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template name="Media List" id="s_media_list">
<section class="s_media_list pt32 pb32 o_cc o_cc2" data-vcss="001">
<div class="container">
<div class="row s_nb_column_fixed s_col_no_bgcolor">
<div class="col-lg-12 s_media_list_item pt16 pb16" data-name="Media item">
<div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
<div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
<img src="/web/image/website.s_media_list_default_image_1" class="s_media_list_img h-100 w-100" alt=""/>
</div>
<div class="col-lg-8 s_media_list_body">
<h3>Media heading</h3>
<p>Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fits your needs.</p>
<a href="#" class="btn btn-primary mb-2">Discover</a>
</div>
</div>
</div>
<div class="col-lg-12 s_media_list_item pt16 pb16" data-name="Media item">
<div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
<div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
<img src="/web/image/website.s_media_list_default_image_2" class="s_media_list_img h-100 w-100" alt=""/>
</div>
<div class="col-lg-8 s_media_list_body">
<h3>Event heading</h3>
<p>Speakers from all over the world will join our experts to give inspiring talks on various topics. Stay on top of the latest business management trends & technologies</p>
</div>
</div>
</div>
<div class="col-lg-12 s_media_list_item pt16 pb16" data-name="Media item">
<div class="row s_col_no_resize s_col_no_bgcolor g-0 align-items-center o_cc o_cc1">
<div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
<img src="/web/image/website.s_media_list_default_image_3" class="s_media_list_img h-100 w-100" alt=""/>
</div>
<div class="col-lg-8 s_media_list_body">
<h3>Post heading</h3>
<p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
<a href="#">
Continue reading
<i class="fa fa-long-arrow-right align-middle ms-1"/>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<template id="s_media_list_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="MultipleItems" data-selector=".s_media_list">
<we-row string="Media">
<we-button data-add-item="" data-item=".s_media_list_item:last" data-select-item="" data-no-preview="true" class="o_we_bg_brand_primary">
Add Media
</we-button>
</we-row>
</div>
</xpath>
<xpath expr="." position="inside">
<t t-call="website.snippet_options_background_options">
<t t-set="selector" t-value="'.s_media_list_item'"/>
<t t-set="target" t-value="'> .row'"/>
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="False"/>
<t t-set="with_color_combinations" t-value="True"/>
<t t-set="with_gradients" t-value="True"/>
</t>
<div data-js="Box" data-selector=".s_media_list_item" data-target="> .row">
<t t-call="website.snippet_options_border_widgets"/>
<t t-call="website.snippet_options_shadow_widgets"/>
</div>
<div data-selector=".s_media_list_item" data-target="> .row">
<we-button-group string="Layout">
<we-button title="Left" data-name="media_left_opt" data-select-class="" data-img="/website/static/src/img/snippets_options/image_left.svg"/>
<we-button title="Right" data-select-class="flex-row-reverse" data-img="/website/static/src/img/snippets_options/image_right.svg"/>
</we-button-group>
</div>
<div data-js="MediaItemLayout" data-selector=".s_media_list_item">
<we-button-group string="Image Size" data-dependencies="media_left_opt">
<we-button data-layout="3" data-img="/website/static/src/img/snippets_options/media_layout_1_4.svg" title="1/4 - 3/4"/>
<we-button data-layout="4" data-img="/website/static/src/img/snippets_options/media_layout_1_3.svg" title="1/3 - 2/3"/>
<we-button data-layout="6" data-img="/website/static/src/img/snippets_options/media_layout_1_2.svg" title="1/2 - 1/2"/>
</we-button-group>
<we-button-group string="Image Size" data-dependencies="!media_left_opt">
<we-button data-layout="3" data-img="/website/static/src/img/snippets_options/media_layout_1_4_right.svg" title="1/4 - 3/4"/>
<we-button data-layout="4" data-img="/website/static/src/img/snippets_options/media_layout_1_3_right.svg" title="1/3 - 2/3"/>
<we-button data-layout="6" data-img="/website/static/src/img/snippets_options/media_layout_1_2_right.svg" title="1/2 - 1/2"/>
</we-button-group>
</div>
<div data-selector=".s_media_list_item" data-target="> .row">
<!-- Don't use the standard Vert. Alignement option to not suggest
Equal Height, which is useless for this snippet. -->
<we-button-group string="Text Position" title="Text Position" data-dependencies="media_left_opt">
<we-button title="Align Top" data-select-class="align-items-start" data-img="/website/static/src/img/snippets_options/align_top_right.svg"/>
<we-button title="Align Middle" data-select-class="align-items-center" data-img="/website/static/src/img/snippets_options/align_middle_right.svg"/>
<we-button title="Align Bottom" data-select-class="align-items-end" data-img="/website/static/src/img/snippets_options/align_bottom_right.svg"/>
</we-button-group>
<we-button-group string="Text Position" title="Text Position" data-dependencies="!media_left_opt">
<we-button title="Align Top" data-select-class="align-items-start" data-img="/website/static/src/img/snippets_options/align_top.svg"/>
<we-button title="Align Middle" data-select-class="align-items-center" data-img="/website/static/src/img/snippets_options/align_middle.svg"/>
<we-button title="Align Bottom" data-select-class="align-items-end" data-img="/website/static/src/img/snippets_options/align_bottom.svg"/>
</we-button-group>
</div>
</xpath>
</template>
<record id="website.s_media_list_000_scss" model="ir.asset">
<field name="name">Media list 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_media_list/000.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_media_list_001_scss" model="ir.asset">
<field name="name">Media list 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_media_list/001.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template name="Items" id="s_product_list">
<t t-set="url" value="url or '#'"/>
<section class="s_product_list">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-4 col-6">
<a t-att-href="url">
<img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid"/>
</a>
<div class="s_product_list_item_link">
<a t-att-href="url" class="btn btn-primary">Furniture</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<a t-att-href="url">
<img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid"/>
</a>
<div class="s_product_list_item_link">
<a t-att-href="url" class="btn btn-primary">Clothes</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<a t-att-href="url">
<img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid"/>
</a>
<div class="s_product_list_item_link">
<a t-att-href="url" class="btn btn-primary">Books</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<a t-att-href="url">
<img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid"/>
</a>
<div class="s_product_list_item_link">
<a t-att-href="url" class="btn btn-primary">Essential oils</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<a t-att-href="url">
<img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid"/>
</a>
<div class="s_product_list_item_link">
<a t-att-href="url" class="btn btn-primary">Service</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<a t-att-href="url">
<img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid"/>
</a>
<div class="s_product_list_item_link">
<a t-att-href="url" class="btn btn-primary">Multimedia</a>
</div>
</div>
</div>
</div>
</section>
</template>
<record id="website.s_product_list_000_variables_scss" model="ir.asset">
<field name="name">Product list 000 variables SCSS</field>
<field name="bundle">web._assets_primary_variables</field>
<field name="path">website/static/src/snippets/s_product_list/000_variables.scss</field>
</record>
<record id="website.s_product_list_000_scss" model="ir.asset">
<field name="name">Product list 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_product_list/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_text_block" name="Text">
<section class="s_text_block pt40 pb40">
<div class="container s_allow_columns">
<p>
Great stories have a
<b>personality</b>
. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.
</p>
<p>
Great stories are
<b>for everyone</b>
even when only written
<b>for just one person</b>
. If you try to write with a wide, general audience in mind, your story will sound fake and lack emotion. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
</p>
</div>
</section>
</template>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template name="Blockquote" id="s_blockquote">
<blockquote class="s_blockquote s_blockquote_classic w-100 mx-auto o_animable blockquote">
<i class="s_blockquote_icon fa fa-1x fa-quote-left bg-o-color-2 rounded"/>
<div class="s_blockquote_content bg-100">
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
<footer class="blockquote-footer">
<img src="/web/image/website.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle me-2" alt=""/>
<span class="s_blockquote_author">
<b>John DOE</b>
• CEO of MyCompany
</span>
</footer>
</div>
</blockquote>
</template>
<template id="s_blockquote_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<!-- Layout -->
<div data-js="Blockquote" data-selector=".s_blockquote">
<we-select string="Display">
<we-button data-select-class="s_blockquote_classic" data-display="classic">Classic</we-button>
<we-button data-select-class="s_blockquote_cover" data-display="cover" data-name="blockquote_cover_opt">Cover</we-button>
<we-button data-select-class="s_blockquote_minimalist" data-display="minimalist" data-name="blockquote_minimalist_opt">Minimalist</we-button>
</we-select>
</div>
<!-- Color and images -->
<t t-call="website.snippet_options_background_options">
<t t-set="selector" t-value="'.s_blockquote'"/>
<t t-set="target" t-value="'.s_blockquote_content'"/>
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="True"/>
<t t-set="with_videos" t-value="True"/>
<t t-set="with_shapes" t-value="True"/>
<t t-set="with_gradients" t-value="True"/>
<t t-set="images_dependencies" t-value="'blockquote_cover_opt'"/>
</t>
<!-- Shadow -->
<div data-js="Box" data-selector=".s_blockquote" data-target=".s_blockquote_content">
<t t-call="website.snippet_options_shadow_widgets"/>
</div>
<!-- Border Color -->
<div data-selector="blockquote">
<we-colorpicker string="Border Color" data-select-style="true" data-css-property="border-color" data-color-prefix="border-" data-dependencies="blockquote_minimalist_opt"/>
</div>
</xpath>
</template>
<record id="website.s_blockquote_000_scss" model="ir.asset">
<field name="name">Blockquote 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_blockquote/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_product_catalog" name="Pricelist">
<section class="s_product_catalog oe_img_bg o_bg_img_center oe_custom_bg pt48 pb32" style="background-image: url('/web/image/website.s_product_catalog_default_image');" data-vcss="001">
<div class="container">
<h2>Menu</h2>
<p>Add a menu description.</p>
<div class="row">
<div class="col-lg-6 pt16 pb16">
<h3>Starter</h3>
<ul class="list-unstyled my-3">
<t t-call="website.s_product_catalog_dish">
<t t-set="name">Cheese Onion Rings</t>
<t t-set="price">$9.00</t>
</t>
<t t-call="website.s_product_catalog_dish">
<t t-set="name">Chefs Fresh Soup of the Day</t>
<t t-set="price">$7.50</t>
</t>
<t t-call="website.s_product_catalog_dish">
<t t-set="name">Beef Carpaccio</t>
<t t-set="price">$10.50</t>
</t>
</ul>
</div>
<div class="col-lg-6 pt16 pb16">
<h3>Main Course</h3>
<ul class="list-unstyled my-3">
<t t-call="website.s_product_catalog_dish">
<t t-set="name">Filet Mignon 8oz</t>
<t t-set="price">$15.50</t>
</t>
<t t-call="website.s_product_catalog_dish">
<t t-set="name">Farm Friendly Chicken Supreme</t>
<t t-set="price">$15.50</t>
</t>
<t t-call="website.s_product_catalog_dish">
<t t-set="name">Tuna and Salmon Burger</t>
<t t-set="price">$12.00</t>
</t>
</ul>
</div>
</div>
</div>
</section>
</template>
<template id="s_product_catalog_dish">
<li class="s_product_catalog_dish" data-name="Product">
<p class="s_product_catalog_dish_title d-flex align-items-baseline pb-2">
<span t-esc="name" class="s_product_catalog_dish_name s_product_catalog_dish_dot_leaders"/>
<span t-esc="price" class="s_product_catalog_dish_price ms-auto ps-2"/>
</p>
</li>
</template>
<template id="s_product_catalog_add_product_widget">
<we-row string="Product">
<we-button data-add-item="" data-item=".s_product_catalog_dish:last" data-select-item="" t-att-data-apply-to="apply_to" data-no-preview="true" class="o_we_bg_brand_primary">
Add Product
</we-button>
</we-row>
</template>
<template id="s_product_catalog_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="MultipleItems" data-selector=".s_product_catalog">
<t t-call="website.s_product_catalog_add_product_widget">
<t t-set="apply_to" t-valuef="> :has(.s_product_catalog_dish):not(:has(.row > div:has(.s_product_catalog_dish)))"/>
</t>
</div>
<div data-js="MultipleItems" data-selector=".s_product_catalog .row > div">
<t t-call="website.s_product_catalog_add_product_widget">
<t t-set="apply_to" t-valuef="> :has(.s_product_catalog_dish)"/>
</t>
</div>
</xpath>
<xpath expr="." position="inside">
<div data-js="ProductCatalog" data-selector=".s_product_catalog">
<we-checkbox string="Descriptions" data-toggle-description="true" data-no-preview="true"/>
<t t-call="website.snippet_options_border_line_widgets">
<t t-set="label">⌙ Separator</t>
<t t-set="direction" t-value="'top'"/>
<t t-set="apply_to" t-value="'.s_product_catalog_dish_description'"/>
<!-- Note: no need of extra dependency thanks to the apply-to -->
</t>
</div>
<div data-selector=".s_product_catalog_dish" data-drop-near=".s_product_catalog_dish"/>
</xpath>
<xpath expr="//div[@data-js='SnippetMove']" position="attributes">
<attribute name="data-selector" add=".s_product_catalog_dish" separator=","/>
</xpath>
</template>
<record id="website.s_product_catalog_001_scss" model="ir.asset">
<field name="name">Product catalog 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_product_catalog/001.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template name="Numbers" id="s_numbers">
<section class="s_numbers o_cc o_cc2 pt24 pb24">
<div class="container">
<div class="row">
<div class="col-lg-3 text-center pt24 pb24">
<span class="s_number display-4">12</span>
<h6>Useful options</h6>
</div>
<div class="col-lg-3 text-center pt24 pb24">
<span class="s_number display-4">45</span>
<h6>Beautiful snippets</h6>
</div>
<div class="col-lg-3 text-center pt24 pb24">
<span class="s_number display-4">8</span>
<h6>Amazing pages</h6>
</div>
<div class="col-lg-3 text-center pt24 pb24">
<span class="s_number display-4">37</span>
<h6>Outstanding images</h6>
</div>
</div>
</div>
</section>
</template>
<!-- No associated CSS but there is some in theme overrides -->
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<!--
TODO in master: remove contenteditable="true" from <img> tags. Those were part
of a stable fix to allow re-editing, now superseded by the use of the
o_editable_media class.
-->
<template id="s_company_team" name="Team">
<section class="s_company_team pt48 pb48">
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-6 pt24 pb24">
<div class="row s_col_no_resize s_col_no_bgcolor">
<div class="col-lg-4 pb16 o_not_editable" contenteditable="false">
<img alt="" src="/web/image/website.s_company_team_image_1" class="img-fluid rounded-circle mx-auto o_editable_media" contenteditable="true"/>
</div>
<div class="col-lg-8">
<h4>Tony Fred, CEO</h4>
<p>
Founder and chief visionary, Tony is the driving force behind the company. He loves
to keep his hands full by participating in the development of the software,
marketing, and customer experience strategies.
</p>
</div>
</div>
</div>
<div class="col-lg-6 pt24 pb24">
<div class="row s_col_no_resize s_col_no_bgcolor">
<div class="col-lg-4 pb16 o_not_editable" contenteditable="false">
<img alt="" src="/web/image/website.s_company_team_image_2" class="img-fluid rounded-circle mx-auto o_editable_media" contenteditable="true"/>
</div>
<div class="col-lg-8">
<h4>Mich Stark, COO</h4>
<p>Mich loves taking on challenges. With his multi-year experience as Commercial Director in the software industry, Mich has helped the company to get where it is today. Mich is among the best minds.</p>
</div>
</div>
</div>
<div class="col-lg-6 pt24 pb24">
<div class="row s_col_no_resize s_col_no_bgcolor">
<div class="col-lg-4 pb16 o_not_editable" contenteditable="false">
<img alt="" src="/web/image/website.s_company_team_image_3" class="img-fluid rounded-circle mx-auto o_editable_media" contenteditable="true"/>
</div>
<div class="col-lg-8">
<h4>Aline Turner, CTO</h4>
<p>Aline is one of the iconic people in life who can say they love what they do. She mentors 100+ in-house developers and looks after the community of thousands of developers.</p>
</div>
</div>
</div>
<div class="col-lg-6 pt24 pb24">
<div class="row s_col_no_resize s_col_no_bgcolor">
<div class="col-lg-4 pb16 o_not_editable" contenteditable="false">
<img alt="" src="/web/image/website.s_company_team_image_4" class="img-fluid rounded-circle mx-auto o_editable_media" contenteditable="true"/>
</div>
<div class="col-lg-8">
<h4>Iris Joe, CFO</h4>
<p>Iris, with her international experience, helps us easily understand the numbers and improves them. She is determined to drive success and delivers her professional acumen to bring the company to the next level.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<record id="website.s_company_team_000_scss" model="ir.asset">
<field name="name">Company team 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_company_team/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_title" name="Title">
<section class="s_title pt40 pb40" data-vcss="001">
<div class="container s_allow_columns">
<h1 style="text-align: center;">
<font style="font-size: 62px;">Your Site Title</font>
</h1>
</div>
</section>
</template>
<record id="website.s_title_000_scss" model="ir.asset">
<field name="name">Title 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_title/000.scss</field>
<field name="active" eval="False"/>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_countdown" name="Countdown">
<section class="s_countdown pt48 pb48" data-display="dhms" data-end-action="nothing" data-size="175" t-att-data-end-time="datetime.datetime.now().timestamp() + 228307" data-layout="circle" data-layout-background="none" data-progress-bar-style="surrounded" data-progress-bar-weight="thin" data-text-color="o-color-1" data-layout-background-color="400" data-progress-bar-color="o-color-1">
<div class="container">
<div class="s_countdown_canvas_wrapper text-center"/>
</div>
</section>
</template>
<template id="s_countdown_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-js="countdown" data-selector=".s_countdown">
<we-datetimepicker string="Due Date" data-select-data-attribute="0" data-attribute-name="endTime"/>
<we-row>
<we-select string="At The End" data-no-preview="true">
<we-button data-end-action="nothing" data-name="no_end_action_opt">Nothing</we-button>
<we-button data-end-action="redirect" data-name="redirect_end_action_opt">Redirect</we-button>
<we-button data-end-action="message_no_countdown">Show Message and hide countdown</we-button>
<we-button data-end-action="message">Show Message and keep countdown</we-button>
</we-select>
<we-button class="align-self-end toggle-edit-message" title="The message will be visible once the countdown ends">
<i class="fa fa-fw fa-eye"/>
</we-button>
</we-row>
<we-urlpicker string="URL" data-dependencies="redirect_end_action_opt" data-select-data-attribute="" placeholder="e.g. /my-awesome-page" data-attribute-name="redirectUrl"/>
<we-select string="Size" data-attribute-name="size">
<we-button data-select-data-attribute="80">Small</we-button>
<we-button data-select-data-attribute="120">Medium</we-button>
<we-button data-select-data-attribute="175">Large</we-button>
</we-select>
<we-select string="Display" data-attribute-name="display">
<we-button data-select-data-attribute="d">D</we-button>
<we-button data-select-data-attribute="dhm">D - H - M</we-button>
<we-button data-select-data-attribute="dhms">D - H - M - S</we-button>
</we-select>
<we-colorpicker string="Text Color" data-attribute-name="textColor" data-select-data-attribute=""/>
<we-select string="Layout">
<we-button data-layout="circle" data-name="circle_layout_opt">Circle</we-button>
<we-button data-layout="boxes" data-name="boxes_layout_opt">Boxes</we-button>
<we-button data-layout="clean">Clean</we-button>
<we-button data-layout="text">Text Inline</we-button>
</we-select>
<we-select string="Layout Background" data-attribute-name="layoutBackground" data-dependencies="circle_layout_opt, boxes_layout_opt">
<we-button data-select-data-attribute="inner">Inner</we-button>
<we-button data-select-data-attribute="plain">Plain</we-button>
<we-button data-select-data-attribute="none" data-name="no_background_layout_opt">None</we-button>
</we-select>
<we-colorpicker string="Layout Background Color" data-dependencies="!no_background_layout_opt" data-attribute-name="layoutBackgroundColor" data-select-data-attribute=""/>
<we-select string="Progress Bar Style" data-attribute-name="progressBarStyle" data-dependencies="circle_layout_opt, boxes_layout_opt">
<we-button data-select-data-attribute="surrounded">Surrounded</we-button>
<we-button data-select-data-attribute="disappear">Disappearing</we-button>
<we-button data-select-data-attribute="none" data-name="no_progressbar_style_opt">None</we-button>
</we-select>
<we-select string="Progress Bar Weight" data-attribute-name="progressBarWeight" data-dependencies="!no_progressbar_style_opt">
<we-button data-select-data-attribute="thin">Thin</we-button>
<we-button data-select-data-attribute="thick">Thick</we-button>
</we-select>
<we-colorpicker string="Progress Bar Color" data-dependencies="!no_progressbar_style_opt" data-attribute-name="progressBarColor" data-select-data-attribute=""/>
</div>
</xpath>
</template>
<record id="website.s_countdown_000_js" model="ir.asset">
<field name="name">Countdown 000 JS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_countdown/000.js</field>
</record>
<record id="website.s_countdown_000_xml" model="ir.asset">
<field name="name">Countdown 000 XML</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_countdown/000.xml</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_image_text" name="Image - Text">
<section class="s_text_image pt32 pb32">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 pt16 pb16">
<img src="/web/image/website.s_image_text_default_image" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="col-lg-6 pt16 pb16">
<h2>Section Subtitle</h2>
<p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
<p>Start with the customer – find out what they want and give it to them.</p>
<p>
<a href="#" class="btn btn-primary mb-2">Discover more</a>
</p>
</div>
</div>
</div>
</section>
</template>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_cover" name="Cover">
<section class="s_cover parallax s_parallax_is_fixed bg-black-50 pt96 pb96" data-scroll-background-ratio="1">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
<div class="o_we_bg_filter bg-black-50"/>
<div class="container s_allow_columns">
<h1 style="text-align: center;">
<font style="font-size: 62px; font-weight: bold;">Catchy Headline</font>
</h1>
<p class="lead" style="text-align: center;">
Write one or two paragraphs describing your product, services or a specific feature.
<br/>
To be successful your content needs to be useful to your readers.
</p>
<p style="text-align: center;">
<a t-att-href="cta_btn_href" class="btn btn-primary mb-2">
<t t-esc="cta_btn_text">Contact us</t>
</a>
</p>
</div>
</section>
</template>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_quotes_carousel" name="Quotes">
<section class="s_quotes_carousel_wrapper" data-vxml="001" data-vcss="001">
<t t-set="uniq" t-value="datetime.datetime.now().microsecond"/>
<div t-attf-id="myQuoteCarousel{{uniq}}" class="s_quotes_carousel s_carousel_default carousel slide o_cc o_cc2" data-bs-interval="10000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide-to="0" class="active"/>
<li t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide-to="1"/>
<li t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide-to="2"/>
</ol>
<!-- Content -->
<div class="carousel-inner">
<!-- #01 -->
<div class="carousel-item active oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_0'); background-position: 50% 50%;" data-name="Slide">
<div class="container">
<blockquote class="s_blockquote s_blockquote_classic blockquote mx-auto w-50" data-name="Blockquote">
<i class="fa fa-1x fa-quote-left rounded float-start bg-o-color-2 s_blockquote_icon"/>
<div class="s_blockquote_content o_cc1">
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
<footer class="blockquote-footer">
<img src="/web/image/website.s_quotes_carousel_demo_image_3" class="s_blockquote_avatar img rounded-circle me-2" alt=""/>
<span class="s_blockquote_author">
<b>Jane DOE</b>
• CEO of MyCompany
</span>
</footer>
</div>
</blockquote>
</div>
</div>
<!-- #02 -->
<div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
<div class="container">
<blockquote class="s_blockquote s_blockquote_classic blockquote me-auto w-50" data-name="Blockquote">
<i class="fa fa-1x fa-quote-left rounded float-start bg-o-color-2 s_blockquote_icon"/>
<div class="s_blockquote_content o_cc1">
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
<footer class="blockquote-footer">
<img src="/web/image/website.s_quotes_carousel_demo_image_4" class="s_blockquote_avatar img rounded-circle me-2" alt=""/>
<span class="s_blockquote_author">
<b>John DOE</b>
• CEO of MyCompany
</span>
</footer>
</div>
</blockquote>
</div>
</div>
<!-- #03 -->
<div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
<div class="container">
<blockquote class="s_blockquote s_blockquote_classic blockquote ms-auto w-50" data-name="Blockquote">
<i class="fa fa-1x fa-quote-left rounded float-start bg-o-color-2 s_blockquote_icon"/>
<div class="s_blockquote_content o_cc1">
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
<footer class="blockquote-footer">
<img src="/web/image/website.s_quotes_carousel_demo_image_5" class="s_blockquote_avatar img rounded-circle me-2" alt=""/>
<span class="s_blockquote_author">
<b>Iris DOE</b>
• CEO of MyCompany
</span>
</footer>
</div>
</blockquote>
</div>
</div>
</div>
<!-- Controls -->
<div class="carousel-control-prev o_not_editable" t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide="prev" role="img" aria-label="Previous" title="Previous">
<span class="carousel-control-prev-icon"/>
<span class="visually-hidden">Previous</span>
</div>
<div class="carousel-control-next o_not_editable" t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide="next" role="img" aria-label="Next" title="Next">
<span class="carousel-control-next-icon"/>
<span class="visually-hidden">Next</span>
</div>
</div>
</section>
</template>
<record id="website.s_quotes_carousel_000_scss" model="ir.asset">
<field name="name">Quotes carousel 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_quotes_carousel/000.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_quotes_carousel_001_scss" model="ir.asset">
<field name="name">Quotes carousel 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_quotes_carousel/001.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_references" name="References">
<section class="s_references pt48 pb32">
<div class="container">
<h2 style="text-align: center;">Our References</h2>
<p style="text-align: center;">We are in good company.</p>
<div class="row">
<div class="col-lg-2 pt16 pb16">
<img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="col-lg-2 pt16 pb16">
<img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="col-lg-2 pt16 pb16">
<img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="col-lg-2 pt16 pb16">
<img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="col-lg-2 pt16 pb16">
<img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="col-lg-2 pt16 pb16">
<img src="/web/image/website.s_reference_default_image_6" class="img img-fluid mx-auto" alt=""/>
</div>
</div>
</div>
</section>
</template>
<record id="website.s_references_000_scss" model="ir.asset">
<field name="name">References 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_references/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_comparisons" name="Comparisons">
<section class="s_comparisons pt32 pb32">
<div class="container">
<div class="row">
<div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box">
<div class="card bg-200">
<h4 class="card-header">Beginner</h4>
<div class="card-body text-center">
<h2 class="card-title">
<span class="s_comparisons_currency">$</span>
<span class="s_comparisons_price">
<b>35</b>
</span>
<span class="s_comparisons_decimal">.00</span>
</h2>
<small>/ month</small>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Basic sales & marketing for up to 2 users</li>
<li class="list-group-item">Account & Sales management</li>
<li class="list-group-item">No customization</li>
<li class="list-group-item">No support</li>
</ul>
<div class="card-footer">
<p>
<i>Instant setup, satisfied or reimbursed.</i>
</p>
<a href="/contactus" class="btn btn-primary mb-2">Order now</a>
</div>
</div>
</div>
<div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box">
<div class="card bg-o-color-5">
<h4 class="card-header">Professional</h4>
<div class="card-body">
<h2 class="card-title">
<span class="s_comparisons_currency">$</span>
<span class="s_comparisons_price">
<b>65</b>
</span>
<span class="s_comparisons_decimal">.00</span>
</h2>
<small>/ month</small>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Complete CRM for any size team</li>
<li class="list-group-item">Get access to all modules</li>
<li class="list-group-item">Limited customization</li>
<li class="list-group-item">Email support</li>
</ul>
<div class="card-footer">
<p>
<i>Instant setup, satisfied or reimbursed.</i>
</p>
<a href="/contactus" class="btn btn-primary mb-2">Start now</a>
</div>
</div>
</div>
<div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box">
<div class="card bg-secondary">
<h4 class="card-header">Expert</h4>
<div class="card-body text-center">
<h2 class="card-title">
<span class="s_comparisons_currency">$</span>
<span class="s_comparisons_price">
<b>125</b>
</span>
<span class="s_comparisons_decimal">.00</span>
</h2>
<small>/ month</small>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Unlimited CRM power and support</li>
<li class="list-group-item">Get access to all modules and features</li>
<li class="list-group-item">Unlimited customization</li>
<li class="list-group-item">24x7 toll-free support</li>
</ul>
<div class="card-footer">
<p>
<i>Instant setup, satisfied or reimbursed.</i>
</p>
<a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<record id="website.s_comparisons_000_scss" model="ir.asset">
<field name="name">Comparisons 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_comparisons/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template name="Steps" id="s_process_steps">
<section class="s_process_steps pt24 pb24 s_process_steps_connector_line" data-vcss="001">
<svg class="s_process_step_svg_defs position-absolute">
<defs>
<marker class="s_process_steps_arrow_head" markerWidth="15" markerHeight="10" refX="6" refY="6" orient="auto">
<path d="M 2,2 L10,6 L2,10 L6,6 L2,2" vector-effect="non-scaling-size"/>
</marker>
</defs>
</svg>
<div class="container">
<div class="row g-0">
<div class="col-lg-3 s_process_step pt24 pb24">
<svg class="s_process_step_connector" viewBox="0 0 100 20" preserveAspectRatio="none">
<path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke"/>
</svg>
<div class="s_process_step_icon">
<i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-primary"/>
</div>
<div class="s_process_step_content">
<h2>Add to cart</h2>
<p>
Let your customers follow
<br/>
and understand your process.
</p>
</div>
</div>
<div class="col-lg-3 s_process_step pt24 pb24">
<svg class="s_process_step_connector" viewBox="0 0 100 20" preserveAspectRatio="none">
<path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke"/>
</svg>
<div class="s_process_step_icon">
<i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-o-color-5"/>
</div>
<div class="s_process_step_content">
<h2>Sign in</h2>
<p>
Click on the icon to adapt it
<br/>
to your purpose.
</p>
</div>
</div>
<div class="col-lg-3 s_process_step pt24 pb24">
<svg class="s_process_step_connector" viewBox="0 0 100 20" preserveAspectRatio="none">
<path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke"/>
</svg>
<div class="s_process_step_icon">
<i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-secondary"/>
</div>
<div class="s_process_step_content">
<h2>Pay</h2>
<p>
Duplicate blocks
<br/>
to add more steps.
</p>
</div>
</div>
<div class="col-lg-3 s_process_step pt24 pb24">
<svg class="s_process_step_connector" viewBox="0 0 100 20" preserveAspectRatio="none">
<path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke"/>
</svg>
<div class="s_process_step_icon">
<i class="fa fa-plane fa-2x mx-auto rounded-circle bg-o-color-3"/>
</div>
<div class="s_process_step_content">
<h2>Get Delivered</h2>
<p>
Select and delete blocks
<br/>
to remove some steps.
</p>
</div>
</div>
</div>
</div>
</section>
</template>
<template id="s_process_steps_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-js="StepsConnector" data-selector=".s_process_steps">
<we-row string="Connector">
<we-select data-name="connector_type">
<we-button data-select-class="" data-name="no_connector_opt">None</we-button>
<we-button data-select-class="s_process_steps_connector_line">Line</we-button>
<we-button data-select-class="s_process_steps_connector_arrow">Straight arrow</we-button>
<we-button data-select-class="s_process_steps_connector_curved_arrow">Curved arrow</we-button>
</we-select>
<we-colorpicker data-select-style="true" data-name="connector_color_opt" data-dependencies="!no_connector_opt" data-apply-to=".s_process_step_connector path" data-css-property="stroke" data-change-color="true"/>
</we-row>
</div>
</xpath>
</template>
<record id="website.s_process_steps_000_scss" model="ir.asset">
<field name="name">Process steps 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_process_steps/000.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_process_steps_001_scss" model="ir.asset">
<field name="name">Process steps 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_process_steps/001.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template name="Text Highlight" id="s_text_highlight">
<div class="s_text_highlight o_colored_level o_cc o_cc3 my-3 text-center w-100">
<div class="container">
<h3>Text Highlight</h3>
<p>Put the focus on what you have to say!</p>
</div>
</div>
</template>
<record id="website.s_text_highlight_000_scss" model="ir.asset">
<field name="name">Text highlight 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_text_highlight/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_tabs" name="Tabs">
<section class="s_tabs pt48 pb48" data-vcss="001">
<div class="container">
<div class="s_tabs_main">
<div class="s_tabs_nav mb-3">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav_tabs_link_1" data-bs-toggle="tab" href="#nav_tabs_content_1" role="tab" aria-controls="nav_tabs_content_1" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav_tabs_link_2" data-bs-toggle="tab" href="#nav_tabs_content_2" role="tab" aria-controls="nav_tabs_content_2" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav_tabs_link_3" data-bs-toggle="tab" href="#nav_tabs_content_3" role="tab" aria-controls="nav_tabs_content_3" aria-selected="false">Contact</a>
</li>
</ul>
</div>
<div class="s_tabs_content tab-content">
<div class="tab-pane fade show active" id="nav_tabs_content_1" role="tabpanel" aria-labelledby="nav_tabs_link_1">
<div class="oe_structure oe_empty">
<section class="s_text_block">
<div class="container s_allow_columns">
<p>Write one or two paragraphs describing your product or services.</p>
</div>
</section>
</div>
</div>
<div class="tab-pane fade" id="nav_tabs_content_2" role="tabpanel" aria-labelledby="nav_tabs_link_2">
<div class="oe_structure oe_empty">
<section class="s_text_block">
<div class="container s_allow_columns">
<p>To be successful your content needs to be useful to your readers.</p>
</div>
</section>
</div>
</div>
<div class="tab-pane fade" id="nav_tabs_content_3" role="tabpanel" aria-labelledby="nav_tabs_link_3">
<div class="oe_structure oe_empty">
<section class="s_text_block">
<div class="container s_allow_columns">
<p>Start with the customer – find out what they want and give it to them.</p>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<template id="s_tabs_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-js="NavTabs" data-selector="section.s_tabs">
<we-button data-add-item="" data-item=".tab-pane.active" data-no-preview="true" class="o_we_text_success ms-0" title="Add Tab" aria-label="Add Tab">
<i class="fa fa-fw fa-plus"/>
</we-button>
<we-button data-remove-item="" data-item=".tab-pane.active" data-name="remove_tab_opt" data-no-preview="true" class="o_we_text_danger me-3" title="Remove Tab" aria-label="Remove Tab">
<i class="fa fa-fw fa-minus"/>
</we-button>
</div>
<div data-js="NavTabsStyle" data-selector="section" data-target=".s_tabs_main">
<we-select string="Style">
<we-button data-set-style="tabs" data-name="tabs_opt" data-trigger="horizontal_opt">Tabs</we-button>
<we-button data-set-style="pills" data-name="pills_opt" data-trigger="tabs_color_opt" data-trigger-value="">Buttons</we-button>
</we-select>
<we-colorpicker string="Tabs color" data-dependencies="tabs_opt" data-name="tabs_color_opt" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>
<we-select string="Direction" data-dependencies="pills_opt">
<we-button data-set-direction="horizontal" data-name="horizontal_opt">Horizontal</we-button>
<we-button data-set-direction="vertical" data-trigger="left_alignment_opt">Vertical</we-button>
</we-select>
<we-select string="Alignment" data-apply-to=".s_tabs_nav:first .nav" data-dependencies="horizontal_opt">
<we-button data-select-class="" data-name="left_alignment_opt">Left</we-button>
<we-button data-select-class="justify-content-center">Center</we-button>
<we-button data-select-class="justify-content-end">Right</we-button>
</we-select>
<we-select string="Fill and justify" data-apply-to=".s_tabs_nav:first .nav" data-dependencies="horizontal_opt">
<we-button data-select-class="">Regular</we-button>
<we-button data-select-class="nav-fill">Full Width</we-button>
<we-button data-select-class="nav-justified">Equal Widths</we-button>
</we-select>
<we-divider/>
<we-button-group string="Slide" data-apply-to=".s_tabs_content:first">
<we-button class="fa fa-fw fa-long-arrow-left" title="Slide Left" data-select-class="s_tabs_slide_left"/>
<we-button class="fa fa-fw fa-long-arrow-up" title="Slide Up" data-select-class="s_tabs_slide_up"/>
<we-button class="fa fa-fw fa-long-arrow-down" title="Slide Down" data-select-class="s_tabs_slide_down"/>
<we-button class="fa fa-fw fa-long-arrow-right" title="Slide Right" data-select-class="s_tabs_slide_right"/>
<we-button class="fa fa-fw fa-ban" title="No Slide Effect" data-select-class=""/>
</we-button-group>
</div>
</xpath>
</template>
<record id="website.s_tabs_001_scss" model="ir.asset">
<field name="name">Tabs 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_tabs/001.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<!-- Template -->
<template name="Showcase" id="s_showcase">
<section class="s_showcase pt48 pb48" data-vcss="002">
<div class="container">
<div class="row g-0 s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
<div class="col-lg text-lg-end">
<div class="row">
<div class="col-lg-12 pt24 pb24" data-name="Block">
<div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
<i class="s_showcase_icon fa fa-2x fa-desktop text-secondary me-3 me-lg-0 ms-lg-3"/>
<h3>First feature</h3>
</div>
<p>A short description of this great feature.</p>
</div>
<div class="col-lg-12 pt24 pb24" data-name="Block">
<div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
<i class="s_showcase_icon fa fa-2x fa-paint-brush text-secondary me-3 me-lg-0 ms-lg-3"/>
<h3>Second feature</h3>
</div>
<p>A short description of this great feature.</p>
</div>
</div>
</div>
<div class="col-1">
<div class="w-50 h-100 border-end"/>
</div>
<div class="col-lg">
<div class="row">
<div class="col-lg-12 pt24 pb24" data-name="Block">
<div class="s_showcase_title d-flex mb-2">
<i class="s_showcase_icon fa fa-2x fa-heart text-secondary me-3"/>
<h3>Another feature</h3>
</div>
<p>A short description of this great feature.</p>
</div>
<div class="col-lg-12 pt24 pb24" data-name="Block">
<div class="s_showcase_title d-flex mb-2">
<i class="s_showcase_icon fa fa-2x fa-gift text-secondary me-3"/>
<h3>Last Feature</h3>
</div>
<p>A short description of this great feature.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container text-lg-center">
<p>
<br/>
</p>
<a href="#" class="btn btn-primary mb-2">Discover all the features</a>
</div>
</section>
</template>
<!-- Options -->
<template id="s_showcase_options" inherit_id="website.snippet_options">
<xpath expr="//div[@data-js='Box']" position="before">
<div data-js="Showcase" data-selector=".s_showcase .row > div:has(> .s_showcase_title)"/>
</xpath>
</template>
<!-- Assets -->
<record id="website.s_showcase_000_scss" model="ir.asset">
<field name="name">Showcase 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_showcase/000.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_showcase_001_scss" model="ir.asset">
<field name="name">Showcase 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_showcase/001.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_showcase_002_scss" model="ir.asset">
<field name="name">Showcase 002 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_showcase/002.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_features_grid" name="Features Grid">
<section class="s_features_grid pt48 pb24">
<div class="container">
<div class="row">
<div class="col-lg-6 s_col_no_bgcolor pb24">
<div class="row">
<div class="col-lg-12 pb24" data-name="Box">
<h2>First list of Features</h2>
<h5>Add a great slogan.</h5>
</div>
<div class="col-lg-12 pt16 pb16" data-name="Box">
<i class="fa fa-2x fa-font-awesome rounded-circle bg-primary s_features_grid_icon"/>
<div class="s_features_grid_content">
<h4>Change Icons</h4>
<p>Double click an icon to replace it with one of your choice.</p>
</div>
</div>
<div class="col-lg-12 pt16 pb16" data-name="Box">
<i class="fa fa-2x fa-files-o rounded-circle bg-primary s_features_grid_icon"/>
<div class="s_features_grid_content">
<h4>Duplicate</h4>
<p>Duplicate blocks and columns to add more features.</p>
</div>
</div>
<div class="col-lg-12 pt16 pb16" data-name="Box">
<i class="fa fa-2x fa-trash rounded-circle bg-primary s_features_grid_icon"/>
<div class="s_features_grid_content">
<h4>Delete Blocks</h4>
<p>Select and delete blocks to remove features.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 s_col_no_bgcolor pb24">
<div class="row">
<div class="col-lg-12 pb24" data-name="Box">
<h2>Second list of Features</h2>
<h5>Add a great slogan.</h5>
</div>
<div class="col-lg-12 pt16 pb16" data-name="Box">
<i class="fa fa-2x fa-magic rounded bg-secondary s_features_grid_icon"/>
<div class="s_features_grid_content">
<h4>Great Value</h4>
<p>Turn every feature into a benefit for your reader.</p>
</div>
</div>
<div class="col-lg-12 pt16 pb16" data-name="Box">
<i class="fa fa-2x fa-eyedropper rounded bg-secondary s_features_grid_icon"/>
<div class="s_features_grid_content">
<h4>Edit Styles</h4>
<p>You can edit colors and backgrounds to highlight features.</p>
</div>
</div>
<div class="col-lg-12 pt16 pb16" data-name="Box">
<i class="fa fa-2x fa-picture-o rounded bg-secondary s_features_grid_icon"/>
<div class="s_features_grid_content">
<h4>Sample Icons</h4>
<p>All these icons are completely free for commercial use.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<record id="website.s_features_grid_000_scss" model="ir.asset">
<field name="name">Features grid 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_features_grid/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_text_image" name="Text - Image">
<section class="s_text_image pt32 pb32">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 pt16 pb16">
<h2>A Section Subtitle</h2>
<p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
<p>Start with the customer – find out what they want and give it to them.</p>
<p>
<a href="#" class="btn btn-primary mb-2">Learn more</a>
</p>
</div>
<div class="col-lg-6 pt16 pb16">
<img src="/web/image/website.s_text_image_default_image" class="img img-fluid mx-auto" alt=""/>
</div>
</div>
</div>
</section>
</template>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_image_gallery" name="Image Gallery">
<section class="s_image_gallery o_slideshow s_image_gallery_show_indicators s_image_gallery_indicators_rounded pt24" data-vcss="001" data-columns="3" style="height: 500px; overflow: hidden;">
<div class="container">
<div id="slideshow_sample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="0" style="margin: 0 12px;">
<div class="carousel-inner" style="padding: 0;">
<div class="carousel-item active">
<img class="img img-fluid d-block" src="/web/image/website.library_image_08" data-name="Image" data-index="0"/>
</div>
<div class="carousel-item">
<img class="img img-fluid d-block" src="/web/image/website.library_image_03" data-name="Image" data-index="1"/>
</div>
<div class="carousel-item">
<img class="img img-fluid d-block" src="/web/image/website.library_image_02" data-name="Image" data-index="2"/>
</div>
</div>
<ul class="carousel-indicators">
<li class="o_indicators_left text-center d-none" aria-label="Previous" title="Previous">
<i class="fa fa-chevron-left"/>
</li>
<li data-bs-target="#slideshow_sample" data-bs-slide-to="0" style="background-image: url(/web/image/website.library_image_08)" class="active"/>
<li data-bs-target="#slideshow_sample" data-bs-slide-to="1" style="background-image: url(/web/image/website.library_image_03)"/>
<li data-bs-target="#slideshow_sample" data-bs-slide-to="2" style="background-image: url(/web/image/website.library_image_02)"/>
<li class="o_indicators_right text-center d-none" aria-label="Next" title="Next">
<i class="fa fa-chevron-right"/>
</li>
</ul>
<a class="carousel-control-prev o_we_no_overlay o_not_editable" href="#slideshow_sample" data-bs-slide="prev" aria-label="Previous" title="Previous">
<span class="fa fa-chevron-left fa-2x text-white"/>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next o_we_no_overlay o_not_editable" href="#slideshow_sample" data-bs-slide="next" aria-label="Next" title="Next">
<span class="fa fa-chevron-right fa-2x text-white"/>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
</section>
</template>
<template id="s_images_wall" name="Images Wall">
<section class="s_image_gallery o_spc-small o_masonry pt24 pb24" data-vcss="001" data-columns="3" style="overflow: hidden;">
<div class="container">
<div class="row s_nb_column_fixed">
<div class="o_masonry_col o_snippet_not_selectable col-lg-4">
<img class="img img-fluid d-block" src="/web/image/website.library_image_03" data-index="0" data-name="Image"/>
<img class="img img-fluid d-block" src="/web/image/website.library_image_10" data-index="3" data-name="Image"/>
</div>
<div class="o_masonry_col o_snippet_not_selectable col-lg-4">
<img class="img img-fluid d-block" src="/web/image/website.library_image_13" data-index="1" data-name="Image"/>
<img class="img img-fluid d-block" src="/web/image/website.library_image_05" data-index="4" data-name="Image"/>
</div>
<div class="o_masonry_col o_snippet_not_selectable col-lg-4">
<img class="img img-fluid d-block" src="/web/image/website.library_image_14" data-index="2" data-name="Image"/>
<img class="img img-fluid d-block" src="/web/image/website.library_image_16" data-index="5" data-name="Image"/>
</div>
</div>
</div>
</section>
</template>
<template id="s_image_gallery_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="gallery" data-selector=".s_image_gallery">
<we-row string="Images">
<we-button class="o_we_bg_success" data-add-images="true" data-no-preview="true">Add</we-button>
<we-button class="o_we_bg_danger" data-remove-all-images="true" data-no-preview="true">Remove all</we-button>
</we-row>
</div>
</xpath>
<xpath expr="." position="inside">
<div data-js="gallery" data-selector=".s_image_gallery">
<we-select string="Mode" data-dependencies="!slideshow_mode_opt">
<we-button data-mode="grid" data-name="grid_mode_opt">Grid</we-button>
<we-button data-mode="masonry" data-name="masonry_mode_opt">Masonry</we-button>
<we-button data-mode="nomode">Float</we-button>
<!-- Hidden option -->
<we-button data-mode="slideshow" data-name="slideshow_mode_opt">Slideshow</we-button>
</we-select>
<!--
TODO adapt in master: this was patched in JS to replace
data-attribute-name="interval" by data-attribute-name="bsInterval"
in order to be consistent with Bootstrap 5.
-->
<we-input string="Speed" data-dependencies="slideshow_mode_opt" data-apply-to=".carousel:first" data-select-data-attribute="0s" data-attribute-name="interval" data-unit="s" data-save-unit="ms" data-step="0.1"/>
<we-select string="Columns" data-dependencies="masonry_mode_opt, grid_mode_opt">
<we-button data-columns="1">1</we-button>
<we-button data-columns="2">2</we-button>
<we-button data-columns="3">3</we-button>
<we-button data-columns="4">4</we-button>
<we-button data-columns="6">6</we-button>
<we-button data-columns="12">12</we-button>
</we-select>
<we-range string="Images Spacing" data-dependencies="!slideshow_mode_opt" data-select-class="o_spc-none|o_spc-small|o_spc-medium|o_spc-big"/>
<we-select string="Styling" data-apply-to="img">
<we-button data-select-class="">Standard</we-button>
<we-button data-select-class="img-thumbnail">Thumbnails</we-button>
<we-button data-select-class="rounded-pill">Circle</we-button>
<we-button data-select-class="shadow">Shadows</we-button>
</we-select>
<we-select string="Arrows" data-dependencies="slideshow_mode_opt">
<we-button data-select-class="">Standard</we-button>
<we-button data-select-class="s_image_gallery_indicators_arrows_boxed">Boxed</we-button>
<we-button data-select-class="s_image_gallery_indicators_arrows_rounded">Rounded</we-button>
</we-select>
<we-checkbox string="Image Cover" data-select-class="s_image_gallery_cover" data-dependencies="slideshow_mode_opt"/>
<we-select string="Indicators" data-dependencies="slideshow_mode_opt">
<we-button data-select-class="">None</we-button>
<we-button data-select-class="s_image_gallery_show_indicators s_image_gallery_indicators_dots">Dots</we-button>
<we-button data-select-class="s_image_gallery_show_indicators">Squared Miniatures</we-button>
<we-button data-select-class="s_image_gallery_show_indicators s_image_gallery_indicators_rounded">Rounded Miniatures</we-button>
</we-select>
<t t-call="website.snippet_options_border_widgets">
<t t-set="apply_to" t-valuef="img"/>
<t t-set="so_rounded_no_dependencies" t-value="true"/>
</t>
</div>
<div data-js="gallery_img" data-selector=".s_image_gallery img">
<we-row string="Re-order" data-no-preview="true">
<we-button class="fa fa-fw fa-angle-double-left" title="Move to first" data-position="first"/>
<we-button class="fa fa-fw fa-angle-left" title="Move to previous" data-position="prev"/>
<we-button class="fa fa-fw fa-angle-right" title="Move to next" data-position="next"/>
<we-button class="fa fa-fw fa-angle-double-right" title="Move to last" data-position="last"/>
</we-row>
</div>
</xpath>
</template>
<record id="website.s_image_gallery_000_js" model="ir.asset">
<field name="name">Image gallery 000 JS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_image_gallery/000.js</field>
</record>
<record id="website.s_image_gallery_000_scss" model="ir.asset">
<field name="name">Image gallery 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_image_gallery/000.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_image_gallery_001_scss" model="ir.asset">
<field name="name">Image gallery 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_image_gallery/001.scss</field>
</record>
<record id="website.s_image_gallery_000_xml" model="ir.asset">
<field name="name">Image gallery 000 XML</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_image_gallery/000.xml</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_features" name="Features">
<section class="s_features pt32 pb32">
<div class="container">
<div class="row">
<div class="col-lg-4 pt32 pb32 text-center">
<i class="fa fa-3x fa-gear rounded bg-primary m-3"/>
<h3>First Feature</h3>
<p>
Tell what's the value for the
<br/>
customer for this feature.
</p>
</div>
<div class="col-lg-4 pt32 pb32 text-center">
<i class="fa fa-3x fa-photo rounded bg-o-color-5 m-3"/>
<h3>Second Feature</h3>
<p>
Write what the customer would like to know,
<br/>
not what you want to show.
</p>
</div>
<div class="col-lg-4 pt32 pb32 text-center">
<i class="fa fa-3x fa-leaf rounded bg-secondary m-3"/>
<h3>Third Feature</h3>
<p>
A small explanation of this great
<br/>
feature, in clear words.
</p>
</div>
</div>
</div>
</section>
</template>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_table_of_content" name="Table of Content">
<section class="s_table_of_content pt24 pb24 o_cc o_cc1">
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-3 s_table_of_content_navbar_wrap s_table_of_content_navbar_sticky s_table_of_content_vertical_navbar d-print-none d-none d-lg-block o_not_editable o_cc o_cc1" data-name="Navbar">
<div class="s_table_of_content_navbar list-group o_no_link_popover"/>
</div>
<div class="col-lg-9 s_table_of_content_main oe_structure oe_empty" data-name="Content">
<section class="pb16">
<h1 data-anchor="true">Intuitive system</h1>
<h4>What you see is what you get</h4>
<p>
Insert text styles like headers, bold, italic, lists, and fonts with
a simple WYSIWYG editor. Flexible and easy to use.
</p>
<h4>Customization tool</h4>
<p>
Click and change content directly from the front-end: no complex back
end to deal with.
</p>
<h4>Building blocks system</h4>
<p>
Create your page from scratch by dragging and dropping pre-made,
fully customizable building blocks.
</p>
</section>
<section class="pb16">
<h1 data-anchor="true">Design features</h1>
<h4>Bootstrap-based templates</h4>
<p>
Easily design your own Odoo templates thanks to clean HTML
structure and bootstrap CSS.
</p>
<h4>Professional themes</h4>
<p>
Change theme in a few clicks, and browse through Odoo's catalog of
ready-to-use themes available in our app store.
</p>
</section>
</div>
</div>
</div>
</section>
</template>
<template id="s_table_of_content_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="MultipleItems" data-selector=".s_table_of_content">
<we-row string="Content">
<we-button data-add-item="" data-item=".s_table_of_content_main > section:last" data-select-item="" data-no-preview="true" class="o_we_bg_brand_primary">
Add Item
</we-button>
</we-row>
</div>
</xpath>
<xpath expr="." position="inside">
<div data-js="TableOfContent" data-selector=".s_table_of_content"/>
<div data-js="TableOfContentNavbar" data-selector=".s_table_of_content_navbar_wrap">
<we-button-group string="Position">
<we-button class="fa fa-fw fa-long-arrow-left" title="Left" data-navbar-position="left"/>
<we-button class="fa fa-fw fa-long-arrow-up" title="Top" data-navbar-position="top"/>
<we-button class="fa fa-fw fa-long-arrow-right" title="Right" data-navbar-position="right"/>
</we-button-group>
<we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky" data-no-preview="true"/>
</div>
<div data-js="TableOfContentMainColumns" data-selector=".s_table_of_content_navbar_wrap, .s_table_of_content_main"/>
</xpath>
</template>
<record id="website.s_table_of_content_000_scss" model="ir.asset">
<field name="name">Table of content 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_table_of_content/000.scss</field>
</record>
<record id="website.s_table_of_content_000_js" model="ir.asset">
<field name="name">Table of content 000 JS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_table_of_content/000.js</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template name="Timeline" id="s_timeline">
<section class="s_timeline pt24 pb48">
<div class="container s_timeline_line">
<div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
<div class="s_timeline_date">
<span class="bg-white">
<b>2019</b>
</span>
</div>
<div class="s_timeline_content d-flex">
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
<div class="card-body">
<h5 class="card-title">Your title</h5>
<p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
</div>
</div>
<i class="fa fa-1x fa-child bg-secondary rounded-circle s_timeline_icon"/>
</div>
<div class="s_timeline_content"/>
</div>
<div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
<div class="s_timeline_date">
<span class="bg-white">
<b>2018</b>
</span>
</div>
<div class="s_timeline_content d-flex">
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
<div class="card-body">
<p class="card-text">You can edit, duplicate...</p>
</div>
</div>
<i class="fa fa-1x fa-graduation-cap bg-secondary rounded-circle s_timeline_icon"/>
</div>
<div class="s_timeline_content d-flex">
<i class="fa fa-1x fa-asterisk bg-secondary rounded-circle s_timeline_icon"/>
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
<div class="card-body">
<p class="card-text">...and switch the timeline contents to fit your needs.</p>
</div>
</div>
</div>
</div>
<div class="s_timeline_row d-block d-md-flex flex-row-reverse" data-name="Row">
<div class="s_timeline_date">
<span class="bg-white">
<b>2015</b>
</span>
</div>
<div class="s_timeline_content d-flex">
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
<div class="card-body">
<p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p>
</div>
</div>
<i class="fa fa-1x fa-bolt bg-secondary rounded-circle s_timeline_icon"/>
</div>
<div class="s_timeline_content"/>
</div>
</div>
</section>
</template>
<template id="s_timeline_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="MultipleItems" data-selector=".s_timeline">
<we-row string="Year">
<we-button data-add-item="" data-item=".s_timeline_row:first" data-select-item="" data-add-before="true" data-no-preview="true" class="o_we_bg_brand_primary">
Add Year
</we-button>
</we-row>
</div>
</xpath>
<xpath expr="." position="inside">
<div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row"/>
<div data-js="Timeline" data-selector=".s_timeline_card">
<we-button data-timeline-card="" data-no-preview="true" class="o_we_overlay_opt">
<i class="fa fa-fw fa-angle-left"/>
<i class="fa fa-fw fa-angle-right"/>
</we-button>
</div>
<div data-selector=".s_timeline">
<we-colorpicker string="Line Color" data-select-style="true" data-css-property="border-color" data-color-prefix="border-" data-apply-to=".s_timeline_line"/>
</div>
</xpath>
<xpath expr="//div[@data-js='SnippetMove'][contains(@data-selector,'section')]" position="attributes">
<attribute name="data-selector" add=".s_timeline_row" separator=","/>
</xpath>
</template>
<record id="website.s_timeline_000_scss" model="ir.asset">
<field name="name">Timeline 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_timeline/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template name="Big Boxes" id="s_color_blocks_2">
<section class="s_color_blocks_2">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 o_cc o_cc3 text-center">
<i class="fa fa-shield fa-5x m-3"/>
<h2>A color block</h2>
<p>
Color blocks are a simple and effective way to
<b>present and highlight your content</b>
. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.
</p>
<a href="#" class="btn btn-primary mb-2">More Details</a>
</div>
<div class="col-lg-6 o_cc o_cc5 text-center">
<i class="fa fa-cube fa-5x m-3"/>
<h2>Another color block</h2>
<p>
Color blocks are a simple and effective way to
<b>present and highlight your content</b>
. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.
</p>
<a href="#" class="btn btn-primary mb-2">More Details</a>
</div>
</div>
</div>
</section>
</template>
<record id="website.s_color_blocks_2_000_scss" model="ir.asset">
<field name="name">Color blocks 2 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_color_blocks_2/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_faq_collapse" name="Accordion">
<section class="s_faq_collapse pt32 pb32">
<t t-set="uniq" t-value="datetime.datetime.now().microsecond"/>
<div class="container">
<div id="myCollapse" class="accordion" role="tablist">
<div class="card bg-white" data-name="Item">
<a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_1" role="tab" data-bs-toggle="collapse" aria-expanded="true" class="card-header">Terms of service</a>
<div t-attf-id="myCollapseTab{{uniq}}_1" class="collapse show" data-bs-parent="#myCollapse" role="tabpanel">
<div class="card-body">
<p class="card-text">These terms of service ("Terms", "Agreement") are an agreement between the website ("Website operator", "us", "we" or "our") and you ("User", "you" or "your"). This Agreement sets forth the general terms and conditions of your use of this website and any of its products or services (collectively, "Website" or "Services").</p>
</div>
</div>
</div>
<div class="card bg-white" data-name="Item">
<a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_2" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header">Links to other Websites</a>
<div t-attf-id="myCollapseTab{{uniq}}_2" class="collapse" data-bs-parent="#myCollapse" role="tabpanel">
<div class="card-body">
<p class="card-text">Although this Website may be linked to other websites, we are not, directly or indirectly, implying any approval, association, sponsorship, endorsement, or affiliation with any linked website, unless specifically stated herein.</p>
<p class="card-text">You should carefully review the legal statements and other conditions of use of any website which you access through a link from this Website. Your linking to any other off-site pages or other websites is at your own risk.</p>
</div>
</div>
</div>
<div class="card bg-white" data-name="Item">
<a href="#" t-attf-data-bs-target="#myCollapseTab{{uniq}}_3" role="tab" data-bs-toggle="collapse" aria-expanded="false" class="collapsed card-header">Use of Cookies</a>
<div t-attf-id="myCollapseTab{{uniq}}_3" class="collapse" data-bs-parent="#myCollapse" role="tabpanel">
<div class="card-body">
<p class="card-text">Website may use cookies to personalize and facilitate maximum navigation of the User by this site. The User may configure his / her browser to notify and reject the installation of the cookies sent by us.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<template id="s_faq_collapse_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-selector=".s_faq_collapse">
<we-select string="Card Style">
<we-button title="Default" data-select-class="">Default</we-button>
<we-button title="Light" data-select-class="s_faq_collapse_light">Light</we-button>
<we-button title="Boxed" data-select-class="s_faq_collapse_boxed">Boxed</we-button>
<we-button title="Big" data-select-class="s_faq_collapse_big">Big</we-button>
</we-select>
<we-button-group string="Collapse Icon" data-apply-to=".card-header">
<we-button title="Left" data-select-class="" data-img="/website/static/src/img/snippets_options/pos_left.svg"/>
<we-button title="Right" data-select-class="s_faq_collapse_right_icon" data-img="/website/static/src/img/snippets_options/pos_right.svg"/>
</we-button-group>
</div>
</xpath>
</template>
<record id="website.s_faq_collapse_000_scss" model="ir.asset">
<field name="name">Faq collapse 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_faq_collapse/000.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_three_columns_moulat_lhout" inherit_id="website.s_three_columns" name="Moulat Lhout – 3 colonnes">
<!-- Première colonne -->
<xpath expr="//div[hasclass('col-lg-4')][1]" position="replace">
<div class="col-lg-4 text-center">
<img src="/theme_poissonnerie/static/src/img/moulatlhout_boutique-02.jpg" class="img-fluid rounded mb-3" alt="Notre boutique Moulat Lhout"/>
<h4 class="fw-bold">Notre Boutique</h4>
<p>Un espace accueillant où tradition et fraîcheur se rencontrent pour offrir le meilleur des produits de la mer.</p>
</div>
</xpath>
<!-- Deuxième colonne -->
<xpath expr="//div[hasclass('col-lg-4')][2]" position="replace">
<div class="col-lg-4 text-center">
<img src="/theme_poissonnerie/static/src/img/fatiha_boutique-02.jpg" class="img-fluid rounded mb-3" alt="Notre Bastila maison"/>
<h4 class="fw-bold">Bastila aux fruits de mer</h4>
<p>Une bastila délicatement feuilletée, garnie de fruits de mer frais et parfumée aux épices marocaines : un vrai régal.</p>
</div>
</xpath>
<!-- Troisième colonne -->
<xpath expr="//div[hasclass('col-lg-4')][3]" position="replace">
<div class="col-lg-4 text-center">
<img src="/theme_poissonnerie/static/src/img/fatiha_houta-01.jpg" class="img-fluid rounded mb-3" alt="Poisson frais Moulat Lhout"/>
<h4 class="fw-bold">Poissons Frais</h4>
<p>Chaque jour, une sélection des meilleurs poissons fraîchement débarqués pour satisfaire toutes vos envies marines.</p>
</div>
</xpath>
</template>
<record id="website.s_three_columns_000_scss" model="ir.asset">
<field name="name">Three columns 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_three_columns/000.scss</field>
<field name="active" eval="False"/>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_call_to_action" name="Call to Action">
<section class="s_call_to_action o_cc o_cc3 pt48 pb24">
<div class="container">
<div class="row">
<div class="col-lg-9 pb16">
<h3>
<b>50,000+ companies</b>
run Odoo to grow their businesses.
</h3>
<p>Join us and make your company a better place.</p>
</div>
<div class="col-lg-3 pt8">
<p style="text-align: right;">
<a t-att-href="cta_btn_href" class="btn btn-primary btn-lg mb-2">
<t t-esc="cta_btn_text">Contact us</t>
</a>
</p>
</div>
</div>
</div>
</section>
</template>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_banner" name="Banner">
<section class="s_banner parallax s_parallax_is_fixed pt96 pb96" data-scroll-background-ratio="1">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-6 jumbotron rounded o_cc o_cc1 pt32 pb32" data-name="Box">
<h1>
<font style="font-size: 62px;">Sell Online. Easily.</font>
</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<a t-att-href="cta_btn_href" class="btn btn-primary mb-2">
<t t-esc="cta_btn_text">Contact Us</t>
</a>
</div>
</div>
</div>
</section>
</template>
</odoo>
📂 Fichiers du thème
-
📁 views
-
📁 snippets
-
📁 models
-
📁 i18n
-
📁 data
-
📁 static
-
📁 src
-
📁 img
-
📁 photos
-
-
📁 js
-
📁 description
-
← Retour à la galerie