Image Checkbox Widget: Change color of item texts

  • zoiglobal
    Asked on February 6, 2017 at 4:30 PM

    How Can I Change Text Color of CheckBox List Items on Image Checkboxes widget?  The default color is black and is not very visible on my current background of my form.

    If possible, I would appreciate any expedited resolution you may be able to offer.

    Denise Stephens

     

    Jotform Thread 1058293 Screenshot
  • Chriistian Jotform Support
    Replied on February 6, 2017 at 6:43 PM

    Hi there,

    What color do you want it to have? If you want it to be white, here's a custom CSS you can add to the widget.

    #images_button_container li label {
        color: #FFF;
    }
     
    To add a custom CSS to the widget, you need to open the widget's wizard and go to Custom CSS tab.
    Image Checkbox Widget: Change color of item texts Image 1 Screenshot 30
     
    Result should be:
    Image Checkbox Widget: Change color of item texts Image 2 Screenshot 41
     
    Let us know if you need further assistance.
    Regards.
  • zoiglobal
    Replied on February 6, 2017 at 10:04 PM

    Thank you so, so much Christian!  Your answer was EXACTLY the solution to my problem!  I appreciate you!

  • zoiglobal
    Replied on February 6, 2017 at 10:49 PM

    If I may ask 2 more questions pertaining to this CSS on this widget.  

    How do I change the background of the widget to transparent when hovering over images?

    How do I make the checkmark color set to orange when an image is selected?

  • zoiglobal
    Replied on February 6, 2017 at 10:53 PM

    While I am at it, am I able to use conditional logic with this widget to check various images when certain conditions are met on the form?

  • Chriistian Jotform Support
    Replied on February 7, 2017 at 12:36 AM

    How do I change the background of the widget to transparent when hovering over images?

    Can you please clarify which background are you referring to? The background of each image in the widget is already transparent, which  is why the form's color is visible on the sides of the image. Are you perhaps referring to the border of the images?

    How do I make the checkmark color set to orange when an image is selected?

    These checkmarks are images, so unfortunately their colors cannot be changed by CSS. You can still set the theme to orange via the Themes dropdown.

    Image Checkbox Widget: Change color of item texts Image 1 Screenshot 30

    Am I able to use conditional logic with this widget to check various images when certain conditions are met on the form?

    Yes, you can use conditions when a specific item is selected in the checkbox. Simply set the value to the name of the option. Please see example below:

    Image Checkbox Widget: Change color of item texts Image 2 Screenshot 41

    I will wait for your response.
    Regards.

  • zoiglobal
    Replied on February 7, 2017 at 1:23 AM

    Thank you for your response.  Never mind on the others!  I really appreciate the support!

  • zoiglobal
    Replied on February 7, 2017 at 9:07 AM

    Regarding my conditional logic question, I need to be more specific.  I need to programatically select certain checkboxes based on values on the form.  For example, if Global Rescue Direct Membership is not blank, then check Physician checkbox, Labs checkbox, X-Ray checkbox, and Prescription checkbox. Can this be accomplished with this widget?  Can I get to the individual checkbox items and set them independently based on certain conditions?

    Denise

     

  • Chriistian Jotform Support
    Replied on February 7, 2017 at 9:40 AM

    Hi Denise,

    I am splitting your conditional logic question to a separate thread since so we can it is different from the original styling question. Please see the thread here. Will attend to it shortly.

    Regards.