wpuser
Member
Is there any documentation on CSS styling of Gravity Forms? If there are any blog posts on other sites, etc I'd appreciate any help.
I'm pretty good with styling websites, but having trouble making first name/last name fields narrower to fit side by side in header.
net_mage
Member
The best way to do styling of these forms is to use the Firebug plugin for FF. Once you output a form on a page or post you can then view all of the ID or class names and create a custom stylesheet for these elements.
If you would like further advice I can write up a tutorial for this. Good luck.
wpuser
Member
Yeah. That's what I've been doing. Interestingly the form in the header looks right on a page that has a GF in the body, but then reverts back to the default on a page without a GF in the body. Trying to solve everything using Firebug, but just not going as quickly as I would hope, so thought there might be a tutorial, blog post, etc to look at. Appreciate the help though!
For more advanced styling it's usually best to copy-n-paste the contents of of the gravityforms/css/forms.css files directly into your themes stylesheet and then turn off Gravity Forms CSS output in the Forms > Settings page.
Then you can control the styles directly. You can also apply custom classes to your form in the Form Settings that you can use to override the base styles.
If you post a link to your form and describe what you are trying to do, i'm sure someone can chime in and help you out with suggestions on how to accomplish what you want to do with the styling.
The first/last name fields.. as is the case for most of the fields, use percentage widths to try and be as flexible as possible. They're going to change if the size of the containing element changes.
Like Carl mentioned, if you'd like to post a link, I would be happy to take a look and offer some suggestions.
wpuser
Member
Thanks guys. I messed around with it and still can't get it perfect.
Site: AllisonCaughell.com
Client only wants email signup (no RSS), so I figured I'd just put the GF email form in the header. Only thing is I want the "Submit" button to be directly to the right, for that form only...not any of the other forms ("For Buyers", "For Seller", etc). Basically look like a simple email form, with the submit to the right.
I appreciate any help you can provide!
P.S. GF works great for the "Comparative Market Analysis" seen under the Sellers tab.
I did a quick test and here's a screenshot of the result.
You just need to specify the styles, based on inheritance from the specific form id or using the specific field id's.
This should get you started. Just append this to the end of your theme style sheet.
form#gform_4 {margin:16px 0 0 0; padding:0;}
ul#gform_fields_4 {margin:0; padding:0;}
ul#gform_fields_4 li {list-style-type:none; padding:0; margin:0;}
li#field_4_2 label {color:#fff;}
input#input_4_2 {margin:3px 3px 0 0; width:170px; float:left;}
form#gform_4 div.gform_footer {width:50px; float:left; padding:5px 0 0 0;}You'll probably want to tweak it a bit, but that should get you going in the right direction.
wpuser
Member
Kevin...this is great! Thanks so much for the help! I will use this as a guide moving forward so I don't have to harass you guys anymore. :-)
One last question...any tips for the confirmation message?
Looks like div is gforms_confirmation_message but how do I make it specific to that form? gforms_4?
Thanks!
Glad that helped. Honestly, I didn't consider the confirmation text in my original test so I'll tinker with it a little more and post something here a little later.
Thanks for your patience. We were traveling so it was difficult to get back to this earlier.
I did a quick test and styled a simple confirmation block loosely based on your design. My CSS is below. It should get you started in the right direction.
div.headerright #gforms_confirmation_message {
color:#fff;
border:1px solid #5E554C;
padding:20px;
margin-right:20px;
background-color:#3b3026;
}view the screenshot