Re: E-Mail Template: Replace color codes in Dropdown Menu with Color Names

artur92 · ‎08-20-2024

Hey guys,

we are currently trying to optimize our e-mail template and are therefore using the possibilities Marketo gives us in coding and designing the HTML.

When defining variables, we also use a dropdown to give users the choice of a predefined background color:

As you can see, the values users can choose from are the Color codes in HEX format. My question is: Is it possible for us to replace these codes with "color names", so users don't have to choose from a cryptic code but can instead choose the color they like?

The code in our template inside the <head> Part currently looks like this:

Thank you in advance and best regards!

SanfordWhiteman · ‎08-20-2024

Some people add a /* CSS comment */ in front of the hex code.

View solution in original post

SanfordWhiteman · ‎08-22-2024

<meta class="mktoList" id="TDM-Background" mktoName="Background Color" values="--ourred; color: #aa0000,--ourblue; color: #0000cc" mktoModuleScope="true">

View solution in original post

SanfordWhiteman · ‎08-20-2024

Some people add a /* CSS comment */ in front of the hex code.

Disha_Goyal6 · ‎08-20-2024

Hi @artur92, I don't think there is a way to define color name. If we add color name then value will not render correctly.

SanfordWhiteman · ‎08-20-2024

Did you read my comment? (And there’s another way, too: use a CSS variable in addition to the hex code.)

artur92 · ‎08-21-2024

Hi SanfordWhiteman,

thanks for the tip with the comments, it works great! Simple and smart, just how I like it 🙂

The other way does sound a little bit more complex, but just out of curiosity: How would I accomplish this with using CSS variables?

Best regards

SanfordWhiteman · ‎08-21-2024

@artur92 wrote:

Hi SanfordWhiteman,

thanks for the tip with the comments, it works great! Simple and smart, just how I like it 🙂

The other way does sound a little bit more complex, but just out of curiosity: How would I accomplish this with using CSS variables?

Best regards

If your values are like --ourbeige; color: #aabbcc then the resulting CSS is valid (color: --ourbeige; color: #aabbcc;) but you get to show the color name first in the list.

Disha_Goyal6 · ‎08-21-2024

Hi @SanfordWhiteman, This is amazing feature. I will try this for sure. Could you give me any example how you are defining or a screenshot for reference?

SanfordWhiteman · ‎08-22-2024

<meta class="mktoList" id="TDM-Background" mktoName="Background Color" values="--ourred; color: #aa0000,--ourblue; color: #0000cc" mktoModuleScope="true">

Disha_Goyal6 · ‎08-22-2024

Hi @SanfordWhiteman, thanks for sharing the code.