My site requires a few pretty complex and long forms, so managing it all through Contact Form 7 is a bit too much work. To be able to use conditional formatting and other features, I\'ve decided to use Ninja Forms instead. The plugin seems to work well out of the box, and takes on Salient\'s form styling for all elements except for the drop down input.

Problem is that the drop down looks very different and I actually kind of prefer it to the default Salient styling.

I\'ve been able to confirm that I can re-style the form elements properly to match the look I\'m going for, but the only thing stopping me from getting the ideal look is the ascend.css has a background property which is set to transparent for all of the form inputs and I cannot figure out how to override it. It looks like this:

.container-wrap input[type="text"],.container-wrap textarea, .container-wrap input[type="email"],.container-wrap input[type="password"], .container-wrap input[type="tel"], .container-wrap input[type="url"],.container-wrap input[type="search"], .container-wrap input[type="date"] {

background-color: transparent!important;
border: 1px solid #ccc!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
font-size: 16px!important;
-o-box-shadow: none!important;
padding: 16px!important;

}

I managed to change all other necessary styling, as you can see from the first input on the form called "Full Name". And using Chrome inspector, if I disabled the "background-color: transparent" attribute, the field looks exactly how I want it to look. I\'m just unable to find a way to make it happen permanently on the live site.

• I\'ve tried adding my styling into the custom css area within the theme settings page.
• I\'ve tried adding my styling into the child theme\'s style.css
• I\'ve tried to create an ascend.css and place it in my child-theme directory, then add the custom css in that file.

None of the three methods seem to work. I basically need to change the one attribute from the ascend.css from this:

background-color: transparent!important;

to this:

background-color: #ffffff;

I\'d really also like to accomplish this using the most non-destructive way possible. So if this could be accomplished in the Custom CSS area within Salient\'s settings, it would be preferable, or even in the child theme\'s css. I\'d like to avoid having to edit the parent theme, as I want to be able to update the theme in the future without losing these changes.

Also, I\'d also like to request that you consider adding official support for Ninja Forms in future updates. Contact Form 7 is great, but Ninja Forms seems to be steadily growing and it\'s much more robust.

Any help would be appreciated!

Bumping this thread. I had some trouble yesterday, I published this ticket and returned 2 hours later and was unable to locate it. Re-posted this thread here, and I'm noticing that support is actively replying to other tickets but not this one. Just making sure it's actually visible to support staff.

Yep that appears to have fixed the issue. Thanks!

Are you able to share more about how this was accomplished?  I'm also hoping to override the text area background setting for Ninja Forms but the "!important" tag in the ascend.css has so far made that impossible.

I'd like to keep the form styling elsewhere and only modify the styling for Ninja Forms to allow for a white text field background.

Thanks!