Editing Form CSS

Alison_Moulton1
Level 1

Editing Form CSS

I want to edit the button in my forms to be brand compliant. I attempted to edit the CSS but the CSS I have isn't over-riding the current button style. What am I missing? Has anyone ever done this before? #forms css #css style

7 REPLIES 7
SanfordWhiteman
Level 10 - Community Moderator

Re: Editing Form CSS

Has anyone ever done this before?

People use custom CSS all the time!

But without your code (pls highlight using the Advanced Editor's syntax highlighter) and a link to your page, we couldn't possibly tell you what you're missing.

Alison_Moulton1
Level 1

Re: Editing Form CSS

ahh yes I forgot the most important piece. 

#mktoStyleLoaded {
/* css load detection, do not remove */
/* button style */
.mktoButton {
background: #ff7e21;
color: #ffffff;
border-color: #ff7e21;
box-shadow: none;
font-size: 0.875rem;
padding: 0.625rem 1.125rem;
line-height: 1.5;
border-radius: 0.2rem;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
text-shadow: none;
}
.mktoButton:hover {
background: #ff9b54;
color: #ffffff;
border-color: #ff9b54;
}

I'm not sure how to highlight using the Advanced Editor's syntax highlighter.

Alison_Moulton1
Level 1
SanfordWhiteman
Level 10 - Community Moderator

Re: Editing Form CSS

Like so:

pastedImage_1.gif

Choosing CSS from the dropdown in your case.

Dave_Roberts
Level 10

Re: Editing Form CSS

Hey Alison, 

This is actually a silly problem with load order of the form styles that's keeping you from seeing your CSS. What's happening is that Marketo is loading the CSS you've added into the <head> of the document (at the top) and then is loading the form's CSS inline with the form (below). The way CSS works is that the last (or most bottom) style is what gets rendered on the page -- in this case it's the native Marketo Form CSS that's overriding your custom CSS.

To get your CSS to override the form's CSS (when it comes before the form's CSS) you can simply add an "!important" flag onto your rules and that'll tell the machine that even if it comes before that it's the style that should show up.

/* button style */
.mktoButton {
background: #ff7e21 !important;
color: #ffffff !important;
border-color: #ff7e21 !important;
box-shadow: none !important;
font-size: 0.875rem !important;
padding: 0.625rem 1.125rem !important;
line-height: 1.5 !important;
border-radius: 0.2rem !important;
font-weight: 700 !important;
font-family: 'Open Sans', sans-serif !important;
text-shadow: none !important;
}
.mktoButton:hover {
background: #ff9b54 !important;
color: #ffffff !important;
border-color: #ff9b54 !important;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Here's a few other tips that I noticed looking at this page:

> You probably don't want to use the Marketo Button picker, it only makes it harder to override your button styles. I usually go with the default styles and then use the Custom CSS to style up my button (so I've got more control). 

> Another thing I like to make sure is setup on my forms is to use the (7of7) Plain theme. This adds the least add'l CSS to your forms and basically creates less stuff to have to override in your stylesheet.

> For what it's worth, any styles beyond the button styles that are already declared in the Marketo Form styles will need to get the !important flag as well to override those styles -- for the inputs and row and columns and stuff.

> I'll usually use the Custom CSS option on pg2 of the form editor (under the purple gear on the right side of the page) rather than the Theme CSS. The Theme CSS has to do with all the extra styles that get added when you pick 1 of the 7 themes for your form.

Hope this helps, let me know if adding those important flags doesn't clear this up and I'll take another look.

-Dave

Alison_Moulton1
Level 1

Re: Editing Form CSS

Thank you Dave!!

Dave_Roberts
Level 10

Re: Editing Form CSS

Hey Alison, would you mind marking my solution as "correct" if it worked for you? It'll close out the question (make it a green icon instead of blue) so that folks can see it's been answered if they run into something similar.

Thanks again and let me know if there's anything that's not working here, I'd be happy to help out where I can.

-Dave