PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Custom Checkbox Images

  1. I've been trying to customize the checkboxes on my form, I've read a few threads in the forums that I came across, and they've helped me a bit, but I'm still not quite there.

    This is the form I am currently working on,

    http://www.ewebsolutionz.com/test/eWebMobile/mobilewp/contact/

    I'm trying to assign custom background images for each checkbox, (both unchecked, and checked states) and also change their positioning so they are in a horizontal orientation rather than a vertical stack.

    This is an image of what I currently have,
    http://www.ewebsolutionz.com/test/eWebMobile/mobilewp/wp-content/themes/eWebMobileWpTheme/Images/1.png

    and what I'm after,
    http://www.ewebsolutionz.com/test/eWebMobile/mobilewp/wp-content/themes/eWebMobileWpTheme/Images/2.png
    http://www.ewebsolutionz.com/test/eWebMobile/mobilewp/wp-content/themes/eWebMobileWpTheme/Images/3.png

    any help to get me toward that direction would be really appreciated
    Thanks in advance!

    Posted 7 years ago on Thursday October 11, 2012 | Permalink
  2. Okay.. After reviewing some of my code, I was able to compare it to the example in this thread and solve my problem with the images showing.
    http://www.gravityhelp.com/forums/topic/checkbox-picture

    However, I'm still having a problem getting the checkboxes to be aligned horizontally. I've tried different css display options, ie, block, inline, inline block, float left etc... basically anything I could think of. I also tried using the CSS ready class gf_list_inline. That caused the checkboxes to be horizontally aligned, but made my custom images disappear and made the default checkboxes re-appear.

    Thanks again in advance!

    Posted 7 years ago on Friday October 12, 2012 | Permalink
  3. Try this ready class out and see how that goes for you:

    gf_list_2col

    Posted 7 years ago on Friday October 12, 2012 | Permalink
  4. Thanks so much Rob, Getting closer. But still not quite there, any thoughts?

    I'll seriously order you pizza if we can get this straightened out.

    Posted 7 years ago on Friday October 12, 2012 | Permalink
  5. Got it - change it to gf_list_4col and then drop this CSS into your theme's stylesheet:

    [css]
    #input_1_7 label {
    margin-left: 0;
    }

    Result

    Posted 7 years ago on Friday October 12, 2012 | Permalink
  6. bingo.

    Posted 7 years ago on Friday October 12, 2012 | Permalink
  7. awh crap. for some reason when I test it on my iphone, it wont let me check any of the boxes!!! life.
    any thoughts on that?

    Posted 7 years ago on Friday October 12, 2012 | Permalink
  8. actually, I found the solution to that problem here:
    http://www.gravityhelp.com/forums/topic/clicking-checkboxes-via-label-on-ipad

    Thanks to you and your team for your awesome plugin and great support!

    Posted 7 years ago on Friday October 12, 2012 | Permalink
  9. Right on - glad that worked out and you got it working. We appreciate your support as well!

    Posted 7 years ago on Friday October 12, 2012 | Permalink

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