styling checkboxes « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

jcglover1237
Member

I've looked at the documentation and I'm just not getting it. I've used view source and was able to manipulate the styling a bit but not exactly. I have three check boxes and I want them to run horizontal to each other, and I want there to be some more spacing between each input. Plus, I'd like the checkbox to be even with the text. Thanks.

Posted 13 years ago on Thursday May 19, 2011 | Permalink
Kevin Flahaut
Administrator

I'm not going to be able to really help you without seeing your form. Can you post a URL to your form page please?

Have you already tried the "gf_list_inline" or "gf_list_3col" ready class?

http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

Posted 13 years ago on Thursday May 19, 2011 | Permalink
jcglover1237
Member

Hey, thanks for getting back to me this late in the day. Here is the site: http://albanymortgageinfo.com. I think I got it figured out but I didn't use the ready class you just suggested. I went into view source and played around. It's the form on the home page. Let me know what you think. Thanks.

Posted 13 years ago on Thursday May 19, 2011 | Permalink
Kevin Flahaut
Administrator

I think it's fine. I personally would just use the "gf_list_inline" ready class and remove the other styles. The class is already in the default stylesheet and does pretty much the same thing without having to add even more styles to your theme stylesheet. It's totally up to you of course. In the end, whatever works is a great solution.

Posted 13 years ago on Thursday May 19, 2011 | Permalink
kbsamurai
Member

Just got this form builder and i thought it would make life easier than Contact Form 7, but it hasn't. Everything looks just as awful as in CF7 and now I'm down in the CSS code trying to get it do anything, something different. What's the point if you have spend as much time making a form nice looking as you would if you wrote the CSS and PHP yourself ?

I've spent a lot of time just trying to get the 3 check boxes on one line and everything fails. It all stays in one single over padded column. Neither "gf_list_inline" or "gf_list_3col" ready classes work. Can some one point me to some thing about making these forms as compact as if I hard coded it, because right now this looks like a waste of time and money.

http://petpals.localonlinemarketingsolutionshosting.com/book-us/

Posted 13 years ago on Saturday August 20, 2011 | Permalink
Kevin Flahaut
Administrator

@kbsamauri, The problem here is that your theme styles suck. It's not a Gravity Forms issue, they're made to inherit styles from the theme. If the theme has crappy styling, well, you get the picture.

I'll take a look and see what kind of solution I can offer.. there's a lot wrong in your theme styles, so you may need to talk to your theme provider about removing the form-specific styles from the theme itself.

Posted 13 years ago on Saturday August 20, 2011 | Permalink

So, this should get you closer. It hacks around the poor form styles in your theme and should override those for your Gravity Forms. Add these to the end of your theme stylesheet.

[css]
#content .gform_wrapper li {
    margin-left: 0;
}

body .gform_wrapper ul,
body .gform_wrapper li {
	max-width:1000px!important
}

#content .gform_wrapper input[type=checkbox],
#content .gform_wrapper input[type=radio],
#content .gform_wrapper input[type=submit],
#content .gform_wrapper input[type=button] {
    width: auto!important;
}

#content .gform_wrapper input,
#content .gform_wrapper textarea {
	margin-right:0!important
}

screenshot: http://bit.ly/o6Aqtc

You can tweak everything from there until you like it.

Posted 13 years ago on Sunday August 21, 2011 | Permalink

kbsamurai
Member

Thanks very much. That helps. The style (based on twenty-ten by the way) does some unusual things but whether it sucks or not is kinda of beside the point. To me the idea that Gravity Forms is so totally reliant on inherit styles from the theme is the issue. The theme has a build in contact form so the fact that the theme has form-specific styles isn't surprising nor to blame the author. It includes a nice basic easy to use contact form. However in this case I want to make some more compact complex forms and the reason to go to gravity forms rather than CF7 is the promise that could make the more complex forms the way I want rather than working on the theme the way CF7 would require, but what you are telling me is Gravity Forms has the same problem as CF7, one has to spend time getting very familiar with CSS of the plugin. It would be really nice, it somewhere there was an explanation of totally control the look and feel of the form but I haven't been able to find it. Just seems to be tid bits here and there. Why not provide theme independent pre-set CSS layouts ? Or is that some WordPress ideology that everything should be inherited from the style. I didn't buy Gravity Forms because I wanted to stick to the theme style.

Posted 13 years ago on Sunday August 21, 2011 | Permalink
Kevin Flahaut
Administrator

Sure, your theme has a contact form that looks nice and the CSS for that form would have to be included, that's not what I was saying. I'm saying that the way the CSS was written was very specific to that one form but was written in a way that ANY form on the site would inherit from that.

There are some CSS/styling specific resources available in the documentation. You can have "total control" over the look of the forms by targeting the elements and styling them with your own CSS.

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
http://www.gravityhelp.com/resources/cssguide/css_guide.html

Gravity Forms isn't "totally reliant" on the theme styles. That's incorrect. Take a look at the form preview page. The forms have nice, basic formatting and function perfectly there without any styles included from the theme.

There is no WordPress-specific ideology at work in the styling or formatting. The fact is that the forms become part of the page (as opposed to framed in like Wufoo, etc) so they're going to inherit styles from the parent theme just like any other elements in the page. The forms are actually designed to inherit styles from the parent so they can blend in with the rest of the theme without a lot of effort.

There's no bulletproof way to create "theme independent pre-set CSS layouts" that won't inherit properties from the parent. We are planning on offering some type of theming/advanced styling add-on in the future to make it a bit easier though for folks with limited CSS skils.

In the mean time, we'll still be happy to help you if you have styling issues that you can't resolve.

Lastly, we have a full working demo of the plugin available so there's no reason to be surprised by the functionality or any limitations of the plugin after your purchase. You could have tried that out, asked us questions pre-sale, etc. We do our best to educate folks pre-sale if they want to take advantage of those resources.

Posted 13 years ago on Sunday August 21, 2011 | Permalink

This topic has been resolved and has been closed to new replies.