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.
Create a new file odoo/addons/theme_dummy/views/pages.xml and open it.
In odoo, a page means a new template. You don’t need special skills, simply copy paste the lines:
<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.
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 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>
Congrats! It’s online! Now drag and drop some snippets on the page and let’s style!
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>
Refresh the page and feel the hit.
Right-Click, inspect element. You can go deeper by styling the main layout container. Here we try with the ‘wrapwrap’ id.
#wrapwrap {
background-color: #222;
width: 80%;
margin: 0 auto;
}
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>
Refresh the page and check how it looks.
The background of the alert component is the default Bootstrap primary color. The two other div your created have no custom styles applied yet. Open odoo/addons/theme_dummy/static/style/custom.less and add these lines:
@brand-primary: #1abc9c;
@color-blue: #3498db;
@color-green: #2ecc71;
.bg-blue { background: @color-blue; }
.bg-green { background: @color-green; }
.h2 { color: white; }
As you see, the default primary has changed and your new colors are shining!
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
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>
And voila! Your new snippet is now ready to use. Just drag and drop it on your page to see it in action.
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>
You can easely add images in your snippets simply by setting up css backgrounds images.
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; }
Add also the width and the height css attributes to theses new classes.
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.
As your stylesheets are running on the whole website, giving more option to your snippets and applying them independently will push your design forward. In odoo/addons/theme_dummy/views/ create a new file, name it options.xml and add these lines:
<template id="gourman_website_options_pattern" inherit_id="website.snippet_options">
<xpath expr="//div[@data-option='dummy_options']//ul" position="after">
</xpath>
</template>
Your option menu is now correctly set in the database, you can create an new dropdown menu.
Let’s say yout want three options which will change the text color and the background.
In option.xml, add these lines inside the xpath:
<li data-check_class="text-purple"><a>YOUR OPTION 1</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Your sub option</a>
<ul class="dropdown-menu">
<li data-select_class="bg-yellow"><a>YOUR OPTION 2</a></li>
<li data-select_class="text-light-bg-dark"><a>YOUR OPTION 3</a></li>
<li data-select_class=""><a>None</a></li>
</ul>
<li>
In order to see these options in action, you have to write some new css classes. Open custom.css and add this new lines
@color-purple: #2ecc71;
@color-yellow: #2ecc71;
.text-purple { color: @color-purple; }
.bg-yellow { background-color: @color-yellow;}
.text-light-bg-dark { color: #eee; background-color: #222;}
Refresh the page. Select a snippet and click Customize. Choose one of your new options apply it.
You can also add images in your variables and use them on certain part of your pages, snippets or any html element.
In odoo/addons/theme_dummy/static/style/custom.css add these new lines
@bg-01: url("../img/background/bg-blur.jpg");
.bg-01 {
background-image: @bg-01;
}
Now that you have set the background image, you can decide how and where the user can use it, for example, on a simple div.
Open odoo/addons/theme_dummy/views/options.xml and add this new xpath:
<xpath expr="//div[@data-option='background-dummy']//ul" position="after">
<ul class="dropdown-menu">
<li data-value="bg-01">
<a>Image 1</a>
</li>
</ul>
</xpath>
Your option is ready to be applied but you want it to be shown only a certain part of a snippet.
Open odoo/addons/theme_dummy/views/snippets.xml and add a new snippet with the method we learned previously:
<xpath expr="//div[@id='snippet_structure']" position="inside">
<div>
<!-- Add a Thumbnail in the Website Builder drop-down menu -->
<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">Test OPTION</span>
</div>
<!-- Your Snippet content -->
<section class="oe_snippet_body fw_categories">
<div class="container">
<div class="row">
<div class="col-md-6 text-center mt32 mb32">
<h2>NO OPTION</h2>
<p>OFF</p>
</div>
<div class="col-md-6 text-center mt32 mb32 test-option">
<h2>OPTION</h2>
<p>This div has the 'test-option' class</p>
</div>
</div>
</div>
</section>
</div>
</xpath>
As you see, the second col-md has a class named test-option. We are going to specify where this option can be turned on by adding the data-selector attribute.
Go back to your options.xml files, add these new lines:
<xpath expr="//div[@data-option='background-dummy']" position="attributes">
<attribute name="data-selector">test-option</attribute>
</xpath>
Refresh your browser. You should now be able to add your image background on the left div only. The option is now available on each section but also on the left div with the custom class.
Odoo provides its own image library but you certainly want to adapt it to your design. Do not use the Media Manager uploading Tool to add image in your theme. The images url’s will be lost on reload! Instead of uploading your images, you can create your own library and disable the old ones.
In odoo/addons/theme_dummy/views/ create a new file, name it images.xml and add these lines:
<record id="image_bg_blue" model="ir.attachment">
<field name="name">bg_blue.jpg</field>
<field name="datas_fname">bg_blue.jpg</field>
<field name="res_model">ir.ui.view</field>
<field name="type">url</field>
<field name="url">/theme_clean/static/img/library/bg/bg_blue.jpg</field>
</record>
Your images is now available in your Media Manager. And your Theme has a total new look.
odoo docs theme based on Bootstrap 3.2 documentation adapted to Sphinx output with branding and color changes.