Odoo Help


How to change the Odoo skin (change color themese)

on 1/15/15, 10:51 PM 18,586 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

--Luke Branch--
| 7 8 8
Mui Wo, Lantau, Hong Kong
--Luke Branch--


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

--IT Libertas--
| 4 3 7
Saint Petersburg, Russian Federation
--IT Libertas--

Visit us: https://odootools.com/

IT Libertas is a team of developers and automation experts to help you to unlock Odoo ERP system's potential. We have been communicating with end users to whom the software became a main business tool since 2012. As a result, we are proud of dozens of successful Odoo apps developed.

We are open for new ideas and challenges to create the best Odoo tools for business needs all over the world

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: 18586 times
Last updated: 4/6/16, 11:58 AM