Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Odoo - Create themes for website

46,324 views

Published on

1. Introduction
Classical workflow
Odoo's CMS workflow
2. Tutorial
Starting with a single page
Snippets
Options
Custom Css
3. Examples

Published in: Technology
  • Stop getting scammed by online, programs that don't even work! ➤➤ https://tinyurl.com/y4urott2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Like to know how to take easy surveys and get huge checks - then you need to visit us now! Having so many paid surveys available to you all the time let you live the kind of life you want. learn more... http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ◆◆◆ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ★★★ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Odoo - Create themes for website

  1. 1. Create Themes for Website By Fabien Pinckaers - Founder & CEO, Odoo
  2. 2. Topics 1. Introduction Classical workflow Odoo's CMS workflow 2. Tutorial Starting with a single page Snippets Options Custom Css 3. Examples · · · · · ·
  3. 3. Introduction
  4. 4. Classical workflow Start a new project.
  5. 5. Working with Odoo CMS Start a new project.
  6. 6. Classical workflow Add new features or pages.
  7. 7. Working with Odoo CMS Add new features or pages.
  8. 8. Tutorial
  9. 9. A Theme? A Theme is an Odoo's MODULEA Theme is an Odoo's MODULE (Without Python Logic)
  10. 10. Structure of a Theme My Theme static src js, css, font, xml, img views my_theme.xml snippets.xml options.xml pages.xml (static pages) [...] · · · · · · · · · ·
  11. 11. Simple HTML page
  12. 12. Starting with an HTML page Let's start with the homepage. views/pages.xml 1 2 3 4 5 6 7 8 9 10 11 12 13 [...] <template<template id="website.homepage" name="Homepage" page="True">> <html><html> <head><head> <title><title>Title</title></title> </head></head> <body><body> <h1><h1> Hello, World! </h1></h1> </body></body> </html></html> </template></template> [...]
  13. 13. Starting with an HTML page Add the Odoo context : ( with Bootstrap front-end framework, Edition bar, Snippets, etc. ) views/pages.xml 1 2 3 4 5 6 7 [...] <template<template id="website.homepage" name="Homepage" page="True">> <t<t t-call="website.layout">> <h1><h1> Hello, World!</h1></h1> </t></t> </template></template> [...]
  14. 14. Starting with an HTML page It's possible to create all the pages like this way. views/pages.xml 1 2 3 4 5 6 7 8 [...]> <template<template id="website.homepage" name="Homepage" page="True">> <t<t t-call="website.layout">> <div<div id="wrap" class="oe_structure">> <!-- Your HTML code here --> </div></div> </t></t> [...] Adding the class "oe_structure" allows you to use this cool feature: SnippetsSnippets.
  15. 15. Snippets
  16. 16. Build with snippets But instead of creating all the pages this way, we think about using "Building Blocks". We call them "SnippetsSnippets". Block of html code usable everywhere. Draggable in your page. Can contain Javascript or/and Css logics. · · ·
  17. 17. A very Simple Snippet Structure of a snippet. views/snippets.xml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 [...] <template<template id="my_theme_snippets" inherit_id="website.snippets" name="My Theme snippets">> <xpath<xpath expr="//div[@id='snippet_structure']" position="inside">> <div><div> <!-- Thumbnail --> <div<div class="oe_snippet_thumbnail">> <img<img class="oe_snippet_thumbnail_img" src="/my_theme/static/src/img/snippet/snippet_thumbs.png"/>/> <span<span class="oe_snippet_thumbnail_title">>My Snippet</span></span> </div></div> <!-- Snippet Body --> <section<section class="oe_snippet_body mt_simple_snippet">> <div<div class="container">> <hr<hr />/> <h1<h1 class="text-center mb32 mt32">>This is a simple snippet</h1></h1> <hr<hr />/> </div></div> </section></section> </div></div> </xpath></xpath> </template></template> [...]
  18. 18. Customize my Snippet We can customize this simple snippet with Sass/Css. static/src/css/my_theme.sass 1 2 3 4 5 6 // Pure compass imports @import@import "compass/css3" @import@import "bootstrap" // Create CSS only for snippet @import@import "my_theme-snippet.sass" static/src/css/my_theme-snippet.sass 1 2 3 4 5 6 7 8 9 10 @font-face@font-face font-family:: 'BebasNeue' src:: url('/my_theme/static/src/font/BebasNeue Bold.ttf') src:: local(("BebasNeue Book")),, urlurl(('/my_theme/static/src/font/BebasNeue Bold.ttf')) formatformat(("truetype")) .mt_simple_snippet h1h1 font-family:: 'BebasNeue' font-size:: 55emem
  19. 19. Customize my Snippet To insert this new Css we need to extend the theme template and replace the default bootstrap by our new Css. views/my_theme.xml 1 2 3 4 5 6 7 [...] <template<template id="theme" inherit_id="website.theme" name="My Theme Assets">> <xpath<xpath expr="//link[@id='bootstrap_css']" position="replace">> <link<link rel="stylesheet" type="text/css" href="/my_theme/static/src/css/my_theme.css" />/> </xpath></xpath> </template></template> [...]
  20. 20. Snippet & Javascript It's possible to add javascript logicjavascript logic when a snippet has been dropped or appears in the page. static/src/js/snippet.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ((functionfunction()() {{ 'use strict';; varvar website == openerp..website;; website..openerp_website == {};{}; website..snippet..animationRegistry..my_snippet == website..snippet..Animation..extend({({ selector :: ".mt_simple_snippet",, start:: functionfunction(){(){ varvar h1 == thisthis..$el..find(("h1");); varvar h1_width == h1..width();(); h1..css(('width',,00);); h1..animate(( {{ width:: h1_width },}, 30003000 );); },}, });}); })();})();
  21. 21. Snippet & Javascript Just inherits from "website.assets_frontend" template to enable it. views/my_theme.xml 1 2 3 4 5 6 7 8 [...] <template<template id="assets_frontend" inherit_id="website.assets_frontend" name="My Theme Front End Assets">> <xpath<xpath expr="." position="inside">> <script<script src="/my_theme/static/src/js/snippet.js"></script>></script> </xpath></xpath> </template></template> [...]
  22. 22. Organize my snippets You can create a new snippet section or insert your snippet into an already present section. New section views/snippet.xml 1 2 3 4 5 6 7 8 9 [...] <template<template id="snippets" inherit_id="website.snippets" name="My Simple Snippet">> <xpath<xpath expr="//ul[@class='nav navbar-nav nav-tabs']" position="inside">> <li><li> <a<a href="#snippet_my_snippet" data-toggle="tab">>My Snippet</a></a> </li></li> </xpath></xpath> </template></template> [...] Insert into "Structure" section. 1 2 3 4 5 6 7 [...] <template<template id="my_theme_snippets" inherit_id="website.snippets" name="My Theme snippets">> <xpath<xpath expr="//div[@id='snippet_structure']" position="inside">> <div><div><!-- Your snippet --></div></div> </xpath></xpath> </template></template> [...]
  23. 23. Options
  24. 24. Add Options We can add options for every snippets or blocks. In our case, we add 2 options ( patterns background) for the snippet created before. views/options.xml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 [...] <template<template id="my_theme_snippet_option" name="My Snippet Options" inherit_id="website.snippet_options">> <xpath<xpath expr="." position="inside">> <div<div data-snippet-option-id="my_theme_snippet_option" data-selector=".mt_simple_snippet" data-selector-children=".oe_structure">> <li<li class="dropdown-submenu">> <a<a tabindex="-1" href="#">>Pattern</a></a> <ul<ul class="dropdown-menu">> <li<li data-value="tweed"><a>><a>Tweed</a></li></a></li> <li<li data-value="sprinkles"><a>><a>Sprinkles</a></li></a></li> </ul></ul> </li></li> </div></div> </xpath></xpath> [...]
  25. 25. Add Options In fact, it adds a class-name to the data-selector. And now, simply create the Css to have the desired result. static/src/css/my_theme-options.sass 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .mt_simple_snippet &&.tweed background-image:: url(/my_theme/static/src/img/backgrounds/patterns/tweed2.png) h1h1 color:: rgb((255255,,255255,,255255)) hrhr border-top:: 11pxpx solid dashed rgba((255255,,255255,,255255,.,.88)) &&.sprinkles background-image:: url(/my_theme/static/src/img/backgrounds/patterns/sprinkles.png) h1h1 color:: rgb((120120,,120120,,120120)) +text-shadow+text-shadow((00 00 55pxpx rgba((00,,00,,00,.,.33)))) hrhr border-top:: 11pxpx solid solid rgba((00,,00,,00,.,.88))
  26. 26. Custom Css We can override Bootstrap variables to create your theme. static/src/css/my_theme.sass 1 2 3 4 5 6 7 8 9 10 11 12 13 // Override Bootstrap variables $brand-primary:: rgb((120120,,120120,,120120)) $brand-success:: rgb((9494,,148148,,162162)) // Pure compass imports @import@import "compass/css3" @import@import "bootstrap" // Create CSS only for snippet @import@import "my_theme-snippet.sass" // Create CSS only for options @import@import "my_theme-options.sass"
  27. 27. Summary
  28. 28. Summary Infinite customizations Easy to understand Template inherits Bootstrap based Only imagination is your limit Robust Odoo back-end behind ... and so much things will come... and so much things will come :):) · · · · · ·
  29. 29. Example
  30. 30. Thank you And we are hiring a webdesigner. Contact cde@odoo.com for more informations.

×