Issues adding custom css to form theme

[Anonymous]

Using forms 2.0, I selected the form theme "simple" and all I wanted to do is change the button style and change the font color to white since my background color is blue. I followed the instructions "edit the css of a form theme" tutorial and I copied the code and pasted it in the "edit custom css" field. Still no luck.

Not sure if it makes a difference but I am embeding the code into my custom css landing page.

Thanks in advance.

See attached added code in blue. Thank you in

[Anonymous · Accepted solution]

By using the WYSIWYG button style, the style is overriding the ones I provided. You can either revert back to the original button or add !important tags at the end of each one of my properties (i.e. font-size:18px !important).

[Corey_Bethel]

Add this code to change the color of the asterisk:

.mktoForm .mktoAsterix {

    color: #FFFFFF !important;

}

[Anonymous]

Almost there. I appreciate you guys helping. http://info.cnlsecurities.com/formtest5.html

How do I update the asterisk from red to white. I assume that the color: fff wouldve udated that.

The code above helped change the font color to white but it appears to ignore the rest of the button styles. It did accept the button style to width 100% but everything else didnt showup. However,  I went to the wiziwig to change the button color to orange which worked out great. Just need to fix the font 18px and padding 12px. Any thoughts? Again, I appreciate you guys helping out a new marketo user.

[Anonymous]

I'm guessing you want the bottom form to look like the top? Here's some code to get you going:

label.mktoLabel {

    color: #fff;

}

button.mktoButton {

    color: #fff;

    font-size: 18px;

    background: #ffa02f;

    padding: 12px;

    text-decoration: none;

    width: 100%;

    border: none;

    border-radius: 0px;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

}

span.mktoButtonWrap {

    margin-left: 0 !important;

}

.mktoButtonRow {

    width: 100%;

}

[Corey_Bethel]

Also, the closing bracket "}"directly above /*MY CUSTOM STYLE ENDS */ should be moved to right above /* MY CUSTOM STYLE STARTS */

Make sense?

[Corey_Bethel]

Richard,

You need to add a period before mktoForm. That should fix it!

[Anonymous]

Jason, below is a link to the page.

http://info.cnlsecurities.com/formtest3.html

I was hopefull with Corey's but that didnt change anything. see attached. thanks again

[Anonymous]

Was looking for the form on a publicly accessible page if possible. Give Corey's code a try and if it doesn't work we'll try again 🙂

[Corey_Bethel]

Richard,

I use this to custom syle my buttons. Hopefully it'll work for your buttons.

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {

    color:#FFFFFF !important;
    //Place property and styles here.

}

I put !important after each style to make sure the browser uses my styles instead of Marketo's. 

[Anonymous]

https://app-sj03.marketo.com/m#FOP1047

Let me know if the link above is what you are looking for. thanks

[Anonymous]

Richard,

Can you share a link to the page? Always easier to work with the actual code in question. Thanks!

[Anonymous]

Jason,
that did not work. see attached. thank you for responding

[Anonymous]

You'll need to be more specific with your CSS selectors. Try this code:

label{
      color: #fff;
}

.mktoButton{
     * Your Button Code *
}