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

How to create a theme
module in Odoo 17
Enterprise

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.

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.

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.

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'
],
},
}

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>
● name 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
● parent_id website.main_menu must be kept to be shown under the main menu list
● sequence specifies the order of the menu

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>

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

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;
}
}

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.

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.

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

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

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

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>
</ul>
</section>
</template>
</odoo>

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>

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

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

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.

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

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

More Related Content

Similar to How to Create a Theme Module in Odoo 17 - Odoo 17 Slides (20)

More from Celine George (20)

Recently uploaded (20)

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