how-to-add-css-javascript-in-odoo.png
Blogger_636316574414355870.jpg
By: Saritha

How to add CSS/JAVASCRIPT in Odoo?

Adding CSS and javascript(and jQuery)  enables with changing the design in odoo and also opening a new set of possibilities in adding an extra option in Odoo.

Let's look in how CSS/JAVASCRIPT file can be added in  Odoo.

1. Creating XML
The first step is to create a new XML file in your custom module under your ModuleName/views, like cited below:

how-to-add-css-javascript-in-odoo-1


Nextly add this new XML file to __manifest__ file
Open up __manifest__.py and add in a line in the data block. 
Make  sure you give the right path and filename

how-to-add-css-javascript-in-odoo-2

Now return to your XML file. 
As all CSS and JavaScript in Odoo are added to the assets, the first step should be to create an inherit_id calling, in next we’ll use an XPath to add our custom coded files. Adding resources is much like adding a field to a view with inheritance, you’re just referring to a file and not a field.

how-to-add-css-javascript-in-odoo-3

The ‘web.assets_backend’ is already created by Odoo and it contains all  CSS/JavaScript code. Therefore we’ll simply inherit them to add our files within.  The XPath expression is indicating Odoo to add those files to the main path of ‘web.assets_backend’. 

2. Creating your CSS / JavaScript files
Now we have to create  CSS or JavaScript files, therefore firstly create them. As per guidelines of Odoo, create a new folder named ‘static’. Open up this folder and create a new folder ‘src’. After you’ve created the folder ‘src’ you should create a new one named ‘css’, ‘js’ or ‘images’ depending on the file you need to add.

2.1 CREATING YOUR CSS FILES
Create a new folder ‘css’. This is the official structure for adding CSS files to Odoo! Now create a new CSS file in this folder. I’ve named it message.css’ just for demo purposes, but you can rename this whatever you like. The final result will now look like this:

how-to-add-css-javascript-in-odoo-4

As Odoo is unknown to the  path of CSS file,  open your XML file again and add the path to the CSS file:

how-to-add-css-javascript-in-odoo-5

It is very important to add the name of your module in the path and then continue with /static/src/css/yourFileName.css.

2.2 CREATING YOUR JAVASCRIPT FILES
Create a new folder ‘js’ and then create a new JS file in it.

how-to-add-css-javascript-in-odoo-6

As Odoo is not known to the CSS file path, once again open your XML file and add the path to the  CSS file:

how-to-add-css-javascript-in-odoo-7


For more reference you can refer our custom modules published in Odoo Apps. One among the module link is attached below.




Comments

0


Leave a comment

 
Calicut

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

London

Cybrosys Limited
2 Sheen Road,
Richmond, London
England - TW9 1AE

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