A surface impression of the new odoo themes

Website layout with new possiblities

Robert Rübner

General and Requirements

The frontend layout of odoo was accomplished by bootswatch at the beginning. This possibility is still valid even in version 9 of odoo. But Currently there are new themes in development written in less and not bound to bootswatch anymore. These new themes have also the convention that a theme module is an odoo module without python logic. However the new themes provide more customize possibilities than the bootswatch themes. Every theme has its own presets, options, snippets etc. to provide several customize selections. Even now the first themes are offered for sale in the odoo app store. If you want to use the new themes you can't use the bootswatch themes anymore. Furthermore you can only use one new theme at the same time for now, means you can't switch between several new themes.

Odoo also provides the possibility to develop own themes. You can use the scaffolding function of odoo which was introduced at the end of may in 2014 and which was extended by the possibility to create a theme module at the beginning of September in 2014. But the newly created module has only a very simple base structure of the new themes.

You need a running odoo instance at least in version 8 and you need less and the related plugin clean-css to use the new themes. Installation and configuration of odoo and less are not part of this blog post. You will find several information in the internet like the installation guide of odoo.

The New Theme Structur 

The new themes require 3 modules based on the themes Clean and Enark. 2 modules provide the basis, website_less and theme_common, and the 3. module is the theme module, theme_clean or theme_enark. I will only reference the theme module theme_enark in my blog post because theme_clean has a similar structure.

The module website_less is the basis for using themes written only in less. There is no need anymore to compile less to css files for these themes. Moreover this module updates the frontend editor, it deactivates the bootswatch themes and it changes exitsing templates and snippets to use them with the new themes. If you only install this module you can already see and use the new "Customize Theme" menu in a simple way.

You can see the common structure of the module website_less below.

website_less
 |__ controllers
 |__ static
      |__ src
           |__ css
           |__ img
           |__ js
           |__ less
                |__ options
                |__ colors.less
                |__ customize_modal.less
                |__ fonts.less
                |__ padding.less
                |__ theme.less
 |__ views
      |__ snippets.xml
      |__ themes.xml
      |__ website_backend_navbar.xml
      |__ website_templates.xml
 |__ __init__.py
 |__ __openerp__.py
 |__ ir_attachment.py
 |__ ir_qweb.py
 |__ website.py

The module theme_common is a kind of snippet library. It contains several basis snippets which can be used and extended by the theme modules. The "Customize Theme" menu is not updated by this module. You can see the common structure of the module theme_common below.

theme_common
 |__ data
      |__ image_content.xml
 |__ demo
      |__ demo.xml
 |__ static
      |__ src
           |__ font
           |__ img
           |__ js
                |__ s_progress_bar.js
           |__ less
 |__ views
 |__ __init__.py
 |__ __openerp__.py

The module theme_enark is the theme module. Here you will find all presets, images, snippets and snippet options which characterize the theme layout. There is a detail page for all themes in the odoo app store which presents all features for each theme. In addition there is also a live demo page for each theme. After installing the module you will see an updated "Customize Theme" menu.

You can see the common structure of the module theme_enark below.

theme_enark
 |__ demo
 |__ static
      |__ description
      |__ src
           |__ img
           |__ less
                |__ options
                |__ colors.less
                |__ customize_modal.less
                |__ padding.less
                |__ theme.less
 |__ views
      |__ assets.xml
      |__ customize_modal.xml
      |__ image_content.xml
      |__ image_library.xml
      |__ snippets_options.xml
      |__ snippets.xml
 |__ __init__.py
 |__ __openerp__.py

The new "Customize Theme" Menu

You can extend the "Customize Theme" menu just as you like. You can inherit it like website templates because the menu is a qweb template too. You can easily update the different option selections in the "Customize Theme" menu because they are also based on qweb templates. I want to show how the option selection works in the "Customize Theme" menu with a simple example

You find the code part in the file views/customize_modal.xml of the theme module theme_enark. If you select the first left option below the section "SELECT A BACKGROUND" the following input field will be activated.

<label class="clean-bg-layout-combi">
    <img src="/theme_enark/static/src/img/customize/bg_preset_1.gif" alt="LIGHT" class="clean-bg-layout-combi-img"/>
    <input id="bgvar-1" name="bgcolorvar" type="radio" data-xmlid="theme_enark.option_bg_preset_1"/>
</label>

This input field has an attribute data-xmlid: theme_enark.option_bg_preset_1. Odoo knows now which template needs to be loaded which is shown below.

<template id="option_bg_preset_1" name="option_bg_preset_1" inherit_id="website.theme" active="True">
    <xpath expr="." position="inside"><link href="/theme_enark/sta...ss/options/bg_preset_1.less" rel="stylesheet" type="text/less"/></xpath>
</template>

This template contains a less file which has all layout updates for the selected option. You will see the page updates after a short moment, there is no need to reload the page.

The option selection in the "Customize Theme" menu works in that way: You choose an option and the related less file is loaded in the background.

Conclusion

The new themes provide several possibilities how you can customize the layout of your page in a new way. The themes use existing odoo implementations like snippets and also extend them as you can see at the new "Customize Theme" menu for it. You can't switch between several new themes now but in my opinion the new customize possibilities are a good compensation. You also can easily extend the new themes which was also possibly with the bootswatch themes but now you can do much more customization than with the bootswatch themes. I look forward to the new themes and I'm excited to see what will be possible with the new themes in the future.

About Robert Rübner

The python and odoo ninja/ We've heard some people call him Yoda/ Got a smartphone some months ago.