feature request: parsing multiple values with select property

[InfGame]

I was trying to make a template with a Red, Green and Blue themed that had 3 different shades of each color.
I wanted to contol the Theme of the whole template with one property setting but could not find a way to parse all 3 hex values in 1 select property

I don't know if this feature already exists or not but it would be nice to be able to parse multiple values, be it strings, Integers, etc, with one property

[bago]

I'm not sure I understand your suggestion.

Can you both make an example of what the UI should look like and which template code you want to use?

[InfGame]

I'm not sure I understand your suggestion.

Can you both make an example of what the UI should look like and which template code you want to use?

The UI would look the same tho In the code i would like to instance some kind of array where i can save multiple values.

Then when calling it you can pull one of these values out like on a normal Array

For example:

Instancing the property:

Color{
label: Color;
widget: select;
options: ["#9e0529", "#720009","#f5e6e9"]=Red|["#38713f", "#0b4d1f", "#ebf1eb"]=Green|["#286f9c", "#104166", "#e9f0f5"]=Blue;
}

Calling the property:

[bago]

This is completely far from the mosaico logic to deal with variables and theming, so I'd say we won't do that.

if the 2 additional colors can be computed from the first one you could have a look to the Color utility function.

You can have a look at the big button in the versafluid template:
https://mosaico.io/templates/versafluid/template-versafluid.html

<td align="center"><a href="" target="_blank" 
  style="display: inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; 
    color: #ffffff; text-decoration: none; background-color: #9C010F; 
   padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; 
   border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; 
   border-bottom:3px solid #69010A; -ko-border-bottom:@[bigbuttonlightStyle.shadow]px solid @[Color.getBrightness(bigbuttonlightStyle.buttonColor) lt 40 ? Color.lighten(bigbuttonlightStyle.buttonColor,25) : Color.darken(bigbuttonlightStyle.buttonColor,12)]; 
   -ko-font-size: @[bigbuttonlightStyle.size]px; 
   -ko-font-family: @bigbuttonlightStyle.face;  
   -ko-color: @bigbuttonlightStyle.color; 
   -ko-background-color: @bigbuttonlightStyle.buttonColor; 
   -ko-border-radius: @[bigbuttonlightStyle.radius]px;
   -ko--webkit-border-radius:@[bigbuttonlightStyle.radius]px;
   -ko--moz-border-radius: @[bigbuttonlightStyle.radius]px;
   -ko-attr-href:@buttonLink.url" class="mobile-button"
 data-ko-editable="buttonLink.text">Show More →</a></td>

As you can see the "@[Color.getBrightness(bigbuttonlightStyle.buttonColor) lt 40 ? Color.lighten(bigbuttonlightStyle.buttonColor,25) : Color.darken(bigbuttonlightStyle.buttonColor,12)]" reads a single color ( buttonColor ) and then apply to the button shadow a ligher or darker color depending on the original brightness.

You also see that mosaico supports 3 state expression, so you can also define a select to choose between 3 labels:

options: blues|reds|greens;

And then in the template use nested tristate code to choose a specific color depending on the

<div style="color: '#CCDDCC'; 
  -ko-color: @[colorPalette == 'blues' ? '#CCDDCC' : colorPalette == 'reds' ? '#FFEE00' : '#CCDDAA']"
>content</div>

[InfGame]

interresting. ok i didnt know that this works. I might try that and see if it s possible for my use

[InfGame]

Sadly i cant get it to work for me- it keeps giving me Model ensure path failed undefined name for any element it try it with.

full error:

Model ensure path failed undefined name -ko-background-color value @[theme == 'Red' ? '#9e0529' : theme == 'Green' ? '#38713f' : '#286f9c'] default #9e0529 element

Exception while parsing the template Exception parsing expression @[theme == 'Red' ? '#9e0529' : theme == 'Green' ? '#38713f' : '#286f9c'] Trying to alter non writeable model: bodyTheme / theme

[bago]

Try with a different name than "theme": "theme" has special meaning inside mosaico.

Try with "colorScheme" or "colorPalette" like in my example.

[InfGame]

it works now but it only changes one Block at a time. I want the setting to change the color theme of the whole template.

[InfGame]

it also seems to not be in the style section anymore. rather in the content section

[bago]

If you want it in the Style tab either declare it in the -ko-supports definition adding a "category: style" property:

colorScheme {
  category: style
}

or simply name it colorStyle and the naming convention will do it automatically.

[InfGame]

It Works now! Thank you so much for showing me this

[InfGame]

I gont one more question tho. one element seems to have a little box icon nixt to the drop down which indicates that it is speciffic for this element. as long as this is there it doesnt change with the others. I dont know how it got there and i also dont know how to remove it. can you help me?

[InfGame]

also can I turn of block speciffic styles overall? so you cant edit a blocks style individually

[InfGame]

this only happens on the first block i drag into the editor (doesn't matter which one). every other block changes with the global setting.