Can anyone please suggest the easiest way to make UI changes in odoo. We want to basically change the top menu bar color, menu text color and color of header and footer etc.
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Accounting
- Inventory
- PoS
- Project
- MRP
This question has been flagged
9
Replies
68704
Views
@Farook,
I'd recommend learning a few basics about how to create a custom module in Odoo including the following:
- Using xpath to inherit and replace a value in a file to over-ride it
- Creating a basic module to add CSS, Javascript and other logic to Odoo
- Use your browser's developer tool (eg. in Chrome you can just right click on something (navigation menu for example) and click 'Inspect Element' to see the underlying HTML.
- Using your browser's developer tools you'll be able to find what specific CSS attributes you want to change. From here you can either search for the attribute by using the search tool in github for the Odoo repository here: https://github.com/odoo/odoo, or the command line tools at your disposal to find attribute(s) and the files they are in.
- Inside Odoo learn how to activate and use the developer mode - Administrator > About Odoo > Activate Developer Mode
- Using the developer mode you'll be able to inspect views to see their structure
You can find some (very basic) instructions for using xpath to add/remove css/js among other things using the following post:
https://www.odoo.com/forum/help-1/question/new-bootstrap-theme-on-website-builder-58809
you'll find detailed instructions on developing modules, working with views, qweb, and many other things in the technical documentation:
https://www.odoo.com/documentation/8.0
Feel free to post back with specific questions if you run into any issues.
open ../addons/web/static/css/base.css
1.To change top_menu_bar color search(Ctrl+f) for ".openerp .oe_topbar"
.openerp .oe_topbar {
width: 100%;
height: 32px;
background-color: #414141;
background-color: #454343;
background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
background-image: -webkit-linear-gradient(top, #646060, #262626);
background-image: -moz-linear-gradient(top, #646060, #262626);
background-image: -ms-linear-gradient(top, #646060, #262626);
background-image: -o-linear-gradient(top, #646060, #262626);
background-image: linear-gradient(to bottom, #646060, #262626);
change the background-color property
2.Try same format for menu text color and color of header and footer
hope it helps...
Video Link: https://youtu.be/amHpruXQMOg
Change Header Color: https://youtu.be/qmGrmLfv9ZA
Module Link: https://github.com/hareshkansara/odoo_tutorial/tree/13.0/odoo_theme_backend
Hello, perhaps, this module - https://apps.odoo.com/apps/modules/8.0/colors_customization/ - may suit to your needs
Hello,
For OpenERP V7, you can use http://www.zbeanztech.com/blog/openerp_7_web_color_theme
For Odoo V8, this addon need some adaptations.
change this,
.openerp .oe_topbar {
width: 100%;
height: 32px;
background-color: #414141;
You can use simple trick like this
footer {
background-color:#21272B !important;
color: white !important;
}
use !important in web_editor.common.less
you can change the web module css
Enjoying the discussion? Don't just read, join in!
Create an account today to enjoy exclusive features and engage with our awesome community!
Sign up
farook u use 7 or 8 i answered for 7..ok
Hello,
With the help of the below module, the user can change the header color user-wise.
https://apps.odoo.com/apps/modules/16.0/odoo_nav_color/