Looking to put GF into Thesis. Do I pull out the css file from GF and then place .custom in front of everything in the Thesis custom css file?
John
Looking to put GF into Thesis. Do I pull out the css file from GF and then place .custom in front of everything in the Thesis custom css file?
John
You shouldn't need to do that. When a form is added to the page, it will automatically load the default stylesheet. You can place custom styles wherever your theme allows so you may want to consult the DIY themes support team about their recommendations for that.
Hi Kevin,
I've added about 150 custom GF css entries so far with no results. It appears that I'll have to add ALL of them to figure out which ones will work. Thesis is really annoying.
.custom .custom .custom everything...
Kevin, I've .customed the whole dang thing. It still doesn't work. What's interesting are things that are showing up on my form like "gform_fields top_label" but I can't seem to find in the forms.css file. How many css files are there in GF? Where do I find the other ones?
John, you shouldn't have to change any of the css files that come with Gravity Forms, you simply need to add the styles to your theme properly. A lot of people use GF + Thesis without issue. I think we've got some sort of disconnect here.
Can you post a URL to your form page so I can take a look? If I can see what's going on I can help to get you on track.
Thanks Kevin,
http://www.k9toronto.com/contact/
Specifically, to start, the First and Last labels should appear under the input boxes and in smaller fonts in the forms preview, but they now appear to the right of their boxes and in the same font as the rest of the form.
But more generally, what do you suggest to approach further adjustments? I'm using Firebug to see the classes on my form(s) and then looking into the css files that came with GF to see how I might try to code them in Thesis's custom css file, but it's a tad overwhelming.
John,
I can see the big issue here is that the default Gravity Forms styles aren't being loaded at all. That's why the label positions and other things look strange.
Did you embed your code in the content area with a shortcode, or did you use the php function to manually add the form? If you did use the shortcode method, go to the form settings page and confirm that the "output CSS" option is set to yes.
Let me know and we'll debug it from there.
Thanks Kevin,
I'm now outputting to css and the form looks like it should. How do I go about customizing it from here? Do I make changes to forms.css v1.5.2.3? And I guess this gets overwritten with the next upgrade to GF or is there a custom css file that can be linked to it?
You would add your new CSS rules to the custom.css thesis file ( http://grab.by/akNL ). That way you never have to worry about your changes being overwritten when Gravity Forms updates.
i have a similar problem but in the studiopress corporate theme. in the form.css i need this value changed to 92% to fit properly in my sidebar.
.gform_wrapper .top_label input.large,
.gform_wrapper .top_label select.large,
.gform_wrapper .top_label textarea.textarea {
width: 99.2%
}
i tried adding it to my themes style.css but it didn't work, as you said above the problem is that any change to the form.css will get overwritten in the future.
what should i do?
Hey Tim, since you didn't provide a link to your form in question, I'm flying kind of blind, but try this instead:
[css]
.gform_wrapper .top_label input.large,
.gform_wrapper .top_label select.large,
.gform_wrapper .top_label textarea.textarea {
width: 99.2% !important;
}
If this doesn't do the trick could you provide me a link to your form, be glad to help you out!
that worked, after i changed it to 92%
.gform_wrapper .top_label input.large,
.gform_wrapper .top_label select.large,
.gform_wrapper .top_label textarea.textarea {
width: 92% !important;
}
i can't believe it was just the !important that changed it?
THANKS so much, it was affecting 18 websites ! so it is a mountain of work
tim
No problem at all Tim, glad to help! Generally, !important is used when you need to overwrite a style from another stylesheet and that stylesheet you don't want to change.