What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Image Picker: Ability to add custom CSS to this widget

    Asked by aprpac on May 06, 2015 at 06:11 PM

    Hi,

    Please could you allow the line (square) that marks around the selected image to be configurable in both colour and thickness. I think currently the selected image does not stand out enough.

    Thanks

    Paul

    Feature Request image picker image picker widget selected colour thanks and
  • Profile Image
    JotForm Support

    Answered by jonathan on May 06, 2015 at 09:54 PM

    Hi Paul,

    Can you please confirm first that you meant the border box around the selected image in the image picker widget..

    Example in your jotform http://form.jotformpro.com/form/51256391670961

     

    it seems it is very much possible using custom injected CSS code like this

     

    Please confirm first if that was what you were looking for and we will check for the correct CSS code to achieve it

     

    Thanks.

     

     

     

  • Profile Image

    Answered by aprpac on May 07, 2015 at 04:32 AM

    Hi, 

    Yes that is exactly what I want to do. Please advise the CSS code.

    Thanks

    Paul

  • Profile Image

    Answered by Sammy on May 07, 2015 at 08:55 AM

    Regarding changing the border around the selection image I'm afraid the changes will not apply to the image picker widget, this is because the widget is rendered within in it's own iframe, and elements within an iframe are not affected by the main page styling.

    I have opened a feature request ticked to allow the addition of custom CSS within this widget.

     

     
     
  • Profile Image

    Answered by aprpac on May 07, 2015 at 12:28 PM

    Hi Sammy,

    Ok thanks. Please can you let me know when this feature is available.

    Kind regards

    Paul

  • Profile Image
    JotForm Support

    Answered by jonathan on May 07, 2015 at 12:33 PM

    Hi Paul,

    We have already submitted a feature request ticket for the feature.

    We will notify you here for any updates/news on the status of the feature request when available.

    Thanks.

  • Profile Image

    Answered by aprpac on May 07, 2015 at 01:23 PM

    Just a thought for your developers when they are looking at this. It would be a good idea if the widget would also optionally apply an opacity mask (say 50%) over the top of the other images (non-selected)

    Paul

  • Profile Image
    JotForm Support

    Answered by david on May 07, 2015 at 01:57 PM

    Your additional information regarding this request has been noted.  Though I cannot say when this will be addressed, we will let you know as soon as we have any further information.

  • Profile Image
    JotForm Support

    Answered by TitusN on September 04, 2015 at 03:52 AM

    Hello, 

    You can now modify the images using the Custom CSS tab in the widget settings: 

    You can paste in the following code into the Custom CSS box to utilize opacity: 

    .divimg.selected {

        opacity: 1;

    }

    .divimg {

        opacity: .5;

    }

    If you need assistance with styling the widget further - please let us know - 

    Thanks!

  • Profile Image

    Answered by CashAngels on January 25, 2016 at 09:40 AM

    how do you add a custom css field to an image?  i know how to add it to the form, but how do you add it to an image?

    div#cid_12 {

        margin-left: -58px;

    }

    div#cid_14 {

        margin-left: -85px;

     

    }

  • Profile Image

    Answered by Carina on January 25, 2016 at 10:29 AM

    @ CashAngels your question will be answered here:

    http://www.jotform.com/answers/755051 

    Please avoid opening several threads regarding the same situation. 

    Thank you