How to add limited-choice to change background color in module?

[DZgliński]

Hi,
I want to add a limited choice (5 colors) of choosing background for object in module.
I want to user to be able to change background color on his own. It is simple code but i can't wrap my head around it.

I want for to be able to choose for single <li> a background color. And then if he will add another element so he can choose seperate background color for it as well.

[webdew]

Hi @DZgliński ,

You ave need to create choice and like screenshot https://prnt.sc/1y1clzo then use if else condition and pass color value in accordinly
and update module

{% if module.design.button_style_type =='Default'%}

your code here

{% elif module.design.button_style_type =='uppercase'%}
your code here
{% endif %}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[piersg]

Add a choice field to the benefit_value_1 group and define the colours you're letting the user choose between.

Then you can either have your backgrounds added as a class (will be easier to change in the future if you need to). For this you can just make the labels and values in the choice field the same e.g. Label: "Blue" and Value: "blue" so the below would give a class "bg-blue" which you define in CSS.

<ul>
{% for item in module.benefit_value_1 %}

<li class="benefit__value{% if item.background_color %} bg-{{item.background_color}}{% endif %}">
..etc
</li>

{% endfor %}
</ul>

Or you can write it inline. For this you would have to make the values in the choice field a hex code e.g. Label: "Blue" Value: "#0000FF"

<ul>
{% for item in module.benefit_value_1 %}

<li class="benefit__value"{% if item.background_color %} style="background-color:{{item.background_color}};"{% endif %}>
..etc
</li>

{% endfor %}
</ul>

[Jake_Lett]

One idea would be to add a choice field with your 5 colors as hex code strings. Then on the li add an inline style tag with that value. This way each li added will have a unique color, but only one of the 5 colors you specify.