Szablon strony

Budowanie szablonów (theme) jest w Odoo wyjątkowo łatwe. Nie trzeba nawet kompilować styli (css) - wystarczy zbudować ich opis w języku Less. Aby otrzymać nowy wygląd stron, trzeba zmienić dwa szablony:

• website.assets_frontend - dołączane do strony (w nagłówku) arkusze i skrypty
• website.layout - właściwy opis strony

Można je modyfikować fragmentami. Na przykład dołączamy tylko swój arkusz styli:

<template id="demo_assets_common" name="demo assets" inherit_id="website.assets_frontend">
  <xpath expr="." position="inside">
   <link rel="stylesheet"  href="/my_theme/static/src/css/my_theme.less" 
    type="text/css" media="all"></link>
  </xpath>
</template>

Wprowadzenie własnej stopki:

<template id="website.layout_footer_demo" inherit_id="website.layout" name="Footer">
<xpath expr="//footer" position="replace">
  <footer style="background-color:#cfd2d6">
     <div class="container">
          <div class="pull-left text-muted">
Moja stopka
          </div>
      </div>
    </footer>
  </xpath>
</template>

Dodane nagłówka strony:

<template id="demo_top" name="demo_top" inherit_id="website.layout">
  <xpath expr="//div[@id='wrapwrap']" position="before">
   <div id="toolbar" class="toolbar">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="toolbar-container">
              <aside id="text-2" class="widget widget_text">
                <div class="textwidget">
                  <div class="thim-have-any-question">Napisz do nas                             
                    <div class="mobile">
                      <i class="fa fa-phone"></i>
                      <a href="http://www.galicea.org" class="value">Funacja Galicea</a>
                    </div>
                    <div class="email">
                      <i class="fa fa-envelope"></i>
                      <a href="mailto:demo@galicea.org">demo@galicea.org</a>
                    </div>
                  </div>
                  <div class="thim-have-any-question pull-right">DEMO</div>
                </div>
              </aside>
            </div>
          </div>
        </div>
      </div>
    </div>
  </xpath>
</template>

Oczywiście zamiast position="before" możemy wpisać position="replace" i zmienić wszystko!