WordPress.org

Ready to get started?Download WordPress

Forums

Ninja Forms
[resolved] Editing Custom CSS Classes in Field Settings Area (10 posts)

  1. acdesgn
    Member
    Posted 1 year ago #

    Hello!
    I'm not the savviest person when it comes to code, so I'm hoping this is easier than I think it is.
    When I preview the form on my site, the text box goes along the entire page (My sheet is 1000px wide) so I'm left with this really long box. How do I go about making it only be a box of 200px wide, etc.? I know it's something to do with editing the css classes area in the field settings spot, but I can't seem to get anything to work.

    Thank you!

    http://wordpress.org/extend/plugins/ninja-forms/

  2. James Laws
    The WP Ninjas
    Plugin Author

    Posted 1 year ago #

    What version of Ninja Forms are you using? Everything beyond 2.0 does not set the width of these fields which means its being set by your theme. Its not hard to do but you do have to be comfortable editing code and file within your theme or a custom plugin. For people who are not comfortable with that or just want to make it a whole lot easier we created an extension to help: http://wpninjas.com/downloads/layout-styles/

  3. acdesgn
    Member
    Posted 1 year ago #

    I'm using the latest version (just downloaded it yesterday)
    I went through with firebug and found where it said the text input area was set to 100%... I changed it (through firebug) to 20% and it gave me the live time update, successfully doing what I wanted. However when I go into my css style sheet and actually change it and save it, it still doesn't do anything.
    I will look into that extension in the mean time! Thanks!

  4. James Laws
    The WP Ninjas
    Plugin Author

    Posted 1 year ago #

    I'd have to see you form to see what might be going on there/

  5. SwiftLead
    Member
    Posted 1 year ago #

    How does the Custom CSS Classes in the field settings work?

    http://wordpress.org/extend/plugins/ninja-forms/

  6. James Laws
    The WP Ninjas
    Plugin Author

    Posted 1 year ago #

    When you add a class it adds it directly to the form element that you assigned it to. That way you can assign some javascript or css to it for instance. it also adds it to the wrapping div but it adds "-wrap" to the div class so you can style it and it's contents with CSS.

  7. SwiftLead
    Member
    Posted 1 year ago #

    If I wanted to have the following CSS for text area:

    textarea {
    width:550px;
    height:50px;
    }

    I tried making it a class in my CSS as such:

    .ninjaTextArea textarea {
    width:550px;
    height:50px;
    }

    and adding .ninjaTextArea to Custom CSS Classes in the field settings but it did not take (I also tried using just ninjaTextArea without the .).

    I also tried adding textarea {width:550px; height:50px;} to the Custom CSS Classes in the field settings but that didn't work either.

    Any help would be appreciated.

  8. James Laws
    The WP Ninjas
    Plugin Author

    Posted 1 year ago #

    If the first thing you tried didn't work it's because your theme has some higher specificity that's overriding it.

    In the second thing you tried it would have just been .ninjaTextArea because that the class that would have been applied to the textarea element as you've assigned it.

    The third example wouldn't do anything because the field accepts a class name and not inline styling.

    A link to the page where your form is located would also be helpful.

  9. DigitalCracker
    Member
    Posted 8 months ago #

    Hi James, just picked up the plugin with styles - it's pretty slick. Can I use the custom CSS field to change the label of a checkbox to a hyperlink? I'm looking to include that as part of the terms/privacy policy. If there's a simpler way to achieve this please let me know.

    Thanks,
    Graham

  10. bhattad18
    Member
    Posted 7 months ago #

    Just select the text that you want to link to and add anchor tags in the form settings. It works.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.