Détail d’un Thème | Moulat Lhout

🎨 Galerie d’images du thème Ouvrir la galerie

Visualisez toutes les images disponibles dans static/src/img pour le thème theme_kea. Cliquez sur une vignette pour voir l’image en taille réelle.

s_media_list.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📝 Édition directe du snippet personnalisé

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="s_media_list" inherit_id="website.s_media_list">
    
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="o_cc2 pt64 pb64" remove="o_cc1 pt32 pb32" separator=" "/>
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/01","flip":[]}</attribute>
    </xpath>
    
    <xpath expr="//div[hasclass('container')]" position="before">
        <div class="o_we_shape o_web_editor_Floats_01"/>
    </xpath>
    
    <xpath expr="(//div[hasclass('row')])[2]" position="attributes">
        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('s_media_list_img_wrapper')]" position="attributes">
        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('s_media_list_body')]" position="attributes">
        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
    </xpath>
    <xpath expr="(//img)" position="attributes">
        <attribute name="src">/web_editor/image_shape/website.s_media_list_default_image_3/web_editor/basic/bsc_organic_2.svg</attribute>
        <attribute name="data-shape">web_editor/basic/bsc_organic_2</attribute>
        <attribute name="data-original-mimetype">image/jpeg</attribute>
        <attribute name="data-file-name">s_media_list_3.svg</attribute>
        <attribute name="data-shape-colors">;;;;</attribute>
    </xpath>
        
    <xpath expr="(//div[hasclass('row')])[3]" position="attributes">
        <attribute name="class" add="flex-row-reverse" remove="o_cc o_cc1" separator=" "/>
    </xpath>
    <xpath expr="(//div[hasclass('s_media_list_img_wrapper')])[2]" position="attributes">
        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
    </xpath>
    <xpath expr="(//div[hasclass('s_media_list_body')])[2]" position="attributes">
        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
    </xpath>
    <xpath expr="(//img)[2]" position="attributes">
        <attribute name="src">/web_editor/image_shape/website.s_media_list_default_image_2/web_editor/basic/bsc_organic_2.svg</attribute>
        <attribute name="data-shape">web_editor/basic/bsc_organic_2</attribute>
        <attribute name="data-original-mimetype">image/jpeg</attribute>
        <attribute name="data-file-name">s_media_list_2.svg</attribute>
        <attribute name="data-shape-colors">;;;;</attribute>
    </xpath>
    
    <xpath expr="(//div[hasclass('row')])[4]" position="attributes">
        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
    </xpath>
    <xpath expr="(//div[hasclass('s_media_list_img_wrapper')])[3]" position="attributes">
        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
    </xpath>
    <xpath expr="(//div[hasclass('s_media_list_body')])[3]" position="attributes">
        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
    </xpath>
    <xpath expr="(//img)[3]" position="attributes">
        <attribute name="src">/web_editor/image_shape/website.s_media_list_default_image_1/web_editor/basic/bsc_organic_2.svg</attribute>
        <attribute name="data-shape">web_editor/basic/bsc_organic_2</attribute>
        <attribute name="data-original-mimetype">image/jpeg</attribute>
        <attribute name="data-file-name">s_media_list_1.svg</attribute>
        <attribute name="data-shape-colors">;;;;</attribute>
    </xpath>
    
    <xpath expr="//h3" position="replace" mode="inner">
        Comfort &amp; Ease
    </xpath>
    <xpath expr="//p" position="replace" mode="inner">
        We only use original parts or parts of equivalent quality. We make sure you get the best quality available on the market at the best price. All our interventions are guaranteed for a period of one year.
    </xpath>
    
    <xpath expr="(//h3)[2]" position="replace" mode="inner">
        Fitting design
    </xpath>
    <xpath expr="(//p)[2]" position="replace" mode="inner">
        We only use original parts or parts of equivalent quality. We make sure you get the best quality available on the market at the best price. All our interventions are guaranteed for a period of one year.
    </xpath>
    
    <xpath expr="(//h3)[3]" position="replace" mode="inner">
        Natural control
    </xpath>
    <xpath expr="(//p)[3]" position="replace" mode="inner">
        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.
    </xpath>
</template>

</odoo>

📄 Snippet hérité (website.s_media_list) :

                      <?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 &amp; 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="'&gt; .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="&gt; .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="&gt; .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="&gt; .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>

s_numbers.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📄 Snippet hérité (website.s_numbers) :

                      <?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>

s_title.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📄 Snippet hérité (website.s_title) :

                      <?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>

s_image_text.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📄 Snippet hérité (website.s_image_text) :

                      <?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>

s_cover.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📄 Snippet hérité (website.s_cover) :

                      <?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>

s_references.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📄 Snippet hérité (website.s_references) :

                      <?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>

s_text_image.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📄 Snippet hérité (website.s_text_image) :

                      <?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>

s_image_gallery.xml 🖼️ Modifier avec image 📝 Installer ce snippet

