-
-
Save ray-odoo/17a1dc72c7f59314ed1592b1a3db7e0c to your computer and use it in GitHub Desktop.
Confirmed the v16 section still works for v16.3 SaaS
This also worked for me in v16 albeit I used a different approach. Adding it below incase it might be of use to someone else. I made mine into a setting on the settings page with a color picker widget. Here is the template I made to pull from the settings.
<template id='my_navbar_web_layout' inherit_id='web.layout'> <data inherit_id="web.layout"> <xpath expr="//body" position="inside"> <t t-set="color" t-value='request.env["ir.config_parameter"].sudo().get_param("my_settings.nav_bar_color") if request else False' /> <t t-if='color'> <style>.o_main_navbar {background-color:<t t-esc='color'/>!important;border-bottom: 0px;}</style> </t> </xpath> </data> </template>
Edit... I cant get the code viewer to properly display but hopefully it would make sense if you paste it into an XML formatter
This also worked for me in v16 albeit I used a different approach. Adding it below incase it might be of use to someone else. I made mine into a setting on the settings page with a color picker widget. Here is the template I made to pull from the settings.
<template id='my_navbar_web_layout' inherit_id='web.layout'> <data inherit_id="web.layout"> <xpath expr="//body" position="inside"> <t t-set="color" t-value='request.env["ir.config_parameter"].sudo().get_param("my_settings.nav_bar_color") if request else False' /> <t t-if='color'> <style>.o_main_navbar {background-color:<t t-esc='color'/>!important;border-bottom: 0px;}</style> </t> </xpath> </data> </template>Edit... I cant get the code viewer to properly display but hopefully it would make sense if you paste it into an XML formatter
i dont see or have any changes in setting when i try this code
Does anyone have the incantation for version 18?
The same code works in Odoo 17.0 and 18.0, I just updated the GIST and the Forum post
This also worked for me in v16 albeit I used a different approach. Adding it below incase it might be of use to someone else. I made mine into a setting on the settings page with a color picker widget. Here is the template I made to pull from the settings.
<template id='my_navbar_web_layout' inherit_id='web.layout'> <data inherit_id="web.layout"> <xpath expr="//body" position="inside"> <t t-set="color" t-value='request.env["ir.config_parameter"].sudo().get_param("my_settings.nav_bar_color") if request else False' /> <t t-if='color'> <style>.o_main_navbar {background-color:<t t-esc='color'/>!important;border-bottom: 0px;}</style> </t> </xpath> </data> </template>Edit... I cant get the code viewer to properly display but hopefully it would make sense if you paste it into an XML formatter
Nice! That really should be the default.
The gist snippet for 18 mostly works, but the button backgrounds aren't updated:
This also worked for me in v16 albeit I used a different approach. Adding it below incase it might be of use to someone else. I made mine into a setting on the settings page with a color picker widget. Here is the template I made to pull from the settings.
<template id='my_navbar_web_layout' inherit_id='web.layout'> <data inherit_id="web.layout"> <xpath expr="//body" position="inside"> <t t-set="color" t-value='request.env["ir.config_parameter"].sudo().get_param("my_settings.nav_bar_color") if request else False' /> <t t-if='color'> <style>.o_main_navbar {background-color:<t t-esc='color'/>!important;border-bottom: 0px;}</style> </t> </xpath> </data> </template>
Edit... I cant get the code viewer to properly display but hopefully it would make sense if you paste it into an XML formatter
Nice! That really should be the default.
It definitely is a little goofier with v17/18 with letting users pick whatever color they want. Sometimes it might clash with dark mode making it unusable
For better or worse this is how I am solving a similar situation for a different different customer... The view inherits into the web.layout template. nav_bar_color is just still a color picker widget in settings
The gist snippet for 18 mostly works, but the button backgrounds aren't updated:
Anyone have any ideas on how to get the rest of the theme to use a different colour?
I have updated this for Odoo 18.0, it is better (still not perfect):
While doing a v18 upgrade this is what I am settling with for v18
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id='navbar_web_layout_comp_color' inherit_id='web.layout'>
<data inherit_id="web.layout">
<xpath expr="//body" position="inside">
<t t-set="color" t-value='request.env["ir.config_parameter"].sudo().get_param("custom_icp.nav_bar_color") if request else False' />
<t t-if='color'>
<t t-set="text_color">
<t t-set="r" t-value="int(color[1:3], 16)"/>
<t t-set="g" t-value="int(color[3:5], 16)"/>
<t t-set="b" t-value="int(color[5:7], 16)"/>
<t t-set="brightness" t-value="(r * 299 + g * 587 + b * 114) / 1000"/>
<t t-set="text_color_val" t-value="'white' if brightness < 128 else 'black'"/>
</t>
<style>
.o_main_navbar {
background-color: <t t-esc="color"/> !important;
background: linear-gradient(45deg, <t t-esc="color"/>, <t t-esc="color"/>);
color: <t t-esc="text_color_val"/> !important;
}
.o_main_navbar *,
.o_main_navbar .breadcrumb-item,
.o_main_navbar .o_menu_toggle,
.o_main_navbar .o_user_menu,
.o_main_navbar a,
.o_main_navbar .o_MessagingMenu,
.o_main_navbar .o_debug_manager,
.o_main_navbar .o_menu_sections,
.o_main_navbar .o_menu_brand,
.o_main_navbar .o_switch_company_menu,
.o_main_navbar .dropdown-toggle {
color: <t t-esc="text_color_val"/> !important;
}
.o_main_navbar button,
.o_main_navbar .o_nav_entry,
.o_main_navbar .btn,
.o_main_navbar .btn-secondary,
.o_main_navbar .badge,
.o_main_navbar .dropdown-menu .dropdown-item {
color: <t t-esc="text_color_val"/> !important;
background-color: transparent !important;
border-color: rgba(255, 255, 255, 0.3);
}
</style>
</t>
</xpath>
</data>
</template>
</odoo>
Edit: Cant get screenshot to upload :(
work good thak you