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/
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!
I’d have to see you form to see what might be going on there/
How does the Custom CSS Classes in the field settings work?
http://wordpress.org/extend/plugins/ninja-forms/
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.
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.
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.
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
Just select the text that you want to link to and add anchor tags in the form settings. It works.
