While creating boolean switches for a Marketo email 2.0 template we noticed that the content didn't show in the modules inside the email editor. The reason being is that Marketo shows the module previews with their boolean value set to "false" even if the default is set to "true".
Wanting to have the content show we needed to make the booleans set to "false" with the values for that inverted from the true value.
That makes the "active" switches look grey instead of green.
Long story short, is it possible to make the button switch green for "false" and grey for "true"? I put the style in my email template but Marketo UI doesn't read the css at all!
Here are the classes for the boolean switches with their colors inverted and !important added, to no effect:
.x4-reset .x4-toggle-label-off{background-color:#00b73a!important;color:#fff!important;}.x4-reset .x4-toggle-label-on {background-color: #cbcbcb!important;color: #626864!important;}
I also tried being very specific using the id's for the boolean switch and it was still completely ignored.
Does anyone know if it's possible to change the boolean switches colors?
Your CSS can't take effect because you're referring to a different document (the parent document of the IFRAME). While it's technically possible to jump that hurdle, the resulting setup will be extraordinarily fragile.
This kind of UI hack should be off-limits if there's any alternative (the alternative including "living with the gray background").
I understand that it should be off-limits, I was just wondering if I could manipulate it a little with a simple color change, I'm not breaking anything.
Once you break out of the frame to apply that style, you then also have to hide the script that breaks the frame (using Velocity) so it never gets sent to users. it's a very complex setup for not enough payoff IMO. There's no way to simply change it, you already tried the simple way!
Just out of curiosity, do you have four variables defined in the template to execute what appears to only be two scenarios? If so, you could accomplish what you are looking to do with defining the two variables below. Am I missing anything?
<meta class="mktoBoolean" id="border-under-title" mktoName="Border Under Title" default="true" false_value="[Your False Value Here]" true_value="[Your True Value Here]" false_value_name="Yes" true_value_name="No">
<meta class="mktoBoolean" id="title" mktoName="Title" default="true" false_value="[Your False Value Here]" true_value="[Your True Value Here]" false_value_name="On" true_value_name="Off">
I don't know what you mean by four variables defined. There are two.
I put the default to false so I could see the content in the module preview. Marketo uses the variable as false for module previews.
<meta class="mktoBoolean" id="Border02" mktoname="Border Under Title" true_value_name="No" true_value="0" false_value_name="Yes" false_value="2" default="false" mktomodulescope="true" />
<meta class="mktoBoolean" id="ShowTitle" mktoname="Title" false_value_name="On" false_value="cursor:auto;" true_value_name="Off" true_value="display:none; max-height:0px; height:0px; max-width:0px; opacity:0; overflow:hidden;" default="false" mktomodulescope="true" />
In doing so, it makes the "active" on switch grey, because its technically false, but I wanted to have the color be green for false and grey for true in this particular case.
I may be confused on what you are looking to do, but can't this be resolved by using the inverse of the TRUE/FALSE values stated?
We did invert the true/false values, but like I said previously, Marketo email module previews use the false value, therefore because we use the false value for the default value, it shows a grey button.
Hi Bryan,
It's exactly what I did, I inverted the true and false values. And I put the false value as the default one. That way in the Email Editor the preview render in the module list. The default value should show a green switch because this is what is activated by default. Looks like Marketo put the green color on the True value instead of the Default value. But because we use the false value for the default value, it shows a grayed out button. It's better than no preview at all, but it's not intuitive/logic...
Have you tried to assign the defaults to True for each variable and assign the True Value Name & Value to what is currently listed as the false value/name. This way, your default color would show as Green.