Structure of an Odoo page

An Odoo page is the visual result of a combination of 2 kind of elements,cross-pagesandunique. By default, Odoo provides you with aHeaderand aFooter(cross-pages) and a unique main element that contains the content that makes your page unique.

Note

Cross-pages elements will be the same on every page. Unique elements are related to a specific page only.

To inspect the default layout, simply create a new page using the Website Builder. Click on Content ‣ New Page and add a page name. Inspect the page using your browser.

<div id=“wrapwrap”>
  <header />
  <main />
  <footer />
</div>

Extend the default Header

By default, Odoo header contains a responsive navigation menu and the company’s logo. You can easily add new elements or style the existing one.

To do so, create alayout.xmlfile in yourviewsfolder and add the default Odoo xml markup.

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

  </data>
</odoo>

Create a new template into the<data>tag, copy-pasting the following code.

<!-- Customize header  -->
<template id="custom_header" inherit_id="website.layout" name="Custom Header">

  <!-- Assign an id  -->
  <xpath expr="//div[@id='wrapwrap']/header" position="attributes">
    <attribute name="id">my_header</attribute>
  </xpath>

  <!-- Add an element after the top menu  -->
  <xpath expr="//div[@id='wrapwrap']/header/div" position="after">
    <div class="container">
      <div class="alert alert-info mt16" role="alert">
        <strong>Welcome</strong> in our website!
      </div>
    </div>
  </xpath>
</template>

The first xpath will add the idmy_headerto the header. It’s the best option if you want to target css rules to that element and avoid these affecting other content on the page.

Warning

Be careful replacing default elements attributes. As your theme will extend the default one, your changes will take priority in any future Odoo’s update.

The second xpath will add a welcome message just after the navigation menu.

The last step is to add layout.xml to the list of xml files used by the theme. To do that, edit your__manifest__.pyfile like this

'data': [ 'views/layout.xml' ],

Update your theme

Great! We successfully added an id to the header and an element after the navigation menu. These changes will be applied to each page of the website.