https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css Gravity Support Forums Topic: Fancybox Modal Form CSS en-US Mon, 20 Apr 2026 01:20:52 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20790 Thu, 17 Mar 2011 19:28:34 +0000 Kevin Flahaut 20790@https://legacy.forums.gravityhelp.com/ <p>Okay, gotcha. Give this a shot.. tweak it to whatever looks good to you.</p> <pre><code>/* position the main form wrapper */ body .gform_wrapper {margin-left:10px}</code></pre> https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20789 Thu, 17 Mar 2011 19:18:02 +0000 Anthony Luth 20789@https://legacy.forums.gravityhelp.com/ <p>Yeah I worded that wrong, I meant to say how do I move everything to the right some, so that with the background color, it will align properly. </p> https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20779 Thu, 17 Mar 2011 14:47:35 +0000 Kevin Flahaut 20779@https://legacy.forums.gravityhelp.com/ <p>I don't know what you're talking about moving to the right. I don't see any alignment differences in your screenshot and what I see on the live site.</p> <p><a href="http://grab.by/9x63" rel="nofollow">http://grab.by/9x63</a></p> <p>Since the styles are being referenced properly and you know how to change the background color, you should be able to use these samples to change whatever you need to on the form.</p> <p><a href="http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/" rel="nofollow">http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/</a> </p> https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20769 Thu, 17 Mar 2011 12:07:06 +0000 Anthony Luth 20769@https://legacy.forums.gravityhelp.com/ <p>Well I know how to do the background, but what I need to do is edit my stylesheet to move everything to the right, as seen <a href="http://grab.by/9wTE" rel="nofollow">here</a> </p> https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20748 Thu, 17 Mar 2011 11:20:20 +0000 Kevin Flahaut 20748@https://legacy.forums.gravityhelp.com/ <p>You don't need to redeclare all of the rules from the forms.css - only add new ones to modify what you need. You can replace the contents of the custom CSS file with this and it should get you rolling.</p> <pre><code>/* set the body background to black */ body {background-color:#000;} /* rounded borders for all browsers but IE */ body .gform_wrapper .gform_body .gform_fields .gfield input[type=text], body .gform_wrapper .gform_body .gform_fields .gfield input[type=email], body .gform_wrapper .gform_body .gform_fields .gfield input[type=url], body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel], body .gform_wrapper .gform_body .gform_fields .gfield input[type=password], body .gform_wrapper .gform_body .gform_fields .gfield select, body .gform_wrapper .gform_body .gform_fields .gfield textarea {-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -khtml-border-radius: 4px} /* set the label colors to white */ body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label, body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_left label, body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex .ginput_right label {color:#fff}</code></pre> <p>After that, you can just add any other rules that are needed to customize the form. </p> https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20746 Thu, 17 Mar 2011 11:03:34 +0000 Anthony Luth 20746@https://legacy.forums.gravityhelp.com/ <p>Ok nevermind, that was a dumb question. Ok, now that I am calling the new css, could you help me with the styling of the form? Here is the <a href="http://pastebin.com/aViqfVJN" rel="nofollow">pastebin</a> for the new css. As you can see right now it's all to the left and overlapping the outside frame almost inside the page, I want to move it some to the right, make the country and state dropdowns next to one another. </p> https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20744 Thu, 17 Mar 2011 10:30:21 +0000 Anthony Luth 20744@https://legacy.forums.gravityhelp.com/ <p>Do I wanna use that instead of calling the forms.css that gravity forms uses? </p> https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20743 Thu, 17 Mar 2011 10:24:40 +0000 Kevin Flahaut 20743@https://legacy.forums.gravityhelp.com/ <p>Understood. To begin with, you're going to need to add a path to your custom CSS file from the form template page. I would make a separate stylesheet for the modal form so it doesn't inherit other properties you don't want then reference it like this.</p> <p><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;http://www.politicalshortfalls.com/wp-content/themes/whitehousepro/modalform.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;</code></p> <p>Once that's being referenced properly, then we can properly apply the styles via the new stylesheet to get you where you want to be. </p> https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20742 Thu, 17 Mar 2011 10:18:55 +0000 Anthony Luth 20742@https://legacy.forums.gravityhelp.com/ <p>Correct, I haven't put any new custom CSS for the form since even after reviewing the CSS styling tips that were posted here and also on the rocketgenius site, I couldn't get any of them to work. Right now I am trying to move the drop down fields closer to one another, make the country drop down and state drop down smaller so that I can display them next to one another, and use a more rounded out field wrapper so that it has rounded corners similar to this:</p> <p><a href="http://d2o0t5hpnwv4c1.cloudfront.net/687_registerForm/07.png" rel="nofollow">Similar Rounded Corners</a> </p> https://legacy.forums.gravityhelp.com/topic/fancybox-modal-form-css#post-20741 Thu, 17 Mar 2011 09:52:39 +0000 Kevin Flahaut 20741@https://legacy.forums.gravityhelp.com/ <p>Okay. I couldn't get the register link to work last night but now I see it.</p> <p>Looking at the source on your iframed form page..</p> <p><a href="http://www.politicalshortfalls.com/editor-registration" rel="nofollow">http://www.politicalshortfalls.com/editor-registration</a></p> <p>I only see the default CSS file being loaded and not any other style sheets. I'm assuming your putting your new form styling rules in your theme stylesheet somewhere, but that's not being referenced here so your styles aren't being applied.</p> <p>screenshot: <a href="http://grab.by/9wJY" rel="nofollow">http://grab.by/9wJY</a> </p>