Issues adding custom css to form theme | Community
Skip to main content
A
Anonymous
August 27, 2014
Solved

Issues adding custom css to form theme

  • August 27, 2014
  • 13 replies
  • 2912 views
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
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
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).

13 replies

A
Anonymous
Accepted solution
August 27, 2014
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
Corey_Bethel
New Participant
August 27, 2014
Add this code to change the color of the asterisk:

.mktoForm .mktoAsterix {
    color: #FFFFFF !important;
}
Corey BethelConsultant | Etumos
A
Anonymous
August 27, 2014
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.




A
Anonymous
August 27, 2014
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
Corey_Bethel
New Participant
August 27, 2014
Also, the closing bracket "}"directly above /*MY CUSTOM STYLE ENDS */ should be moved to right above /* MY CUSTOM STYLE STARTS */

Make sense?
Corey BethelConsultant | Etumos
Corey_Bethel
Corey_Bethel
New Participant
August 27, 2014
Richard,

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

Corey BethelConsultant | Etumos
A
Anonymous
August 27, 2014
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
A
Anonymous
August 27, 2014
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
Corey_Bethel
New Participant
August 27, 2014
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. 
Corey BethelConsultant | Etumos
A
Anonymous
August 27, 2014
https://app-sj03.marketo.com/m#FOP1047

Let me know if the link above is what you are looking for. thanks
Show more replies
Terms & ConditionsAccessibility statement

Loading footer...