📁 Détails du thème : theme_clean

🧬 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_clean. Cliquez sur une vignette pour voir l’image en taille réelle.

🧩 Snippets personnalisés

s_product_catalog.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 Édition directe du snippet personnalisé
                      <?xml version="1.0" ?>
<odoo>
  <template id="s_product_catalog" name="Pricelist">
    <section class="s_product_catalog oe_img_bg o_bg_img_center oe_custom_bg pt48 pb32" style="background-image: url('/web/image/website.s_product_catalog_default_image');" data-vcss="001">
      <div class="container">
        <h2>Menu</h2>
        <p>Add a menu description.</p>
        <div class="row">
          <div class="col-lg-6 pt16 pb16">
            <h3>Starter</h3>
            <ul class="list-unstyled my-3">
              <t t-call="website.s_product_catalog_dish">
                <t t-set="name">Cheese Onion Rings</t>
                <t t-set="price">$9.00</t>
              </t>
              <t t-call="website.s_product_catalog_dish">
                <t t-set="name">Chefs Fresh Soup of the Day</t>
                <t t-set="price">$7.50</t>
              </t>
              <t t-call="website.s_product_catalog_dish">
                <t t-set="name">Beef Carpaccio</t>
                <t t-set="price">$10.50</t>
              </t>
            </ul>
          </div>
          <div class="col-lg-6 pt16 pb16">
            <h3>Main Course</h3>
            <ul class="list-unstyled my-3">
              <t t-call="website.s_product_catalog_dish">
                <t t-set="name">Filet Mignon 8oz</t>
                <t t-set="price">$15.50</t>
              </t>
              <t t-call="website.s_product_catalog_dish">
                <t t-set="name">Farm Friendly Chicken Supreme</t>
                <t t-set="price">$15.50</t>
              </t>
              <t t-call="website.s_product_catalog_dish">
                <t t-set="name">Tuna and Salmon Burger</t>
                <t t-set="price">$12.00</t>
              </t>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </template>
  <template id="s_product_catalog_dish">
    <li class="s_product_catalog_dish" data-name="Product">
      <p class="s_product_catalog_dish_title d-flex align-items-baseline pb-2">
        <span t-esc="name" class="s_product_catalog_dish_name s_product_catalog_dish_dot_leaders"/>
        <span t-esc="price" class="s_product_catalog_dish_price ms-auto ps-2"/>
      </p>
    </li>
  </template>
  <template id="s_product_catalog_add_product_widget">
    <we-row string="Product">
      <we-button data-add-item="" data-item=".s_product_catalog_dish:last" data-select-item="" t-att-data-apply-to="apply_to" data-no-preview="true" class="o_we_bg_brand_primary">
            Add Product
        </we-button>
    </we-row>
  </template>
  <template id="s_product_catalog_options" inherit_id="website.snippet_options">
    <xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
      <div data-js="MultipleItems" data-selector=".s_product_catalog">
        <t t-call="website.s_product_catalog_add_product_widget">
          <t t-set="apply_to" t-valuef="&gt; :has(.s_product_catalog_dish):not(:has(.row &gt; div:has(.s_product_catalog_dish)))"/>
        </t>
      </div>
      <div data-js="MultipleItems" data-selector=".s_product_catalog .row &gt; div">
        <t t-call="website.s_product_catalog_add_product_widget">
          <t t-set="apply_to" t-valuef="&gt; :has(.s_product_catalog_dish)"/>
        </t>
      </div>
    </xpath>
    <xpath expr="." position="inside">
      <div data-js="ProductCatalog" data-selector=".s_product_catalog">
        <we-checkbox string="Descriptions" data-toggle-description="true" data-no-preview="true"/>
        <t t-call="website.snippet_options_border_line_widgets">
          <t t-set="label">⌙ Separator</t>
          <t t-set="direction" t-value="'top'"/>
          <t t-set="apply_to" t-value="'.s_product_catalog_dish_description'"/>
          <!-- Note: no need of extra dependency thanks to the apply-to -->
        </t>
      </div>
      <div data-selector=".s_product_catalog_dish" data-drop-near=".s_product_catalog_dish"/>
    </xpath>
    <xpath expr="//div[@data-js='SnippetMove']" position="attributes">
      <attribute name="data-selector" add=".s_product_catalog_dish" separator=","/>
    </xpath>
  </template>
  <record id="website.s_product_catalog_001_scss" model="ir.asset">
    <field name="name">Product catalog 001 SCSS</field>
    <field name="bundle">web.assets_frontend</field>
    <field name="path">website/static/src/snippets/s_product_catalog/001.scss</field>
  </record>
</odoo>
                    
s_numbers.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 Édition directe du snippet personnalisé
                      <?xml version="1.0" ?>
<odoo>
  <template name="Numbers" id="s_numbers">
    <section class="s_numbers o_cc o_cc2 pt24 pb24">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 text-center pt24 pb24">
            <span class="s_number display-4">12</span>
            <h6>Useful options</h6>
          </div>
          <div class="col-lg-3 text-center pt24 pb24">
            <span class="s_number display-4">45</span>
            <h6>Beautiful snippets</h6>
          </div>
          <div class="col-lg-3 text-center pt24 pb24">
            <span class="s_number display-4">8</span>
            <h6>Amazing pages</h6>
          </div>
          <div class="col-lg-3 text-center pt24 pb24">
            <span class="s_number display-4">37</span>
            <h6>Outstanding images</h6>
          </div>
        </div>
      </div>
    </section>
  </template>
  <!-- No associated CSS but there is some in theme overrides -->
</odoo>
                    
s_title.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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>
                    
s_image_text.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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>
                    
s_cover.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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>
                    
s_quotes_carousel.xml 🖼️ Modifier avec image 📝 Installer ce snippet
s_comparisons.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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 &amp; marketing for up to 2 users</li>
                <li class="list-group-item">Account &amp; 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>
                    
s_text_image.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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>
                    
s_features.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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>
                    
s_carousel.xml 🖼️ Modifier avec image 📝 Installer ce snippet
s_color_blocks_2.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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>
                    
s_three_columns.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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>
                    
s_call_to_action.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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>
                    
s_banner.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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



← Retour à la galerie