How can I resize a checkbox? « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Joe Shirley
Member

Hello,

I've place the form in question on this page: http://joeshirley.com/diy5-change-your-life/

I'd like to make both the checkbox and the font size much larger, and can't for the life of me figure out how to do it.

Can you help?

Thanks!

Joe

Posted 13 years ago on Saturday February 26, 2011 | Permalink
Kevin Flahaut
Administrator
Resizing the checkbox input doesn't work in all the browsers. Some of the old ones may render your changes, but most ignore any size properties that are declared. Changing the label is easy. You can add this to the end of your theme's style.css file.
```
body #gform_wrapper_6 .gform_body .gform_fields .gfield .gfield_checkbox li input[type=checkbox] {margin-top:9px}
body #gform_wrapper_6 .gform_body .gform_fields .gfield .gfield_checkbox li label {font-size:20px}
```
test screenshot: http://grab.by/9b8G

Notice in the sample above that I used the unique form ID for inheritance in the rule. That means this will only apply to form ID 6.

You can refer to this guide to find out how to properly target the form elements with CSS so you can manipulate them.

http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/
Posted 13 years ago on Sunday February 27, 2011 | Permalink
Joe Shirley
Member

Works great, Kevin, thanks! And thank you for the comprehensive post on targeting specific elements with CSS.

Turns out I need one more thing to make this form work on my site. I'm hoping you can help.

When I put the form where I need it on my home page, something my theme is doing renders the form invisible if I use conditional logic for any field or for the submit button. The entire form becomes as if set to display:none; You can see the home page at http://joeshirley.com. I currently have the form (#6) displaying under the video with all conditional logic turned off. But as soon as I set the submit button or any field to run conditional logic, the entire form disappears.

I'm going to try to solve this with my theme developer. Can you tell me how the conditional logic is implemented? What should I tell the theme guys about the conditional logic in the form to help them troubleshoot how their theme may be interfering with the form's display?

Also, do you have any immediate ideas about what could be causing this?

Thanks for any help you can offer!

Posted 13 years ago on Sunday February 27, 2011 | Permalink
Kevin Flahaut
Administrator
The conditional logic requires some additional scripts to be loaded.. it looks like you're using the function call to embed the form and that requires one more step for everything to work properly.

When using a Gravity Form in a sidebar widget or embedding it anywhere using the function call, you need to manually enqueue the scripts and CSS by placing a short script block in your theme's functions.php file.
```
wp_enqueue_script("gforms_ui_datepicker", WP_PLUGIN_URL . "/gravityforms/js/jquery-ui/ui.datepicker.js", array("jquery"), "1.3.9", true);

wp_enqueue_script("gforms_datepicker", WP_PLUGIN_URL . "/gravityforms/js/datepicker.js", array("gforms_ui_datepicker"), "1.3.9", true);

wp_enqueue_script("gforms_conditional_logic_lib", WP_PLUGIN_URL . "/gravityforms/js/conditional_logic.js", array("gforms_ui_datepicker"), "1.3.9", true);

wp_enqueue_style("gforms_css", WP_PLUGIN_URL . "/gravityforms/css/forms.css");
```
Without this, the conditional logic scripts, datepicker script, form CSS and other elements needed for the full form functionality aren't loaded.

You can find more information at the URL below

http://www.gravityhelp.com/documentation/embedding-a-form/
Posted 13 years ago on Sunday February 27, 2011 | Permalink