How to Create a Theme Module in Odoo 17 - Odoo 17 Slides

For Odoo website, there will be a theme set by default. In Odoo 17, this will be done by odoo automatically once we install the ‘website’ module from the Apps list and just clicking on the ‘Activate’ button.

1. How to create a theme module in Odoo 17 Enterprise

2. Introduction Enterprise For Odoo website, there will be a theme set by default. In Odoo 17, this will be done by odoo automatically once we install the ‘website’ module from the Apps list and just clicking on the ‘Activate’ button.

3. Enterprise Then click on the theme we need. This will lead us to the Editor view of the website, where many snippets, styles, other themes and customization can be chosen.

4. Enterprise Odoo allows the developers to create their own new modules to apply as a theme for the server. Let’s check how it is done in Odoo 17. Let’s create a very simple module with essential view’s xml files and static folder with css/ scss directory. Here, we’ve made a new module named theme_custom .

5. Enterprise For a Theme module, the manifest file can be like { 'name': 'Custom Theme for Odoo', 'version': '17.0.1.0.0', 'category': 'Theme/sub_category', 'summary': 'customized for the web pages', 'description': 'This is a simple theme module which adds color changes and ' 'styles for the web pages', 'installable': True, 'license': 'LGPL-3', 'application': True, 'sequence': 1, 'depends': ['website'], 'data': [ 'views/theme_views.xml' ], 'assets': { 'web.assets_frontend': [ '/theme_custom/static/src/scss/style.scss' ], }, }

6. Enterprise Creating the Web page For a web page to get created in the Odoo website, we have to define the xml files inside the view directory. Inside that, first we have to give the code for creating a menu in the web page. This is done by creating a record for website.menu model as <record id="menu_home" model="website.menu"> <field name="name">Test</field> <field name="url">/test</field> <field name="page_id" ref="theme_custom.test_page"/> <field name="parent_id" ref="website.main_menu"/> <field name="sequence" type="int">10</field> </record> n ame is the name of the website menu url specifies the URL of the webpage being created page_id refers to the xml id of the page which is to be loaded on the menu click p arent_id website.main_menu must be kept to be shown under the main menu list s equence specifies the order of the menu

7. Enterprise In the same file itself, we can add the code for creating the web page as <record id="test_page" model="website.page"> <field name="name">Test page</field> <field name="website_published">True</field> <field name="url">/test</field> <field name="type">qweb</field> <field name="key">theme_custom.theme_views</field> <field name="arch" type="xml"> <t t-name="theme_custom.test_page_template"> <t t-call="website.layout"> <div id="wrap"> <div class="container oe_structure"> <h1 class="test-heading"> TestPage </h1> <ul class="test"> <li>Feature 1</li><li>Feature 2</li><li>Feature 3</li> </ul> </div> </div> </t></t> </field> </record>

8. Enterprise After upgrading the module and refreshing the webpage, we can see the new menu and page as

9. Enterprise Now, to show that the theme is working, the styling of the test page is incorporated using CSS or SCSS files. Add this inside static/scss directory as .test-heading { color: black; } .test { background: bisque; border-radius: 8px; padding: 0.8em; margin: 2em 0 3em; li { display: block; position: relative; padding: 2em; color: #FFF; text-align: center; margin-bottom: 1em; background-color: cadetblue; font-size: 1.0em; } }

10. Enterprise In this scss code, it just adds the black color for the tags with class ‘test-heading’. For the contents with class ‘test’, some extra style details are given. In the earlier xml file for the web page content, we have already added the content with these classes. But, there we saw no change affected. This is because, here Odoo 17 is running with the default theme added during the website module installation. To change the newly added theme, we have to switch to the custom theme we added through code. For that, first make the website to Edit mode by clicking on the marked ‘Edit’ button on top.

11. Enterprise Now, we can see the snippets and customization panel there on right side. Select the third page ‘THEME’, and under the ‘Website’ tag, click on ‘Switch Theme’ button.

12. Enterprise A confirmation bow will come then. Click on ‘OK’ and after that, we can see our custom theme will be visible there to select. Hover the mouse on it to see the button ‘Use this Theme’. Click on it

13. Enterprise Then, do nothing because we have to wait for some seconds for the theme to get set by Odoo. By the time, the screen will be as

14. Enterprise Now, we can see that the content of our webpage under the new ‘Test’ menu will be added with the CSS styles as

15. Enterprise Adding snippets to theme module In Odoo, snippets are reusable pieces of content that can be easily inserted into web pages through the website builder. They are used to streamline the process of creating and editing web pages by providing pre-designed content blocks such as headers, footers, text blocks, image galleries, forms, and more. To create a simple snippet for our module, let’s add the xml code for the snippet template in the views/test_page.xml file. <?xml version="1.0" encoding="UTF-8" ?> <odoo> <template id="test_snippet" name="Test Snippet"> <section class="container oe_structure"> <h1 class="test-heading">Test Snippet</h1> <ul class="test"> <li>Snippet Feature 1</li> <li>Snippet Feature 2</li> <li>Snippet Feature 3</li> </ul> </section> </template> </odoo>

16. Enterprise Add the created snippet to the building blocks with xml code and save it in the views/snippets/test_snippet.xml file. <template id="test_snippet_register" inherit_id="website.snippets" name="Test Snippet Register"> <xpath expr="//div[@id='snippet_structure']/div[hasclass('o_panel_body')]" position="inside"> <t t-snippet="theme_custom.test_snippet" t-thumbnail="/theme_custom/static/src/img/test_thumbnail.png"/> </xpath> </templates>

17. Enterprise After upgrading the module, go to website and take the editor’s mode. Then, we can see the Test snippet under the Structure section

18. Enterprise We can just drag and drop to any page where we need as we do with the default snippets in Odoo 17 website. Here, the snippet is dropped twice in our Test page

19. Enterprise After completing these steps, your custom theme should be active on your Odoo 17 website. We can further customize the theme by adding more CSS, JavaScript, and adjusting the templates as needed. This kind of custom themes creation allows the developers to get the opportunity to tailor the website's appearance to specific requirements. By following the outlined steps, users can install, apply, and customize themes seamlessly within the Odoo framework. The process involves organizing files, defining page layouts, styling with CSS or SCSS, and incorporating custom snippets for enhanced website functionality.

20. For More Info. Check our company website for related blogs and Odoo book. Check our YouTube channel for functional and technical videos in Odoo. Enterprise www.cybrosys.com