GUID for the custom module instance?

[raray]

I have a module (several actually) that need the ability to be arbitrarily customized by selecting a color. The easiest way I can think of to do this is by embedding some CSS in the module and modifying it using a color picker. Unfortunately, without a unique ID per module instance to make use of, changing the CSS for one module would change it for every module on the page. Anyone run into this issue before and have a workaround?

[Jsum]

@raray,

The new design tools' custom module interface has many field options including a color field. 

Since its release I have built several "banner" modules that use the color fields for inline color change options. You can create gradients, transparencies, and etc. the user chooses the color(s) on the editor page, per instance of the module, which sounds like what you are needing. You can even use the color field as/in a repeater group and still have control over each instance of the field. 

Need help? Hire Us Here

[raray]

Thanks, but implementing a color picker isn't the issue. (I mentioned a color picker in the OP as did the first responder in the thread.)

[Jsum]

@raray your going to have to explain better. All I am understanding is that you need to custom some colors unique to each instance of a module and everything I know tells me that this should be an issue and it makes me think maybe your misunderstanding how custom modules work. That is just based on what you've given me. More info or examples would be helpful.

Need help? Hire Us Here

[tjoyce]

@raray - Can it be an inline style?

<div style="color: {{module.colorPicker.color}};"></div>

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[raray]

No, it can't be solved with inline styles as I need to apply colors to text within a WYSIWYG editor.

At the moment I am solving the problem by creating a UID for the module thusly:

{% set UID = module|length ~ '-' ~ module.content|length %}

... and then using that to create an ID for styling:

#big-feature-{{ UID }}

It should USUALLY work, but obviously there is danger for overlap.