Código css wigget selector de imagen

  • FoodPlaceSLRC
    Fecha de consulta 22 de agosto de 2024, 16:36

    Hola


    Puse en se código css para que la paloma que sale en gris se ponga en azul pero no funciona

    https://www.jotform.com/build/242031127900038

    Código css wigget selector de imagen  Image 1 Screenshot 30Código css wigget selector de imagen  Image 2 Screenshot 41


  • Paolo Jotform Support
    Fecha de respuesta 22 de agosto de 2024, 21:09

    Hi Francisco,

    Thanks for reaching out to Jotform Support. Unfortunately, our Spanish support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Spanish, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    As for your question, If you want to highlight the selected image in the widget with blue, you can use the code that I provided below and inject the custom CSS code in the Widget settings. Let me show you how:

    1. First, copy this code:

    div.divimg .check_mark {
     background-color: rgba(0, 0, 255, 0.3);
     opacity: 90;
     transition: opacity 0.3s;
     box-shadow: 0 0 20px blue; /* Optional: adds a blue glow effect */
    }

    2. Open your form in Form Builder, scroll down, and select the Image Picker widget.

    3. Click on the Wand icon on the right side of the widget to open Widget Settings.

    4. Under the Custom CSS tab, remove the previous codes and  paste the provided code into the CSS Code box.


    Código css wigget selector de imagen  Image 1 Screenshot 30

    Check the screencast below for the results:

    Código css wigget selector de imagen  Image 2 Screenshot 41

    Give it a try and let us know if you have any questions.

  • FoodPlaceSLRC
    Fecha de respuesta 22 de agosto de 2024, 22:10

    Hola


    Te agradezco la pronta respuesta se mira bien el css, sin embargo lo que requiero es que paloma se muestra de un color y no gris. Te adujunto imagen con el elemento al que me refiero Código css wigget selector de imagen  Image 1 Screenshot 20

  • Cecilia Jotform Support
    Fecha de respuesta 23 de agosto de 2024, 2:12

    Hi Francisco,

    Unfortunately, our Spanish support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Spanish, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

    Thanks for your patience, we appreciate it.

  • Cecilia Jotform Support
    Fecha de respuesta 23 de agosto de 2024, 3:35

    Hi Francisco,

    Let's change the color of the tick you have:

    1. First, copy this code:

    div.divimg .check_mark::before {
    content: "\2713"; /* Unicode code for the check mark /
    color: solid black; / Makes the check mark black /
    font-size: 20px; / Adjusts the size as needed */
    }

    .divimg.check_mark::before {
    border-color: black;
    }

    2. Open your form in Form Builder, click on the Image Picker widget.

    3. Click on the Wand icon on the right side of the widget to open Widget Settings.

    4. Under the Custom CSS tab, remove the previous codes and paste the provided code into the CSS Code box.

    5. Click on Update Widget.

    Código css wigget selector de imagen  Image 1 Screenshot 20

    Give it a try and let us know if you have any questions.

  • ASPSLRC
    Fecha de respuesta 23 de agosto de 2024, 15:44

    Muchas gracias me sirve perfecto 😉

  • FoodPlaceSLRC
    Fecha de respuesta 23 de agosto de 2024, 15:47

    Muchas gracias 😉