📁 Détails du thème : theme_nano

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

🧩 Snippets personnalisés

s_text_block.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 É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>
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_references.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 Édition directe du snippet personnalisé 
                      <?xml version="1.0" ?>
<odoo>
  <template id="s_references" name="References">
    <section class="s_references pt48 pb32">
      <div class="container">
        <h2 style="text-align: center;">Our References</h2>
        <p style="text-align: center;">We are in good company.</p>
        <div class="row">
          <div class="col-lg-2 pt16 pb16">
            <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid mx-auto" alt=""/>
          </div>
          <div class="col-lg-2 pt16 pb16">
            <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid mx-auto" alt=""/>
          </div>
          <div class="col-lg-2 pt16 pb16">
            <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid mx-auto" alt=""/>
          </div>
          <div class="col-lg-2 pt16 pb16">
            <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid mx-auto" alt=""/>
          </div>
          <div class="col-lg-2 pt16 pb16">
            <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid mx-auto" alt=""/>
          </div>
          <div class="col-lg-2 pt16 pb16">
            <img src="/web/image/website.s_reference_default_image_6" class="img img-fluid mx-auto" alt=""/>
          </div>
        </div>
      </div>
    </section>
  </template>
  <record id="website.s_references_000_scss" model="ir.asset">
    <field name="name">References 000 SCSS</field>
    <field name="bundle">web.assets_frontend</field>
    <field name="path">website/static/src/snippets/s_references/000.scss</field>
  </record>
</odoo>
s_parallax.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 Édition directe du snippet personnalisé 
                      <?xml version="1.0" ?>
<odoo>
  <template id="s_parallax" name="Parallax">
    <section class="s_parallax parallax s_parallax_is_fixed bg-black-50 o_half_screen_height" data-scroll-background-ratio="1">
      <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
      <div class="o_we_bg_filter bg-black-50"/>
      <div class="oe_structure oe_empty"/>
    </section>
  </template>
</odoo>
s_images_wall.xml 🖼️ Modifier avec image 📝 Installer ce snippet
📝 Édition directe du snippet personnalisé
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
📝 É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>
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_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