How can I change the CSS style of the captions on the Image picker widget?

  • oppgraphics
    Asked on March 2, 2016 at 9:54 AM

    I see that I can add custom CSS code to the widget but I don't know the proper element to use that connects to the captions specifically. I've found that I can style the captions within the captions brackets using span style but this blocks conditions from working.

     

    Please help.

  • Ben
    Replied on March 2, 2016 at 12:09 PM

    I presume that this is the form where you want to change this: http://www.jotformpro.com/form/60553452882964 and looking at its setup, the captions seem to have the following style:

    font-size: 8px;
    padding: 0px;
    10px 0px 0x;

    - This is likely the reason why the conditions did not work

    Please do notice that the value for the padding is set to 0px and then closed, followed by a value of 10px 0px 0px; - meaning that there will be issues parsing that as CSS.

    This means that the following is not valid:

    [<span style="font-size: 8px; padding: 0px; 10px 0px 0x;">Gray</span>]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_gray.png
    [<span style="font-size: 8px; padding: 0px; 10px 0px 0x;">Blue</span>]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_blue.png
    [<span style="font-size: 8px; padding: 0px; 10px 0px 0x;">Gold</span>]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_gold.png
    [<span style="font-size: 8px; padding: 0px; 10px 0px 0x;">Custom</span>]http://www.dealer-max.com/images/template_a_assets16/lro-webform/custom.jpg

    However to change the CSS for the element as you have asked, you should add the following (instead of the text above) into Images field:

    [Gray]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_gray.png
    [Blue]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_blue.png
    [Gold]http://www.dealer-max.com/images/template_a_assets16/lro-webform/m_gold.png
    [Custom]http://www.dealer-max.com/images/template_a_assets16/lro-webform/custom.jpg

    and then add the following to the Custom CSS field:

    .imageLabel {
      font-size: 8px;
      padding: 0px;
    }

    You can see how this works on a clone of your form: https://form.jotform.com/60614904884966

    I have applied the same approach on other Image Picker widgets as well.

    Do try it out and let us know how it goes. Also feel free to add any other CSS codes to the imageLabel rule and you will re-style the caption accordingly.