Drop down titles within email template variables

[SanfordWhiteman]

Nice one Jo!

How about a custom CSS --property instead of a comment, since it might be more readable?

values="--Style: Gold--; border-color:#A18458; text-decoration:none;, --Style: Blue--; border-color:#2d3871; text-decoration:none;"

(Yes, that's a valid inline style.)

[Jo_Pitts1]

@SanfordWhiteman ,

Given the width of the Marketo Drop Down list for variables is quite narrow, I wonder if losing so much space to '--style..' isn't less usable??

Probably six of one half a dozen of the other 🙂

Cheers

Jo

[SanfordWhiteman]

You could use

---: Gold

that's valid too.

But yes, that's 2 characters more than

/* Gold

I just think it's more readable.

[sreeja01]

Hi Josh,

I tried implementing the solution you suggested using the <meta class="mktoList"> with CSS comments to provide human-readable labels. Unfortunately, it’s not working as intended.

The main issue is that Marketo does not support inline comments (/* */) in the values attribute. These comments are not properly parsed by Marketo, causing the dropdown to break or not render the list as expected. Additionally, the values field in Marketo requires strict syntax, such as comma-separated hex codes or other valid CSS properties, without any extra characters like semicolons or comments.
Here's how, I've added:
<meta class="mktoList" id="backcolor1" mktoname="Module Background Color" default="/*ghostwhite*/ #F8F8F8;"
values="/*orange*/ #f07622;,
/*Darkslategray*/ #333e48;,
/*Charcoal Black*/ #101721;,
/*White*/ #ffffff;,
/*ghostwhite*/ #F8F8F8;"
mktomodulescope="true" />

If you find any workaround for this, let me know!

Thanks,
Sreeja

[Jo_Pitts1]

@sreeja01 ,

I have a revised solution that works well.  It also resolves the issue that some email clients don't like comments in the CSS.

Define your various brand colours like so:

<meta class="mktoString" id="Lt Blue" mktoname="Lt Blue" default="#8CB9E9" mktomodulescope="true" /> 
    <meta class="mktoString" id="Md Blue" mktoname="Md Blue" default="#0AB2BF" mktomodulescope="true" /> 
    <meta class="mktoString" id="Dk Blue" mktoname="Dk Blue" default="#001E6D" mktomodulescope="true" /> 
    <meta class="mktoString" id="Lt Gray" mktoname="Lt Gray" default="#E6E7E8" mktomodulescope="true" /> 
    <meta class="mktoString" id="Div Gray" mktoname="Div Gray" default="#979797" mktomodulescope="true" /> 
    <meta class="mktoString" id="Md Gray" mktoname="Md Gray" default="#939598" mktomodulescope="true" /> 
    <meta class="mktoString" id="Dk Gray" mktoname="Dk Gray" default="#4D4D4F" mktomodulescope="true" /> 
    <meta class="mktoString" id="Lt Green" mktoname="Lt Green" default="#108A12" mktomodulescope="true" /> 
    <meta class="mktoString" id="Md Green" mktoname="Md Green" default="#005902" mktomodulescope="true" /> 
    <meta class="mktoString" id="Dk Green" mktoname="Dk Green" default="#002300" mktomodulescope="true" /> 
    

Then have a list that references the Marketo variable names like so:

<meta class="mktoList" mktomodulescope="true" id="mktoMyFontColor" mktoname="Font Color" values=" ${Lt Gray},${Md Gray},${Dk Gray},${Lt Green},${Md Green},${Dk Green}" default="${Lt Green}" /> 
    

You'll see I didn't use ALL the brand colours in my list.  You make your list contain the colours that are relevant to a given context within the template.

You can see this is using a form of abstraction.  It doesn't work outside the Marketo modules (it used to, but Marketo changed something recently), as it requires Marketo to process everything twice (firstly it swaps out ${mktoMyFontColour} for which every colour you chose e.g. ${Md Green}, and then swaps out the ${Md Green} for the actual HTML colour code.  So, you can't use it for setting a global background colour for example (but that can still be handled by handling background colour at a module level)

Cheers

Jo