📁 Détails du thème : theme_treehouse
✅ Thème theme_treehouse 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_treehouse.
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 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 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é
<?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 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 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_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_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 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
-
📁 models
-
📁 data
-
📁 static
-
📁 src
-
📁 img
-
📁 content
-
-
📁 js
-
← Retour à la galerie