We have applied custom CSS to our Marketo forms. Sometimes when we view the forms on our site, the style of the cell borders changes. First, I'll see the cell border as we intended with our custom CSS; then I'll refresh or visit another page and come back to the original one and the border is a different color/style. Sometimes the cell shape changes, too.
I understand that Marketo publishes two stylesheets for their forms. One for their theme applied to the form, which one can override (within the constraints of CSS), by making edits to a second stylesheet, the custom stylesheet. In the Marketo theme, Marketo has overridden the `outline` CSS property, setting it to none. I believe this is the reason our form's cell borders change sometimes when we refresh a page.
Is there a way to override Marketo's theme with our custom CSS at all times?
Here's the CSS for one of our forms:
.mktoForm{color: #000000; max-width: 407px;width:378px !important; float:right; line-height: 34px; background: none repeat scroll 0% 0% #F0F0F0; padding: 10px 50px 20px 50px;
border-radius: 5px;font-family: 'Open Sans', sans-serif !important;}
label.mktoLabel {color: #000000;}
.mktoForm .mktoRequiredField label.mktoLabel{font-weight: normal;}
.mktoLabel {padding: 0 0 12px 0 !important; width: 109px !important;}
.mktoField{color: #000000; font-size: 14px !important; min-height: 33px; padding: 0px 0px 0px 5px !important; width: 100% !important; border: 1px solid #FAAA43; border-radius: 5px;}
.mktoOffset{width:0px !important; display:none !important;}
.mktoForm .mktoGutter{height:auto !important;}
.mktoForm .mktoFieldWrap{padding: 11px 0 0px 0;}
.mktoError{left:0px !important;}
.mktoButton{color: #000000 !important; font-size: 14px !important; min-height: 33px; padding: 0px 10px 0px 10px !important; width: 100%; border: 1px solid #FAAA43 !important; border-radius: 5px; background-color: #FFC000 !important; background-image: none !important;}
.mktoButton:hover{background-color: #fc9918 !important;}
.mktoButtonWrap{margin-left: 64px !important; display: inline-block;}
.mktoButtonRow{display: block !important; margin-top: 8px !important;}
.mktoAsterix {display:none !important;}
.mktoForm span {float:left;}
.tophead{
float: left;
margin-top: -2px;
margin-bottom: 0px;
}
.lastlab{float: left;
margin-top: -9px !important;
font-size: 13px !important;
}
.mktoForm * {
font-family: 'Open Sans', sans-serif !important;
}
.mktoFormRow{
width:250px !important;
}
.mktoTextField
{
width:278px !important;
}
.mktoEmailField
{
width:278px !important;
}
.mktoButton {
color:#000!important;
font-size:14px!important;
min-height:33px;
width:100%;
border:1px solid #FAAA43!important;
border-radius:5px;
background-color:#FFC000!important;
background-image:none!important;
padding:0 10px!important;
}
.mktoButton:hover {
background-color:#fc9918!important;
}
.mktoButtonWrap {
margin-left:72px!important;
display:inline-block;
}
.mktoButtonRow {
display:block!important;
margin-top:8px!important;
}
span.mktoButtonWrap.mktoGlow {
float: none;
margin: 0!important;
width: 100%;
}
.mktoForm {
width: 100%!important;
float: none;
max-width: none;
padding: 20px 50px 30px 50px;
}
.mktoForm .mktoFormRow {
clear: both;
width: auto!important;
}
.mktoForm .mktoFormCol {
float: none;
}
.mktoTextField,
.mktoEmailField{
width: 100% !important;
display: block;
float: none;
}
.mktoForm .mktoFieldWrap {
float: none;
padding: 0;
}
.mktoButtonRow {
margin-top: 30px!important;
}
.mktoForm h3 {
padding-left: 0;
}
span.mktoButtonWrap.mktoGlow {
max-width: 170px;
margin: 0 auto!important;
display: block;
}
.mktoForm input:focus {
outline: none;
border: 1px solid #fc9918!important;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
@media (min-width: 768px) {
.mktoForm {
max-width: 350px;
}
}
.png)
Adchoices