Přejít na obsah
Menu
You need to be registered to interact with the community.
This question has been flagged
1 Odpovědět
1226 Zobrazení

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
Zrušit
Nejlepší odpověď

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
Zrušit
Autor

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>

Related Posts Odpovědi Zobrazení Aktivita
1
kvě 25
1646
0
čvc 24
256
1
srp 23
2689
0
kvě 23
1846
0
dub 23
2537