Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
Hi,
I'm looking for a way to add a new gradient option in the website builder/editors colorpicker (with code/custom module, Odoo 16 enterprise):
I know Odoo provides a solution for this in their documentation, however I believe this is outdated as it doesn't seem to work.
Anyone have some experience with this?
Thanks!
Jort ten Donkelaar
Hi,In the web_editor module, there's an xml file editor.xml inside views. Inside that there's a div with data-name="predefined_gradients", the gradients are set up from here.
You can inherit this template and add your gradients using xpath.
<template id='custom' name='Custom' inherit_id='web_editor.
<xpath expr="//div[@data-name='
<div class="o_colorpicker_section" data-name="predefined_
<t t-set="gradients" t-value="[
'linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%)',
'linear-gradient(135deg, rgb(102, 153, 255) 0%, rgb(255, 51, 102) 100%)',
'linear-gradient(135deg, rgb(47, 128, 237) 0%, rgb(178, 255, 218) 100%)',
'linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%)',
'linear-gradient(135deg, rgb(214, 255, 127) 0%, rgb(0, 179, 204) 100%)',
'linear-gradient(135deg, rgb(255, 222, 69) 0%, rgb(69, 33, 0) 100%)',
'linear-gradient(135deg, rgb(222, 222, 222) 0%, rgb(69, 69, 69) 100%)',
'linear-gradient(135deg, rgb(255, 222, 202) 0%, rgb(202, 115, 69) 100%)'
//Your custom gradients in list form
]"/>
<t t-foreach="gradients" t-as="gradient">
<button class="w-50" t-attf-style="background-
</t>
</div>
</xpath>
</template>
Hope it helps
Hi Cybrosis,
Thanks for the answer, i tried something similar like this:
<xpath expr="//div[@data-name='predefined_gradients']" position="inside">
<t t-set="aardug_custom_gradient"
t-value="'linear-gradient(190deg, rgb(133, 247, 247) 0%, rgb(32, 197, 213) 100%)'"/>
<button class="w-50" t-attf-style="background-image: #{aardug_custom_gradient};"
t-att-data-color="aardug_custom_gradient"/>
</xpath>
However both don't seem to work, it still shows me the original 8 gradients. It does correctly load in the view, with no errors. Feel like there is something else I'm missing. Any clue?
Hi, Instead of using position inside try replace and add like this:
<div class="o_colorpicker_section" data-name="predefined_gradients">
<t t-set="gradients" t-value="[
'linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%)',
'linear-gradient(135deg, rgb(102, 153, 255) 0%, rgb(255, 51, 102) 100%)',
'linear-gradient(135deg, rgb(47, 128, 237) 0%, rgb(178, 255, 218) 100%)',
'linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%)',
'linear-gradient(135deg, rgb(214, 255, 127) 0%, rgb(0, 179, 204) 100%)',
'linear-gradient(135deg, rgb(255, 222, 69) 0%, rgb(69, 33, 0) 100%)',
'linear-gradient(135deg, rgb(222, 222, 222) 0%, rgb(69, 69, 69) 100%)',
'linear-gradient(135deg, rgb(255, 222, 202) 0%, rgb(202, 115, 69) 100%)',
'linear-gradient(190deg, rgb(133, 247, 247) 0%, rgb(32, 197, 213) 100%)'
]"/>
<t t-foreach="gradients" t-as="gradient">
<button class="w-50" t-attf-style="background-image: #{gradient};" t-att-data-color="gradient"/>
</t>
</div>
Create an account today to enjoy exclusive features and engage with our awesome community!
Sign up| Related Posts | Replies | Views | Activity | |
|---|---|---|---|---|
|
1
मई 25
|
2878 | ||
|
0
जुल॰ 24
|
256 | ||
|
1
अग॰ 23
|
4332 | ||
|
0
मई 23
|
2825 | ||
|
0
अप्रैल 23
|
3569 |
1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.
