Image Checkbox Widget: Change color of item texts

  • Profile Image
    Advolink1
    Asked on February 06, 2017 at 04: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

     

  • Profile Image
    Chriistian
    Answered on February 06, 2017 at 06: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.
     
    Result should be:
     
    Let us know if you need further assistance.
    Regards.
  • Profile Image
    Advolink1
    Answered on February 06, 2017 at 10:04 PM

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

  • Profile Image
    Advolink1
    Answered on February 06, 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?

  • Profile Image
    Advolink1
    Answered on February 06, 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?

  • Profile Image
    Chriistian
    Answered on February 07, 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.

    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:

    I will wait for your response.
    Regards.

  • Profile Image
    Advolink1
    Answered on February 07, 2017 at 01:23 AM

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

  • Profile Image
    Advolink1
    Answered on February 07, 2017 at 09: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

     

  • Profile Image
    Chriistian
    Answered on February 07, 2017 at 09: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.