SOLVED

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

Go to solution
artur92
Level 2

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

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: 

Bildschirmfoto 2024-08-20 um 10.10.04.png

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: 

 
<meta class="mktoList" id="TDM-Background" mktoName="Background Color" values="#005F7F, #91397F, #002A49" mktoModuleScope="true">
 
Thank you in advance and best regards! 

 

Tags (3)
2 ACCEPTED SOLUTIONS

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

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

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

View solution in original post

SanfordWhiteman
Level 10 - Community Moderator

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

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

View solution in original post

8 REPLIES 8
SanfordWhiteman
Level 10 - Community Moderator

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

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

Disha_Goyal6
Level 4

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

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
Level 10 - Community Moderator

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

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

artur92
Level 2

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

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
Level 10 - Community Moderator

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


@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
Level 4

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

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
Level 10 - Community Moderator

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

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

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

Hi @SanfordWhiteman, thanks for sharing the code.