patrickcash6
Member
I'm using Thesis and am familiar with the custom.css file.
I've tried looking at the Gravity site with firebug but I'm a novice at css, etc.
Can someone please tell me what code I'd need to make the forms on my sites look like the forms on here (including the submit button).
These all look so good and mine, well, mine not so much lol.
Thanks!
Patrick
The forms on this site uses images for buttons. There is an option in the Form Settings under the Advanced tab to use an image for your Submit button. You select that option and then enter the full path to the image you want to use. It's as simple as telling you waht code you need to make your form look like ours because we use 3rd party services such as TypeKit for the fonts on our site, etc.
The best thing to do is learn by trial and error, play around with the CSS. Inspect and browse our CSS using FireBug. Turn elements on and off using FireBug and see how it impacts the form, etc. Study the CSS Targeting documentation here:
http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
The key with CSS is simply putting it to use and learning via trial and error. Gravity Forms markup is standard markup and standard CSS so there isn't anything specific to Gravity Forms going on, it's all standards based design and markup.
patrickcash6
Member
Thanks! The link really helped. I'm about 1/2 way there.
I have the following code in my custom.css file but no luck on the button.
a.gf_home_pricing_button {
background-image: url("../images/homepricingbutton.png");
background-position: 0 0;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
font-size: 22px;
height: 92px;
line-height: 60px;
margin: 0 auto;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
width: 410px;
}I have set this form class to gf_home_pricing_button on the "form settings" tab.
If I view source I do not see this class where the button is. I see a class of gform_image_button
Can you see what I'm doing wrong?
Thanks again!
Patrick
I can't really tell you what you're doing wrong unless I can see the form in the page. You're probably going to run into problems trying to copy our CSS directly because those buttons aren't necessarily applied to Gravity Forms and the markup may not be the same.
I would suggest creating your buttons, then using the built-in image button option in the form editor. That's going to be a lot less of a headache for you.
http://www.gravityhelp.com/documentation/page/Form_Settings
http://www.gravityhelp.com/documentation/page/File:Form-settings-advanced.png
patrickcash6
Member
Hi Kevin, ok I'm afraid I get some of this but not other parts. I used the image setting too. :(
Here's the page it's on. I'm really just trying to get a feel for this at this point...
http://www.gadsden-alabama.com/submit-or-edit-your-business-listing
Here is a screenshot of the setting.
http://www.screencast.com/t/ehwfIif2FdV
Yep, that's a button. It's a huge button, but the plugin is doing exactly what you tell it to do, it's outputting the button path you put in the admin. I would suggest creating a smaller button image, but it is working properly.
I notice you put a button class name in the form settings. You shouldn't need that there. The CSS class name setting there is applied to the main FORM tag so a button class wouldn't necessarily apply. If you've already defined styles for that class, you could end up with some other wonky styling because you're trying to apply button properties/styling to the form element itself.
You would have to create background images for the buttons, then apply styles to the submit element, etc. "Simple" is very relative. If you're not very proficient with CSS, the button image is your best bet. The nicest thing about that is the buttons look the same in all the browsers without a lot of CSS tweaking to pull it off.
