-
oppgraphicsAsked 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.
-
BenReplied 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.jpgHowever 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.jpgand 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.