how-to-create-a-theme-module-odoo-12.png
Blogger_637005666753977292.png
By: Ijaz Ahammed

How to Create a Theme Module in Odoo 12

Technical Odoo 12

Odoo default theme provides with a minimal structure. However, while creating a new one we can extend its structure to any degree. Themes from Odoo are bundled like modules and regardless of whether you are structuring a basic website, you have to bundle the theme like an Odoo module.


An Odoo theme doesn't contain any HTML or PHP records, it's a particular structure written in XML.


The basic technologies used for building an Odoo Theme is:

1. CSS

2. Bootstrap

3. Jquery

4. Less


Basic setups for building an Odoo Theme:


how-to-create-a-theme-module-odoo-12-cybrosys


Create a folder name like odoo_theme  and this name we call it as the technical name of the module.


And we need to add to files named as __init__.py  and  __manifest__.py. Note: These two files are mandatory.


__init__ file is the initializer of the module and contains elements like import statements that is linking to folders and files in the module.


The manifest file of this module comes as __manifest__.py. The manifest file embeds module data such as  Title, Description, Summary, and so on. It also helps to make the process dynamic and interactive via shedding queries such as what is the purpose of this module, what it really does and so forth.


how-to-create-a-theme-module-odoo-12-cybrosys


css/js/img/, lib/,etc are contained in the static folder. This folder acts as the right place for your style,images and  js code.


how-to-create-a-theme-module-odoo-12-cybrosys


The view folder contains the views and templates.


how-to-create-a-theme-module-odoo-12-cybrosys


Serene styling with CSS

In odoo/addons/odoo_theme/static, create a new folder in the form of style. In the new folder,  odoo/addons/todoo_theme/static/style create a file and name it like odd_theme.css. Open odoo_theme.css and modify these lines as below:


.nav-link{
   color:#fff !important;
}
.dropdown-item {
   color: #00438a !important;
}
.btn-info {
   color: #fff !important;
   background-color: #17a2b8;
   border-color: #17a2b8;
}
.dropdown-item {
   color: #00438a !important;
}
.dropdown-menu {
   background-color: #FFF !IMPORTANT;
}


In the CSS, a class selector is a name that starts with a full stop like .class_name and an ID selector is the name starting with a hash character like  #id.


Add this asset to your template in odoo_theme.xml:


how-to-create-a-theme-module-odoo-12-cybrosys


Inspect element. Styling the main layout container, you can get deeper.


Eg:- here I'm trying with o_main_navbar


how-to-create-a-theme-module-odoo-12-cybrosys


Here the class name of the navbar is o_main_navbar,therefore CSS code should be like this


.o_main_navbar {
   border: 1px solid #fff !important;
   background-color: #fff !important;
   -webkit-box-shadow: 0px 0px 8px #00438a !important;
   box-shadow: 0px 0px 8px #00438a !important;
}


Creating Js files

js codes  we are mainly using for UI customization 


In odoo/addons/odoo_theme/static create a new folder as JS. In the new folder odoo/addons/todoo_theme/static/js create a file and name it like odd_theme.js. Open odoo_theme.js and modify these lines as below:


how-to-create-a-theme-module-odoo-12-cybrosys


This is how we build a basic theme module in odoo. Hope the blog was useful.









cybrosys youtube

Comments

0


Leave a comment

 
Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message