Form Goes Whack with Thesis 1.8 Full-width Framework Enabled

Gravity Support Forums » Plugin Support » Gravity Forms

Chris M.
Member

Hello,

The subject line says it all! Haha...

I have two screenshots to share, both from a Gravity Form in Thesis 1.8:

1.) With the default page framework enabled: http://reflectonthis.com/gravity-images/page-framework.jpg

2.) With the full-width framework enabled: http://reflectonthis.com/gravity-images/full-width-framework.jpg

I am mainly concerned about the "Purpose for Contact" section and the "Submit" button. The rest seems to be in order.

I am trying to get the style of the page framework form (#1 above), while using the full-width framework feature.

Respectfully,
Chris M.

Posted 13 years ago on Tuesday October 19, 2010 | Permalink
Kevin Flahaut
Administrator

Chris, This is a theme style issue. Thesis applies a blanket width to all form inputs.. I believe it's 40% width. Since buttons and radio fields are inputs, they get the nice 40% width rule too.

The default Gravity Forms styles override this for Thesis, but that's specific to the default layout. You'll need to look at those styles and adjust the CSS specificity to match that of the new layout or just trying using the "width:auto!important" rule on the radio, checkbox and button fields to override it.

Posted 13 years ago on Tuesday October 19, 2010 | Permalink
Chris M.
Member

So I would just target the radio, checkbox, and button fields in my custom.css for Thesis?

I just looked at the Gravity Forms "forms.css" to figure things out, but I am a little overwhelmed by all the code.

Could you tell me exactly which ID's/Classes I should target?

Thank you.

Posted 13 years ago on Tuesday October 19, 2010 | Permalink

This should work for you.

/* reset radio and checkbox input width */
ul.gfield_radio li input,
ul.gfield_checkbox li input {width:auto!important;}
/* reset button width */
.gform_footer input.button {width:auto !important;}

Posted 13 years ago on Tuesday October 19, 2010 | Permalink

Chris M.
Member

Thank you very much Kevin. That did the trick!

I am really happy with the support of Gravity Forms.

Posted 13 years ago on Tuesday October 19, 2010 | Permalink
Chris M.
Member

Hmmm... Spoke too soon. :-)

The reset of the radio and check boxes seems to be fine, but the SUBMIT button doesn't have the nice look that it has in image #1 (http://reflectonthis.com/gravity-images/page-framework.jpg ).

Any idea why not?

Posted 13 years ago on Wednesday October 20, 2010 | Permalink

Kevin Flahaut
Administrator

replace the previous CSS example with these rules. This block has all the Thesis button styles as well.

/* reset radio and checkbox input width */
ul.gfield_radio li input,
ul.gfield_checkbox li input {width:auto!important;}
/* reset button width */
.gform_footer input.button {border-color:#CCC #999 #999 #CCC; border-right:3px double #999; border-style:double; border-width:3px; color:#111111; background-color:#E3E3E3; cursor:pointer; font-weight:bold; overflow:visible; width:auto !important; font-family: Georgia, "Times New Roman", Times, serif; font-size:1.143em; padding:0.313em 0.25em}

Posted 13 years ago on Wednesday October 20, 2010 | Permalink