Aloha and welcome. In this video I show you how to quickly and easily style your Ninja Forms with a dark style.
The CSS code is provided below. You do need to add the css class .contact-dark to your WordPress CSS file or to your themes custom css placement and to the Ninja Form settings as well.
Please follow the video for complete instructions.
NOTE: The video will show here once it has been published.
/* Contact DARK Styles */
.contact-dark {
background: #2f3542;
padding: 10px 30px 40px 30px;
border: 1px solid rgb(236, 236, 236);
border-radius:30px;
box-shadow: rgba(0, 0, 0, 0.20) 0px 3px 8px;
font-family: Arial, Helvetica, sans-serif;
color: #f1f2f6;
}
.contact-dark h3 {
color: #f1f2f6;
}
.contact-dark .nf-field-label {
color: #a4b0be;
text-transform: capitalize;
}
.contact-dark .nf-form-content input:not([type=button]), .contact-dark .nf-form-content textarea {
background: #2f3542;
border: 1px solid #57606f;
border-radius: 30px;
box-shadow: none;
color: #787878;
transition: all .5s;
}
.contact-dark .nf-form-content input[type=button] {
background: #7bed9f;
width:50%;
font-weight: 700;
font-size: 22px;
border-radius: 30px;
}
.contact-dark .nf-form-content input[type=button]:hover {
background: #2ed573;
color:#fff;
text-decoration:none;
}
.contact-dark .nf-error.field-wrap .nf-field-element:after {
background: #ff6348;
border-radius: 0 30px 30px 0;
}
.contact-dark .nf-form-fields-required {
margin-bottom: 10px;
color:#ff6348;
}
.contact-styled .nf-error .nf-error-msg {
color: #ff6348;
}
.contact-dark .nf-error-msg, .contact-dark .nf-error .nf-error-msg, .contact-dark .ninja-forms-req-symbol, .contact-dark .nf-error .ninja-forms-field {
color: #ff6348 !important;
border-color:#ff6348 !important;
}
.contact-dark .nf-pass.field-wrap .nf-field-element:after {
color: #2ecc71;
content: "\f164";
}
/* End Contact DARK Styles */
