Se rendre au contenu
Menu
Cette question a été signalée

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

Avatar
Ignorer
Meilleure réponse

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.colorpicker'>

<xpath expr="//div[@data-name='predefined_gradients']" position="replace">

<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%)'

              //Your custom gradients in list form
            ]"/>
            <t t-foreach="gradients" t-as="gradient">
<button class="w-50" t-attf-style="background-image: #{gradient};" t-att-data-color="gradient"/>
            </t>
</div>

</xpath>

</template>


Hope it helps

Avatar
Ignorer
Auteur

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>

Publications associées Réponses Vues Activité
1
mai 25
1662
0
juil. 24
256
1
août 23
2701
0
mai 23
1847
0
avr. 23
2550