• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Infinity Pro – Ninja Form not picking up theme's button design

This topic is: not resolved

Tagged: digital pro, Infinity Pro, ninja forms, wpforms

  • This topic has 13 replies, 4 voices, and was last updated 5 years ago by rstyner.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 1, 2020 at 10:32 am #497657
    emotpix2
    Member

    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/
    April 1, 2020 at 11:45 am #497658
    AnitaC
    Keymaster

    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.

    April 1, 2020 at 12:01 pm #497660
    emotpix2
    Member

    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.

    April 1, 2020 at 1:09 pm #497661
    AnitaC
    Keymaster

    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.

    April 1, 2020 at 5:03 pm #497664
    emotpix2
    Member

    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

    April 2, 2020 at 7:10 pm #497676
    AnitaC
    Keymaster

    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.

    April 2, 2020 at 8:56 pm #497680
    emotpix2
    Member

    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

    April 3, 2020 at 7:27 am #497685
    Victor Font
    Moderator

    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?

    April 3, 2020 at 9:33 am #497688
    emotpix2
    Member

    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/

    April 3, 2020 at 9:40 am #497689
    AnitaC
    Keymaster

    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.

    April 3, 2020 at 9:49 am #497691
    emotpix2
    Member

    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.

    April 3, 2020 at 11:01 am #497693
    Victor Font
    Moderator

    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?

    April 3, 2020 at 12:24 pm #497694
    emotpix2
    Member

    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/

    May 25, 2020 at 8:36 am #498924
    rstyner
    Participant

    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
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble