Color picker into custom module

[PEF]

Hello,

Do you know if it is possible to add a color picker into custom modules? I want to give the user the choice to edit the background color of my email cover directly into the content editor. Otherwise, How can I set the color background of the custom module directly into the template? thanks for your feedback.

Thakns for your helps!!

[Jsum · Accepted solution]

@PEF,

Is it a set list of of colors? I've done this before with a set list of colors using a choice module. You would have to set the colors inline instead of in a style sheet (or in the head, but I don't think I've tried this). set the color value to either the choice module containing the choices and set to no_wrapper-True, or set the choice module to export_to_template_content=True and set the value token for the choice as the color value. 

In the editor there will be a drop down, choosing a color from the drop down will apply that color value to whatever element's css attrubute you are wanting to change. 

<div style="background: {% choice 'bg_color' label='div BG Color', value='#fff', choices='#fff, #f3f3f3, #bbb, rgba(155,245,67,.8)', no_wrapper=True %}'>

</div>

{% choice "bg_color" label="div BG Color", value="#fff", choices="#fff, #f3f3f3, #bbb, rgba(155,245,67,.8)", export_to_template_context=True %}

<div style="background: {{ widget_data.bg_color.value }};">

</div>

If you are using the template builder you can place either of these in the css settings for a module/wrapper. 

In all cases you should be hyper sensitive to nesting quotations.

[Jsum · Accepted solution]

@PEF,

Is it a set list of of colors? I've done this before with a set list of colors using a choice module. You would have to set the colors inline instead of in a style sheet (or in the head, but I don't think I've tried this). set the color value to either the choice module containing the choices and set to no_wrapper-True, or set the choice module to export_to_template_content=True and set the value token for the choice as the color value. 

In the editor there will be a drop down, choosing a color from the drop down will apply that color value to whatever element's css attrubute you are wanting to change. 

<div style="background: {% choice 'bg_color' label='div BG Color', value='#fff', choices='#fff, #f3f3f3, #bbb, rgba(155,245,67,.8)', no_wrapper=True %}'>

</div>

{% choice "bg_color" label="div BG Color", value="#fff", choices="#fff, #f3f3f3, #bbb, rgba(155,245,67,.8)", export_to_template_context=True %}

<div style="background: {{ widget_data.bg_color.value }};">

</div>

If you are using the template builder you can place either of these in the css settings for a module/wrapper. 

In all cases you should be hyper sensitive to nesting quotations.

[PEF]

hi Jsum, thanks for your help. i was rather thinking of a color picker. But I'kll try your way.

thanks a lot!

[Jsum · Accepted solution]

Hubspot doesn't have a color picker module unfortunately. any solution you find will be a hack.

[dmcn]

https://designers.hubspot.com/docs/hubl/hubl-supported-tags#color

Is there an example on how to use this within a template?

Understand it'll only apply to the page and accessible to a hubspot user, but would like to get a color picker setup.