Change color Marketo boolean switches in Editor

Crystal_Pacheco
Level 2

Change color Marketo boolean switches in Editor

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?

Screen Shot 2019-05-27 at 2.55.47 PM.png
Screen Shot 2019-05-27 at 3.05.07 PM.png

9 REPLIES 9
SanfordWhiteman
Level 10 - Community Moderator

Re: Change color Marketo boolean switches in Editor

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").

Crystal_Pacheco
Level 2

Re: Change color Marketo boolean switches in Editor

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.

SanfordWhiteman
Level 10 - Community Moderator

Re: Change color Marketo boolean switches in Editor

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!

Bryan_Epstein
Level 5

Re: Change color Marketo boolean switches in Editor

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">‍‍
Crystal_Pacheco
Level 2

Re: Change color Marketo boolean switches in Editor

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.

Bryan_Epstein
Level 5

Re: Change color Marketo boolean switches in Editor

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?

Crystal_Pacheco
Level 2

Re: Change color Marketo boolean switches in Editor

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.

Re: Change color Marketo boolean switches in Editor

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...

Bryan_Epstein
Level 5

Re: Change color Marketo boolean switches in Editor

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.