Using token for color of form button

[Guitarrista82]

Hello,

Our company has a number of clients for whom we use the Marketo platform. Each client has their own branding assets/colors, etc., which we display in our emails and landing pages.

In order to assign the branding assets in our emails and landing pages, e.g., logos, background colors, button colors, font colors, etc., we use tokens.

We have created a landing page in Marketo that is using a Marketo form. I would like to be able to use our {{lead.Brand Primary Color}} token to assign each brand's color to the form button color and font colors.

How would I go about doing this?

Thanks for your help,

LK

[SanfordWhiteman]

The background color is a gradient by default. How do you plan to deal with that?

Which form theme are you using? The selectors can change by theme.

[Guitarrista82]

I am using the Simple form theme and am trying to override some existing external CSS that was coded to change the form.

The landing page is Marketo but is a custom-edited page using external CSS, Javascript and other files. 

I am trying to code the CSS code within the HTML page itself to modify the look of the button.

[SanfordWhiteman]

Using CSS variables only to make the demo clearer — you can’t use them in production because they won’t work on IE11, so use actual values — this is how you’d override in Simple:

:root {
  --primary-marketo-font-color: violet;
  --primary-marketo-button-color: red;
  --secondary-marketo-button-color : gold;
  --secondary-marketo-font-color: whitesmoke;
}
.mktoForm {
  color: var(--primary-marketo-font-color) !important;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
  color: var(--secondary-marketo-font-color) !important;
  border: 1px solid var(--primary-marketo-button-color);
  background-color: var(--primary-marketo-button-color);
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-button-color)), to(var(--primary-marketo-button-color)));
  background-image: -webkit-linear-gradient(top, var(--secondary-marketo-button-color), var(--primary-marketo-button-color));
  background-image: -moz-linear-gradient(top, var(--secondary-marketo-button-color), var(--primary-marketo-button-color));
  background-image: linear-gradient(to bottom, var(--secondary-marketo-button-color), var(--primary-marketo-button-color));
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
  border:1px solid var(--secondary-marketo-button-color);
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
  border:1px solid var(--secondary-marketo-button-color);
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active{
  background-color: var(--secondary-button-color);
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--primary-marketo-button-color)), to(var(--secondary-marketo-button-color)));
  background-image: -webkit-linear-gradient(top, var(--primary-marketo-button-color), var(--secondary-marketo-button-color));
  background-image: -moz-linear-gradient(top, var(--primary-marketo-button-color), var(--secondary-marketo-button-color));
  background-image: linear-gradient(to bottom, var(--primary-marketo-button-color), var(--secondary-marketo-button-color));
}

[Guitarrista82]

Thank you Sanford.

If I'm understanding this correctly, in the root section, the --primary-marketo-font-color/--primary-marketo-button-color and --secondary-marketo-button-color/--secondary-marketo-font-color represent the brand colors that I would enter for our company's clients? 

:root {
  --primary-marketo-font-color: violet;
  --primary-marketo-button-color: red;
  --secondary-marketo-button-color : gold;
  --secondary-marketo-font-color: whitesmoke;
}

 And then all the code below that would be referencing back to the root code? So if I have like 20 or so clients all with different branding colors (a primary and secondary color), I would need to enter that info in the root section?

[SanfordWhiteman]

No, you wouldn’t use CSS variables at all in your final code, because they’re not compatible with all browsers you need to support.

You can however use them for testing in the latest versions of Chrome/Edge/Firefox/Safari, because they‘re easier to read and you can see how each variable affects the final styles.