Thinking "modular"

An Odoo theme is not a folder containing HTML or PHP files, it’s a modular framework written in XML. Never worked with XML files before? Don’t worry, after following the tutorial, you’ll be able to create your first theme with only basic knowledge of HTML.

Using classical web design workflows, you usually code the layout of the entire page. The result of this is a “static” web page. You can update the content, of course, but your client will need you to work on making even basic changes.

Creating themes for Odoo is a total change of perspective. Instead of defining the complete layout for a page, you can create blocks (snippets) at let the user choose where to “drag&drop” them, creating the page layout on their own. We call this modular design.

Imagine an Odoo theme as a “list” of elements and options that you have to create and style. As a designer, your goal is to style these elements in order to achieve a wonderful result, regardless of where the end user chooses to place them.

Let’s take a tour of our “list” elements:

Snippets (or building-blocks)	Pages
A piece of HTML code. The user will drag & drop, modify and combine them using our built-in Website Builder interface. You can define sets of options and styles for each snippet. The user will choose from them according to their needs.	These are normal web pages, except that they will be editable by the final user and that you can define an empty area that the user can “fill” by dragging snippets into it.
Styles	Functionalities
Styles are defined using standard CSS files (or Less/Sass). You can define a style as default or optional. The default styles are always active in your theme, the optional styles can be enabled or disabled by the user.	Thanks to Odoo’s modularity, everything can be personalized even more. This means there are endless possibilities for your creativity. Adding functionalities is easy and it’s simple to provide the end user with customizable options.

Odoo's XML files, an overview

Any Odoo XML file starts with encoding specifications. After that, you have to write your code inside a<data>tag, placed into an</odoo>tag.

[XML]
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
  <data>
    ## YOUR CODE HERE
  </data>
</odoo>

Almost every element and option that you create has to be placed inside a<template>tag, like in this example.

[XML]
<template id="my_title" name="My title">
  <h1>This is an HTML block</h1>
  <h2 class="lead">And this is a subtitle</h2>
</template>

Important

don't misunderstand whattemplatemeans. A template tag only defines a piece of html code or options - but it does not necessarily coincide with a visual arrangement of elements.

The previous code defines a title, but it will not be displayed anywhere because that_template_is not associated with any part of theOdoo default structure. In order to do that you can usexpath,qWebor a combination of both.

Keep reading the tutorial to learn to how properly extend it with your own code.

Update your theme

Since XML files are only loaded when you install the theme, you will have to force reloading every time you make changes on an xml file.

To do that, click on the Upgrade button in the module’s page.