Add colurs to statusbar in odoo10 - colors

Question

Need to add colour in statusbar in odoo10 which available openerp versions
eg: <field name = 'state' widget=statusbar clickabe= 'True' statubar_colors='{"new": "blue"}'>
How add colours in statusbar in odoo10
Need different color for different states in status bar
For eg: Blue color for draft,green for progress, red for cancel

Answer 1

There is two solution for your requirement:
If you need this behavior for only one Form view, Is simple as this:
just add style tag to beat the css selector generated by Odoo
<style>
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled {
background: yellow;
}
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::after {
border-left-color: yellow;
}
</style>
...
...
<field name ="state" widget="statusbar">
Here I used the same css selector because it's loaded after Odoo selector it is the one used, notice that my status bare button have .disabled class because it's readonly I think you have to change that clickabe= 'True' means it's not readonly.
if you want to have this for all your model here you need to use css file and add it to assets_backend template, make sure that your selector beat Odoo selector.
<template id="assets_backend" name="backend" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/your_addon_name/static/src/css/your_css_file_name.css"/>
</xpath>
</template>
Now I don't how you want to change the color exactly Here, you need to deal with CSS to select the right element,
for example if you want to make the status bar color blue only when the "new" value is selected, lucky for you
Odoo show the value selected in attribute data-value that doesn't change by translation.
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"] {
background: blue;
}
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"]::after {
border-left-color: blue;
}
This is in Odoo 11, when I inspected the element, this what I noticed:
status that is selected have class btn-primary the rest have btn-default
readonly have attribute disabled="disabled" and class disabled
And just to show that this work Here is a screen shot of what I have, You may have some side effect, it's when you open some record in popup and this form is still shown in the web page, this will effect the record shown too if it have a status bare widget, because the style tag will be removed when the form view is removed from the web page.
Edits:
Let say your selection has two values : new, valid
This will color new to blue if selected and valid to green fi selected
<style>
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"] {
background: blue;
}
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="new"]::after {
border-left-color: blue;
}
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="progress"] {
background: blue;
}
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="progress"]::after {
border-left-color: blue;
}
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="cancel"] {
background: red;
}
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled[data-value="cancel"]::after {
border-left-color: red;
}
</style>
...
...
...
<field name="state" .....>
It's all about selecting the field by data-value Hope you get the idea. and this is easier than having to deal with javascript.

Answer 2

This feature was removed from Odoo a long time ago.
https://github.com/odoo/odoo/issues/5987
https://github.com/odoo/odoo/pull/11199
If you need to add this feature you will have to create a new widget for it.

Answer 3

inherit_id="web.assets_backend"
add style as you need, you can also give style in css