Odoo Help


How to change the Odoo skin (change color themese)

on 1/15/15, 10:51 PM 15,244 views

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. 

farook u use 7 or 8 i answered for 7..ok

Abin C I
on 1/16/15, 8:47 AM
Luke Branch
On 1/16/15, 3:33 AM


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:


you'll find detailed instructions on developing modules, working with views, qweb, and many other things in the technical documentation:


Feel free to post back with specific questions if you run into any issues.

aci aisha
On 1/16/15, 8:45 AM

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...

IT Libertas
On 3/24/16, 1:07 PM

Hello, perhaps, this module - https://apps.odoo.com/apps/modules/8.0/colors_customization/ - may suit to your needs

Abin C I
On 1/16/15, 8:48 AM

change this,

.openerp .oe_topbar {
  width: 100%;
  height: 32px;
  background-color: #414141;

On 1/16/15, 1:01 PM


For OpenERP V7, you can use http://www.zbeanztech.com/blog/openerp_7_web_color_theme
For Odoo V8, this addon need some adaptations.

Hengky Zhang
On 1/16/15, 3:04 AM

you can change the web module css

About This Community

This platform is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.


Odoo Training Center

Access to our E-learning platform and experience all Odoo Apps through learning videos, exercises and Quizz.

Test it now

Question tools

3 follower(s)


Asked: 1/15/15, 10:51 PM
Seen: 15244 times
Last updated: 4/6/16, 11:58 AM