Odoo Help

Welcome!

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

0

How to change the Odoo skin (change color themese)

By
Farook
on 1/15/15, 10:51 PM 9,292 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 ibrahim
on 1/16/15, 8:47 AM
3

Luke Branch

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

...

Luke Branch
On 1/16/15, 3:33 AM

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

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

1
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

1
abin c ibrahim
On 1/16/15, 8:48 AM

change this,

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

1
Bruno JOLIVEAU
On 1/16/15, 1:01 PM

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.

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

you can change the web module css

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

3 follower(s)

Stats

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