Hi guys, I got my fancybox form working, however, now I need to figure out how to style it. I am trying to use rounded input boxes, a black background, and white lettering. However, now I can't figure out how to do the CSS on it, any help?
PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.
Fancybox Modal Form CSS
-
Posted 13 years ago on Thursday March 17, 2011 | Permalink
-
Oops, Your page is broken - cant see your form right now.
screenshot: http://grab.by/9wl2
So, are you using the iframe method to load the form, or is the form in a hidden div on the same page that gets loaded in the fancybox modal.
If you're using the iframe'd method.. does the page that's hosting the form load the CSS and scripts?
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
The form should appear in a new modal when you click on Register, near the bottom of the page. As to the CSS, it is a separate page template which right now appears blank, other than the form. It should be loading only the css of the form, as there is no CSS output for that page template, because there is nothing on it.
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
Okay. I couldn't get the register link to work last night but now I see it.
Looking at the source on your iframed form page..
http://www.politicalshortfalls.com/editor-registration
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.
screenshot: http://grab.by/9wJY
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
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:
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
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.
<link rel="stylesheet" href="http://www.politicalshortfalls.com/wp-content/themes/whitehousepro/modalform.css" type="text/css" media="screen" />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.
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
Do I wanna use that instead of calling the forms.css that gravity forms uses?
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
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 pastebin 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.
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
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.
/* 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}After that, you can just add any other rules that are needed to customize the form.
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
-
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.
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.
http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
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.
Posted 13 years ago on Thursday March 17, 2011 | Permalink -
Okay, gotcha. Give this a shot.. tweak it to whatever looks good to you.
/* position the main form wrapper */ body .gform_wrapper {margin-left:10px}Posted 13 years ago on Thursday March 17, 2011 | Permalink
