📁 Détails du thème : theme_yes
✅ Thème theme_yes dupliqué avec succès.
🧬 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_yes.
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é
📝 É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_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é
📝 É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_popup" name="Popup">
<div class="s_popup o_snippet_invisible" data-vcss="001">
<div class="modal fade s_popup_middle" style="background-color: var(--black-50) !important;" data-show-after="5000" data-display="afterDelay" data-consents-duration="7" data-bs-focus="false" data-bs-backdrop="false" tabindex="-1" role="dialog">
<div class="modal-dialog d-flex">
<div class="modal-content oe_structure">
<div class="s_popup_close js_close_popup o_we_no_overlay o_not_editable" aria-label="Close">×</div>
<section class="s_banner oe_img_bg o_bg_img_center pt96 pb96" data-snippet="s_banner" style="background-image: url('/web/image/website.s_popup_default_image');">
<div class="container">
<div class="row s_nb_column_fixed">
<div class="col-lg-10 offset-lg-1 text-center o_cc o_cc1 jumbotron pt48 pb48">
<h2>
<font style="font-size: 62px;">Win $20</font>
</h2>
<p class="lead">Check out now and get $20 off your first order.</p>
<a href="#" class="btn btn-primary mb-2">New customer</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</template>
<template id="s_popup_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<t t-set="base_popup_options">
<we-select string="Position" data-dependencies="layout_popup_opt">
<!-- When cookie configuration only display this for popup mode -->
<we-button data-select-class="s_popup_top" data-name="position_top">Top</we-button>
<we-button data-select-class="s_popup_middle" data-name="position_middle">Middle</we-button>
<we-button data-select-class="s_popup_bottom" data-name="position_bottom">Bottom</we-button>
</we-select>
<we-select string="Size" data-apply-to=".modal-dialog" data-name="s_popup_size_opt">
<we-button data-select-class="modal-sm">Small</we-button>
<we-button data-select-class="" data-name="s_popup_size_md">Medium</we-button>
<we-button data-select-class="modal-lg">Large</we-button>
<we-button data-select-class="modal-xl">Extra Large</we-button>
<we-button data-select-class="s_popup_size_full" data-name="s_popup_size_full">Full</we-button>
</we-select>
<we-row string="Backdrop">
<we-checkbox data-name="popup_backdrop_opt" data-select-class="s_popup_no_backdrop|" data-set-backdrop="true" data-no-preview="true"/>
<we-colorpicker data-dependencies="popup_backdrop_opt" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-" data-css-compatible="true"/>
</we-row>
</t>
<t t-set="extra_popup_options">
<we-colorpicker string="Close Button Color" data-select-style="true" data-css-property="color" data-color-prefix="text-" data-apply-to=".s_popup_close"/>
<we-select string="Display" data-attribute-name="display" data-attribute-default-value="always">
<we-button data-select-data-attribute="afterDelay" data-name="show_delay">Delay</we-button>
<we-button data-select-data-attribute="mouseExit">On Exit</we-button>
</we-select>
<we-input string="⌙ Delay" title="Automatically opens the pop-up if the user stays on a page longer than the specified time." data-select-data-attribute="" data-attribute-name="showAfter" data-unit="s" data-save-unit="ms" data-dependencies="show_delay"/>
<t t-set="unit_popup_duration">days</t>
<we-input string="Hide For" title="Once the user closes the popup, it won't be shown again for that period of time." t-attf-data-select-data-attribute="7#{unit_popup_duration}" data-attribute-name="consentsDuration" t-att-data-unit="unit_popup_duration"/>
<we-select string="Show on" data-no-preview="true">
<we-button data-move-block="moveToBody">This page</we-button>
<we-button data-move-block="moveToFooter">All pages</we-button>
</we-select>
</t>
<div data-js="SnippetPopup" data-selector=".s_popup" data-exclude="#website_cookies_bar" data-target=".modal" data-drop-in=":not(p).oe_structure:not(.oe_structure_solo):not([data-snippet] *), :not(.o_mega_menu):not(p)[data-oe-type=html]:not([data-snippet] *)">
<t t-out="base_popup_options"/>
<t t-out="extra_popup_options"/>
</div>
<div data-js="SnippetPopup" data-selector=".s_popup#website_cookies_bar" data-target=".modal">
<t t-out="base_popup_options"/>
</div>
</xpath>
</template>
<record id="website.s_popup_000_scss" model="ir.asset">
<field name="name">Popup 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_popup/000.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_popup_000_js" model="ir.asset">
<field name="name">Popup 000 JS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_popup/000.js</field>
</record>
<record id="website.s_popup_001_scss" model="ir.asset">
<field name="name">Popup 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_popup/001.scss</field>
</record>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_carousel" name="Carousel">
<section class="s_carousel_wrapper" data-vxml="001">
<t t-set="uniq" t-value="datetime.datetime.now().microsecond"/>
<div t-attf-id="myCarousel{{uniq}}" class="s_carousel s_carousel_default carousel slide" data-bs-interval="10000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li t-attf-data-bs-target="#myCarousel{{uniq}}" data-bs-slide-to="0" class="active"/>
<li t-attf-data-bs-target="#myCarousel{{uniq}}" data-bs-slide-to="1"/>
<li t-attf-data-bs-target="#myCarousel{{uniq}}" data-bs-slide-to="2"/>
</ol>
<!-- Content -->
<!-- TODO in master: remove the `content` classes in the div with
the class `row`, to avoid having unwanted dropzones when
dragging inner content. -->
<div class="carousel-inner">
<!-- #01 -->
<div class="carousel-item active oe_img_bg o_bg_img_center pt152 pb152" style="background-image: url('/web/image/website.s_carousel_default_image_1');" data-name="Slide">
<div class="container oe_unremovable">
<div class="row content">
<div class="carousel-content col-lg-6">
<h2>
<font style="font-size: 62px;">Slide Title</font>
</h2>
<p class="lead">Use this snippet to presents your content in a slideshow-like format. Don't write about products or services here, write about solutions.</p>
<p>
<a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
</p>
</div>
</div>
</div>
</div>
<!-- #02 -->
<div class="carousel-item oe_img_bg o_bg_img_center pt96 pb96" style="background-image: url('/web/image/website.s_carousel_default_image_2');" data-name="Slide">
<div class="container oe_unremovable">
<div class="row content">
<div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40">
<h2 style="font-size: 62px;">Clever Slogan</h2>
<div class="s_hr pt8 pb24" data-snippet="s_hr" data-name="Separator">
<hr class="w-25 mx-auto" style="border-top-width: 1px; border-top-style: solid;"/>
</div>
<p class="lead">
Storytelling is powerful.
<br/>
It draws readers in and engages them.
</p>
<p>
<a href="/" class="btn btn-primary mb-2">Start your journey</a>
</p>
</div>
</div>
</div>
</div>
<!-- #03 -->
<div class="carousel-item oe_img_bg o_bg_img_center pt128 pb128" style="background-image: url('/web/image/website.s_carousel_default_image_3');" data-name="Slide">
<div class="container oe_unremovable">
<div class="row content">
<div class="carousel-content col-lg-6 offset-lg-6">
<h2>
<font style="font-size: 62px; background-color: rgb(255, 255, 255);">Edit this title</font>
</h2>
<h4>
<font style="background-color: rgb(255, 255, 255);">Good writing is simple, but not simplistic.</font>
</h4>
<p>
<br/>
</p>
<p>Good copy starts with understanding how your product or service helps your customers. Simple words communicate better than big words and pompous language.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev o_not_editable" contenteditable="false" t-attf-href="#myCarousel{{uniq}}" data-bs-slide="prev" role="img" aria-label="Previous" title="Previous">
<span class="carousel-control-prev-icon"/>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next o_not_editable" contenteditable="false" t-attf-href="#myCarousel{{uniq}}" data-bs-slide="next" role="img" aria-label="Next" title="Next">
<span class="carousel-control-next-icon"/>
<span class="visually-hidden">Next</span>
</a>
</div>
</section>
</template>
</odoo>
📝 Édition directe du snippet personnalisé
<?xml version="1.0" ?>
<odoo>
<template id="s_picture" name="Picture">
<section class="s_picture pt48 pb24 o_cc o_cc2">
<div class="container">
<h2 style="text-align: center;">
<font style="font-size: 62px;">A punchy Headline</font>
</h2>
<p style="text-align: center;">
Choose a vibrant image and write an inspiring paragraph about it.
<br/>
It does not have to be long, but it should reinforce your image.
</p>
<p style="text-align: center;">
<br/>
</p>
<div class="row s_nb_column_fixed">
<div class="col-lg-10 offset-lg-1 pb24" style="text-align: center;">
<figure class="figure">
<img src="/web/image/website.s_picture_default_image" class="figure-img img-fluid img-thumbnail padding-large" alt=""/>
<figcaption class="figure-caption text-muted py-3">Add a caption to enhance the meaning of this image.</figcaption>
</figure>
</div>
</div>
</div>
</section>
</template>
</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
-
📁 models
-
📁 data
-
📁 static
-
📁 src
-
📁 img
-
📁 snippets
-
📁 js
-
📁 old_snippets
-
📁 s_banner_parallax
-
📁 s_products_carousel
-
-
📁 description
-
← Retour à la galerie