Infinity Pro – Ninja Form not picking up theme's button design

[emotpix2]

Hi,
When I go to the infinity pro demo contact page, the submit button is formatted like the other theme buttons. When I set it up in mine, it's not the same button. I assumed Ninja would inherit the theme design like the demo.Here's the demo: https://my.studiopress.com/themes/infinity/#demo-full

And here's how it looks on my site:
https://www.emotionalpictures.com/contact-sara-nichols-icm-producer-director/

https://www.emotionalpictures.com/contact-sara-nichols-icm-producer-director/

[AnitaC]

You are using the shortcode on the page method. The demo is using the Ninja Forms block which has been coded for the block and not shortcode.

So you will need to manually update the button color. Add this to your Additional CSS box under Apperance > Customize.

.nf-form-content input[type="button"] ;
color: #d43d67;
}

---

Need help with customization or troubleshooting? Reach out to me.

[emotpix2]

Anita, thank you for your response. I did try it with the Ninja block, and also tried the recommended CSS. Still gives me the same button display. Would it help if I added it directly to the style sheet?

Also emptied the caches and browser. Still no dice.

[AnitaC]

You can try this which adds the !important at the end.

.nf-form-content input[type="button"] {
color: #d43d67 !important;
}

If that doesn't work, add it to the stylesheet. But it should work in the Additional CSS just fine.

---

Need help with customization or troubleshooting? Reach out to me.

[emotpix2]

Hi Anita, it didn’t work via css box in appearance. Added to the style sheet but got red x on all 3 lines when entering. I’m not a code expert, and I copied exactly from above. Not sure what the issue was

[AnitaC]

I don't know why it wouldn't work for you. It works fine for me.

---

Need help with customization or troubleshooting? Reach out to me.

[emotpix2]

I've tried it both ways, and it's not working. I'm using the latest version of the theme, genesis and wp. Not only is the color off, but the button & its font is completely different than the demo. Here's a screenshot with code entered, after flushing all caches: https://www.emotionalpictures.com/wp-content/uploads/2020/04/Screen-Shot-2020-04-02-at-10.51.28-PM.png

[Victor Font]

You missed typing the opening bracket after the class name. The correct code is:

.nf-form-content input[type="button"] {
    color: #d43d67 !important;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[emotpix2]

Thank you Victor. That definitely did something, but instead of changing the button color, it changed the font color. It's a minor thing, but frustrating it doesn't look like the demo, and there were no instructions beyond just using Ninja Forms (nothing about changing anything in the CSS).

So...my workaround was to do it in Elementor Pro and finally was able to make it look like all the other theme buttons.

https://www.emotionalpictures.com/contact-sara-nichols-icm-producer-director/

[AnitaC]

If you had Elementor Pro on the site all this time, there probably is a conflict with the Additional CSS box and the stylesheet. Possibly a setting in Elementor Pro that says to not use the themes styling. You should check that.

---

Need help with customization or troubleshooting? Reach out to me.

[emotpix2]

Elementor is set to inherit the theme colors so no conflict there. I’ve never seen it affect add’l CSS, particularly when creating pages through Gutenberg or classic WP editor. I resorted to doing the contact page in Elementor after doing these other suggestions.

[Victor Font]

The CSS color directive always changes the font color. To change the background of a button, you either have to use the background or background-color directive. Besides, when I looked at your site, I'm not sure what it is that you are trying to change. The background of every button I see is already set to #D43D67.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[emotpix2]

Hi Victor, yes, I mentioned above that I ended up just using Elementor to achieve the look I wanted on the Contact page. Here's what it looked like previously. Note that the button size is off and color is incorrect compared to the demo of Infinity which has the same button size as the front page.
Here's the old contact page:
https://www.emotionalpictures.com/contact-test-test/

[rstyner]

I am using wpForms with Digital pro. When creating the form it actually has a form field to put in the CSS Class. It's titled "Submit Button CSS Class". I typed in the word "button" with and without the '' marks and nothing happened. What might be my solution?

[Author]

Posts