1. Basic set up

Create a basic theme module with odoo.py scaffold and the theme template: from the root Odoo folder, use

              $ ./odoo.py scaffold -t theme "Dummy Theme" addons
              

this should create a new folder dummy_theme in the addons directory with the structure:

              addons/dummy_theme
              |-- __init__.py
              |-- __openerp__.py
              |-- static
              |   `-- style
              |       `-- custom.less
              `-- views
                  |-- options.xml
                  |-- pages.xml
                  `-- snippets.xml
              

static/style contains your stylesheet(s), views contains the various XML files describing the theme and theme features to Odoo.

2. Static Page

Creating a new template

Create a new file odoo/addons/theme_dummy/views/pages.xml and open it.

                  <template id="website.hello" name="Homepage" page="True">
                      <t t-call="website.layout">
                          <div id="wrap" class="oe_structure oe_empty">
                          </div>
                      </t>
                  </template>
              

Comment the lines about options.xml and pages.xml in __openerp__.py.

Run the server and update the theme (./odoo.py -u dummy_theme), then install the theme in the settings menu.

              Go to http://localhost:8069/page/hello feel the hit.
              

3. Editing content on a page

You can now add your content! You should always use the Bootstrap structure as below:

              <template id="website.hello" name="Homepage" page="True">
    <t t-call="website.layout">
        <div id="wrap" class="oe_structure oe_empty">
            <section>
                <div class="container">
                    <div class="row">
                        <h1>This is Your Content</h1>
                        <p>Isn't amazing to edit everything inline?</p>
                        <hr/>
                    </div>
                </div>
            </section>
        </div>
    </t>
</template>

Adding new item in the menu

Adding these few more lines will put the new page in your menu:

<record id="hello_menu" model="website.menu">
    <field name="name">Hello</field>
    <field name="url">/page/hello</field>
    <field name="parent_id" ref="website.main_menu"/>
    <field name="sequence" type="int">20</field>
</record>

styling with less

In odoo/addons/theme_dummy/static create a new folder and name it style. In the new folder odoo/addons/theme_dummy/static/style create a file and name it custom.less. Open custom.less in the text editor and modify these lines as below:

h1 {
    color: #215487;
}
span {
    border: 2px solid black;
    background-color: #eee;
}

Compile your file (http://lesscss.org/usage/#command-line-usage) to get the custom.css file.

Add this asset to your template in page.xml:

<template id="dummy_theme_asset" name="website assete for Dummy theme" inherit_id="website.assets_frontend">
    <xpath expr="." position="inside">
        <link rel="stylesheet" href="/dummy_theme/static/style/custom.css"/>
    </xpath>
</template>

Easy layout with bootstrap

Open odoo/addons/theme_dummy/views/pages.xml and add a new section:

<section>
    <div class="container">
        <div class="row">
            <div class="alert alert-primary" role="alert">
                <a href="#" class="alert-link">...</a>
            </div>
            <div class="col-md-6 bg-blue">
                <h2>BLUE it!</h2>
            </div>
            <div class="col-md-6 bg-green">
                <h2>GREEN THAT!</h2>
            </div>
        </div>
    </div>
</section>

Build Your First Snippet

Open __openerp__.py and add a new line as below:

{
    'name': 'Dummy Theme',
    'description': 'Dummy Theme',
    'category': 'Website',
    'version': '1.0',
    'author': 'OpenERP SA',
    'depends': ['website'],
    'data': [
        'views/snippets.xml',
    ],
    'application': True,
}

In odoo/addons/theme_learn/views create a new xml file, name it snippets.xml and open it in a text editor

Add your snippet in the menu

Before typing your html code, you need to locate it in the WEBb. drop-down menu. In this case, we will add it at the end of the Structure section:

<template id="snippets" inherit_id="website.snippets" name="Clean Theme snippets">
  <xpath expr="//div[@id='snippet_structure']" position="inside">
  </xpath>
</template>

Now open a new div, do not give it any id or classes. It will contain your snippet:

<xpath expr="//div[@id='snippet_structure']" position="inside">
    <div>
    </div>
</xpath>

A thumbnail is also needed to create a more attractive link in the menu. You can use labels to focus on your themes snippets. Simply add a new div with the class oe_snippet_thumbnail and add your thumbnail image (100x79px):

<xpath expr="//div[@id='snippet_structure']" position="inside">
    <div>
        <div class="oe_snippet_thumbnail">
            <img class="oe_snippet_thumbnail_img" src="/theme_Dummy/static/img/blocks/block_title.png"/>
            <span class="oe_snippet_thumbnail_title">SNIP IT!</span>
        </div>
    </div>
</xpath>

Your new snippet is now ready to use. Just drag and drop it on your page to see it in action.

The snippet body

A snippet has to be in a section with the class oe_snippet_body to work correctly. As Odoo use the Bootstrap framework, you have use containers and rows to hold your content. Please refer the the Bootstrap documentation:

<xpath expr="//div[@id='snippet_structure']" position="inside">
    <div>
        <div class="oe_snippet_thumbnail">
            <img class="oe_snippet_thumbnail_img" src="/theme_Dummy/static/img/blocks/block_title.png"/>
            <span class="oe_snippet_thumbnail_title">SNIP IT!</span>
        </div>

        <section class="oe_snippet_body fw_categories">
            <div class="container">
                <div class="row">
                </div>
            </div>
        </section>
    </div>
</xpath>

Inside your fresh new row, add some bootstraped contents:

<div class="col-md-12 text-center mt32 mb32">
    <h2>A great Title</h2>
    <h3 class="text-muted ">And a great subtitle too</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>

Adding images to your snippet

Put your images in odoo/addons/theme_dummy/static/img, or in sub-folders if needed. Open odoo/addons/theme_dummy/static/style/custom.less, add these lines

@img-01: url("../img/img-boy.png");
.dummy-boy { background-image: @img-01; }

@img-02: url("../img/img-girl.png");
.dummy-girl { background-image: @img-02; }

In odoo/addons/theme_dummy/views/pages.xml change the correspondant lines as below:

<div class="row">
    <div class="col-md-12 text-center mt32 mb32">
        <h2 class="options_simple_snippet">A great Title, prmize</h2>
        <h3 class="text-muted">And a great subtilte too</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
        <div class="dummy-boy"></div>
        <div class="dummy-girl"></div>
    </div>
</div>

Your new snippet is now ready to use. Just drag and drop it on your page to see it in action.