10 Create a basic theme module with :command:`odoo.py scaffold` and the ``theme``
11 template: from the root odoo folder, use
13 .. code-block:: console
15 $ ./odoo.py scaffold -t theme "Dummy Theme" addons
17 this should create a new folder ``dummy_theme`` in the ``addons`` directory
33 ``static/styles`` contains your stylesheet(s), ``views`` contains the various
34 XML files describing the theme and theme features to Odoo.
39 Creating a new template
40 '''''''''''''''''''''''
42 Create a new file :file:`odoo/addons/theme_dummy/views/pages.xml` and open it.
44 In odoo, a page means a new template. You don't need special skills, simply
45 copy paste the lines::
47 <template id="website.hello" name="Homepage" page="True">
48 <t t-call="website.layout">
49 <div id="wrap" class="oe_structure oe_empty">
54 Refresh the page and feel the hit.
56 Editing content on a page
57 '''''''''''''''''''''''''
59 You can now add your content! You should always use the Bootstrap structure as
62 <template id="website.hello" name="Homepage" page="True">
63 <t t-call="website.layout">
64 <div id="wrap" class="oe_structure oe_empty">
66 <div class="container">
68 <h1>This is Your Content</h1>
69 <p>Isn't amazing to edit everything inline?</p>
78 Adding new item in the menu
79 '''''''''''''''''''''''''''
81 Adding these few more lines will put the new page in your menu::
83 <record id="hello_menu" model="website.menu">
84 <field name="name">Hello</field>
85 <field name="url">/page/hello</field>
86 <field name="parent_id" ref="website.main_menu"/>
87 <field name="sequence" type="int">20</field>
90 Congrats! It's online! Now drag and drop some snippets on the page and let's
96 Easy styling with less
97 ''''''''''''''''''''''
99 In ``odoo/addons/theme_dummy/static`` create a new folder and name it
100 ``style``. In the new folder ``odoo/addons/theme_dummy/static/style`` create a
101 file and name it ``custom.less``. Open ``custom.less`` in the text editor and
102 modify these lines as below:
111 border: 2px solid black;
112 background-color: #eee;
115 Refresh the page and feel the hit.
117 Get the most of the dom
118 '''''''''''''''''''''''
120 Right-Click, inspect element. You can go deeper by styling the main layout
121 container. Here we try with the 'wrapwrap' id.
126 background-color: #222;
131 Easy layout with bootstrap
132 ''''''''''''''''''''''''''
134 Open :file:`odoo/addons/theme_dummy/views/pages.xml` and add a new section::
137 <div class="container">
139 <div class="alert alert-primary" role="alert">
140 <a href="#" class="alert-link">...</a>
142 <div class="col-md-6 bg-blue">
145 <div class="col-md-6 bg-green">
152 Refresh the page and check how it looks.
154 The background of the alert component is the default Bootstrap primary color.
155 The two other div your created have no custom styles applied yet. Open
156 :file:`odoo/addons/theme_dummy/static/style/custom.less` and add these lines:
160 @brand-primary: #1abc9c;
161 @color-blue: #3498db;
162 @color-green: #2ecc71;
164 .bg-blue { background: @color-blue; }
165 .bg-green { background: @color-green; }
167 .h2 { color: white; }
169 As you see, the default primary has changed and your new colors are shining!
171 Build Your First Snippet
172 ------------------------
174 Setting up __openerp__.py
175 '''''''''''''''''''''''''
177 Open ``__openerp__.py`` and add a new line as below:
179 .. code-block:: python
182 'name': 'Dummy Theme',
183 'description': 'Dummy Theme',
184 'category': 'Website',
186 'author': 'OpenERP SA',
187 'depends': ['website'],
189 'views/snippets.xml',
194 In ``odoo/addons/theme_learn/views`` create a new xml file, name it
195 ``snippets.xml`` and open it in a text editor
197 Add your snippet in the menu
198 ''''''''''''''''''''''''''''
200 Before typing your html code, you need to locate it in the WEBb. drop-down
201 menu. In this case, we will add it at the end of the Structure section::
203 <template id="snippets" inherit_id="website.snippets" name="Clean Theme snippets">
204 <xpath expr="//div[@id='snippet_structure']" position="inside">
208 Now open a new div, do not give it any id or classes. It will contain your
211 <xpath expr="//div[@id='snippet_structure']" position="inside">
216 A thumbnail is also needed to create a more attractive link in the menu. You
217 can use labels to focus on your themes snippets. Simply add a new div with
218 the class ``oe_snippet_thumbnail`` and add your thumbnail image (100x79px)::
220 <xpath expr="//div[@id='snippet_structure']" position="inside">
222 <div class="oe_snippet_thumbnail">
223 <img class="oe_snippet_thumbnail_img" src="/theme_Dummy/static/img/blocks/block_title.png"/>
224 <span class="oe_snippet_thumbnail_title">SNIP IT!</span>
229 And voila! Your new snippet is now ready to use. Just drag and drop it on your
230 page to see it in action.
235 A snippet has to be in a section with the class ``oe_snippet_body`` to work
236 correctly. As Odoo use the Bootstrap framework, you have use containers and
237 rows to hold your content. Please refer the the Bootstrap documentation::
239 <xpath expr="//div[@id='snippet_structure']" position="inside">
241 <div class="oe_snippet_thumbnail">
242 <img class="oe_snippet_thumbnail_img" src="/theme_Dummy/static/img/blocks/block_title.png"/>
243 <span class="oe_snippet_thumbnail_title">SNIP IT!</span>
246 <section class="oe_snippet_body fw_categories">
247 <div class="container">
255 Inside your fresh new row, add some bootstraped contents::
257 <div class="col-md-12 text-center mt32 mb32">
258 <h2>A great Title</h2>
259 <h3 class="text-muted ">And a great subtitle too</h3>
260 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
264 Adding images to your snippet
265 '''''''''''''''''''''''''''''
267 You can easely add images in your snippets simply by setting up css
270 In ``odoo/addons/theme_dummy/static/`` create a new folder and name it
271 ``img``. Put your images there, in sub-folders if needed. Open
272 :file:`odoo/addons/theme_dummy/static/style/custom.less`, add these lines
276 @img-01: url("../img/img-boy.png");
277 .dummy-boy { background-image: @img-01; }
279 @img-02: url("../img/img-girl.png");
280 .dummy-girl { background-image: @img-02; }
282 In :file:`odoo/addons/theme_dummy/views/pages.xml` change the correspondant
286 <div class="container">
287 <div class="row dummy-bg">
288 <div class="alert alert-primary" role="alert">
289 <a href="#" class="alert-link">...</a>
291 <div class="col-md-6">
293 <div class="dummy-boy">
296 <div class="col-md-6">
298 <div class="dummy-girl">
305 Your new snippet is now ready to use. Just drag and drop it on your page to
308 Advanced Customization
309 ======================
311 Defining Your Theme Options
312 ---------------------------
317 As your stylesheets are running on the whole website, giving more option to
318 your snippets and applying them independently will push your design
319 forward. In ``odoo/addons/theme_dummy/views/`` create a new file, name it
320 ``options.xml`` and add these lines::
322 <template id="gourman_website_options_pattern" inherit_id="website.snippet_options">
323 <xpath expr="//div[@data-option='dummy_options']//ul" position="after">
330 .. TODO:: syntax not correct (see website examples)
332 Your option menu is now correctly set in the database, you can create an new dropdown menu.
334 Let's say yout want three options which will change the text color and the background.
335 In option.xml, add these lines inside the xpath::
337 <li data-check_class="text-purple"><a>YOUR OPTION 1</a></li>
338 <li class="dropdown-submenu">
339 <a tabindex="-1" href="#">Your sub option</a>
340 <ul class="dropdown-menu">
341 <li data-select_class="bg-yellow"><a>YOUR OPTION 2</a></li>
342 <li data-select_class="text-light-bg-dark"><a>YOUR OPTION 3</a></li>
343 <li data-select_class=""><a>None</a></li>
347 Simple less css options
348 '''''''''''''''''''''''
350 In order to see these options in action, you have to write some new css
351 classes. Open custom.css and add this new lines
355 @color-purple: #2ecc71;
356 @color-yellow: #2ecc71;
358 .text-purple { color: @color-purple; }
359 .bg-yellow { background-color: @color-yellow;}
360 .text-light-bg-dark { color: #eee; background-color: #222;}
362 Refresh the page. Select a snippet and click Customize. Choose one of your new
368 You can also add images in your variables and use them on certain part of your
369 pages, snippets or any html element.
371 In :file:`odoo/addons/theme_dummy/static/style/custom.css` add these new lines
375 @bg-01: url("../img/background/bg-blur.jpg");
378 background-image: @bg-01;
381 Now that you have set the background image, you can decide how and where the
382 user can use it, for example, on a simple div.
384 Open :file:`odoo/addons/theme_dummy/views/options.xml` and add this new xpath::
386 <xpath expr="//div[@data-option='background-dummy']//ul" position="after">
387 <ul class="dropdown-menu">
388 <li data-value="bg-01">
394 Your option is ready to be applied but you want it to be shown only a certain
397 Open :file:`odoo/addons/theme_dummy/views/snippets.xml` and add a new snippet
398 with the method we learned previously::
400 <xpath expr="//div[@id='snippet_structure']" position="inside">
402 <!-- Add a Thumbnail in the Website Builder drop-down menu -->
403 <div class="oe_snippet_thumbnail">
404 <img class="oe_snippet_thumbnail_img" src="/theme_Dummy/static/img/blocks/block_title.png"/>
405 <span class="oe_snippet_thumbnail_title">Test OPTION</span>
407 <!-- Your Snippet content -->
408 <section class="oe_snippet_body fw_categories">
409 <div class="container">
411 <div class="col-md-6 text-center mt32 mb32">
415 <div class="col-md-6 text-center mt32 mb32 test-option">
417 <p>This div has the 'test-option' class</p>
425 As you see, the second ``col-md`` has a class named ``test-option``. We are
426 going to specify where this option can be turned on by adding the
427 ``data-selector`` attribute.
429 Go back to your ``options.xml`` files, add these new lines::
431 <xpath expr="//div[@data-option='background-dummy']" position="attributes">
432 <attribute name="data-selector">test-option</attribute>
435 Refresh your browser. You should now be able to add your image background on
436 the left div only. The option is now available on each section but also on
437 the left div with the custom class.
442 Modifying the image database
443 ''''''''''''''''''''''''''''
445 Odoo provides its own image library but you certainly want to adapt it to your
446 design. Do not use the Media Manager uploading Tool to add image in your
447 theme. The images url's will be lost on reload! Instead of uploading your
448 images, you can create your own library and disable the old ones.
450 In ``odoo/addons/theme_dummy/views/`` create a new file, name it
451 ``images.xml`` and add these lines::
453 <record id="image_bg_blue" model="ir.attachment">
454 <field name="name">bg_blue.jpg</field>
455 <field name="datas_fname">bg_blue.jpg</field>
456 <field name="res_model">ir.ui.view</field>
457 <field name="type">url</field>
458 <field name="url">/theme_clean/static/img/library/bg/bg_blue.jpg</field>
461 Your images is now available in your Media Manager. And your Theme has a
470 Understanding theme variants
471 ''''''''''''''''''''''''''''
473 Combining theme variants
474 ''''''''''''''''''''''''