s_features.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📝 Édition directe du snippet personnalisé

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="s_features" inherit_id="website.s_features">
    
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="o_cc2 pt48 pb64" remove="pt32 pb32" separator=" "/>
    </xpath>
    
    <xpath expr="//div[hasclass('row')]/div[1]" position="attributes">
        <attribute name="class" add="o_cc o_cc1 pt48 pb48" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('row')]/div[1]/i" position="replace">
        <i class="fa fa-2x fa-image bg-o-color-1 m-3 rounded-circle"/>
    </xpath>
    <xpath expr="//div[hasclass('row')]/div[1]/h3" position="replace" mode="inner">
        <b>Stunning visuals</b>
    </xpath>
    <xpath expr="//div[hasclass('row')]/div[1]/p" position="replace" mode="inner">
        Tell what's the value for the customer for this feature.
    </xpath>
    
    <xpath expr="//div[hasclass('row')]/div[2]" position="attributes">
        <attribute name="class" add="o_cc o_cc1 pt48 pb48" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('row')]/div[2]/i" position="replace">
        <i class="fa fa-2x fa-eye bg-o-color-5 m-3 rounded-circle"/>
    </xpath>
    <xpath expr="//div[hasclass('row')]/div[2]/h3" position="replace" mode="inner">
        <b>360-degree vision</b>
    </xpath>
    <xpath expr="//div[hasclass('row')]/div[2]/p" position="replace" mode="inner">
        Write what the customer would like to know, not what you want to show.
    </xpath>
    
    <xpath expr="//div[hasclass('row')]/div[3]" position="attributes">
        <attribute name="class" add="o_cc o_cc1 pt48 pb48" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('row')]/div[3]/i" position="attributes">
        <attribute name="class" add="fa-2x fa-microphone rounded-circle" remove="fa-3x fa-leaf rounded" separator=" "/>
    </xpath>
    <xpath expr="//div[hasclass('row')]/div[3]/h3" position="replace" mode="inner">
        <b>Built in mic</b>
    </xpath>
    <xpath expr="//div[hasclass('row')]/div[3]/p" position="replace" mode="inner">
        A small explanation of this great feature, in clear words.
    </xpath>
</template>

</odoo>

📄 Snippet hérité (website.s_features) :

                      <?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>

s_picture.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📝 Édition directe du snippet personnalisé

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="s_picture" inherit_id="website.s_picture">
    
    <xpath expr="//section" position="attributes">
        <attribute name="class" add="o_cc3" remove="o_cc2" separator=" "/>
        
        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/Wavy_03","flip":["y"]}</attribute>
    </xpath>
    
    <xpath expr="//div[hasclass('container')]" position="before">
        <div class="o_we_shape o_web_editor_Wavy_03 o_we_flip_y"/>
    </xpath>
    
    <xpath expr="//h2" position="replace" mode="inner">
        Experience a new world
    </xpath>
    
    <xpath expr="//img" position="attributes">
        <attribute name="class" remove="img-thumbnail" separator=" "/>
        <attribute name="style">width: 100%;</attribute>
        <attribute name="src">/web_editor/image_shape/website.s_media_list_default_image_1/web_editor/basic/bsc_organic_2.svg</attribute>
        <attribute name="data-shape">web_editor/basic/bsc_organic_2</attribute>
        <attribute name="data-shape-colors">;;;;</attribute>
    </xpath>
    
    <xpath expr="//p" position="replace" mode="inner">
        Put yourself at the center of an extraordinary gaming universe with exclusive games.
    </xpath>
    <xpath expr="//p" position="attributes">
        <attribute name="style" add="text-align: center;" separator=" "/>
    </xpath>
    
    <xpath expr="//figcaption" position="replace">
        <figcaption class="figure-caption text-muted py-3">Watch as a living game world comes alive all around you, with a seamless field of view wherever you look.</figcaption>
    </xpath>
</template>

</odoo>

📄 Snippet hérité (website.s_picture) :

                      <?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>

s_color_blocks_2.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📝 Édition directe du snippet personnalisé

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="s_color_blocks_2" inherit_id="website.s_color_blocks_2">
    
    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
        <attribute name="class" add="oe_img_bg o_bg_img_center pt256 pb256" separator=" " />
        <attribute name="style">background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 0%;</attribute>
    </xpath>
    <xpath expr="//h2" position="before">
        <div class="o_we_bg_filter bg-black-50"></div>
    </xpath>
    
    <xpath expr="//div[hasclass('col-lg-6')]//i" position="replace" />  
    
    <xpath expr="//div[hasclass('col-lg-6')]//h2" position="replace" mode="inner">
        Multiplayer
    </xpath>
    
    <xpath expr="//div[hasclass('col-lg-6')]//p" position="replace" mode="inner">
        Conquer leaderboards, crush workouts, create with friends and more. Get lost in a growing library of VR classics and all-new experiences.
    </xpath>                
    
    <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
        <attribute name="class" add="oe_img_bg o_bg_img_center pt256 pb256" remove="" separator=" " />
        <attribute name="style">background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 0%;</attribute>
    </xpath>
    <xpath expr="(//h2)[2]" position="before">
        <div class="o_we_bg_filter bg-black-50"></div>
    </xpath>
    
    <xpath expr="//div[hasclass('col-lg-6')][2]//i" position="replace" />
    
    <xpath expr="//div[hasclass('col-lg-6')][2]//h2" position="replace" mode="inner">
        Freedom
    </xpath>
    
    <xpath expr="//div[hasclass('col-lg-6')][2]//p" position="replace" mode="inner">
        No matter who you are, with a growing library of games and experiences there is no limit to where you can go and what you can do in virtual reality.
    </xpath>
</template>

</odoo>

📄 Snippet hérité (website.s_color_blocks_2) :

                      <?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>

s_three_columns.xml 🖼️ Modifier avec image 📝 Installer ce snippet

📄 Snippet hérité (website.s_three_columns) :

                      <?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>

📁 Détails du thème : theme_kea

🧩 Snippets personnalisés

📂 Fichiers du thème