Injecting CSS code to the form is not working.

  • Profile Image
    Caloykokoy
    Asked on May 17, 2018 at 02:48 AM

    not working :(



    This is a re-post of a comment on How to Inject Custom CSS Codes

  • Profile Image
    eugene
    Answered on May 17, 2018 at 06:53 AM

    If you give us more detailed information about the issue you are having, we would be happy to help.

    Can you provide us the form you are trying to inject custom CSS, and explain where are you having a problem? Additionally, you can also provide screenshots of the issue. 

    How to Post Screenshots to Our Support Forum

    We are waiting for your feedback.

  • Profile Image
    Caloykokoy
    Answered on May 17, 2018 at 10:43 AM
    This is the my timer in my form:
    [cid:3e30997f-38d4-409d-93c4-ae159f4b0b1c]
    And I want to put this:
    [cid:636835e2-719b-4bf0-8534-d40bd81da450]
    Here's my form: https://form.jotform.com/81275082203146?
    Regards,
    ? ? ? ? ?
    CARLO MARCILLA REYES
    Technical Care Representative
    - Asurion - 4F Two Evotech Bldg., Nuvali, Sta. Rosa, Laguna PH
    * carlo.reyes@asurion.com | www.asurion.com
    * (0947) 452 1780 | (046) 413 7898
    ________________________________
    Confidentiality Notice: The content of this e-mail (including any attachments) is privileged and/or confidential and to be used only by the intended recipient named above. If you have received this communication in error, you are prohibited from disclosure, copying, distribution or use of this information. Please notify the sender immediately by replying to this message and then delete it from your system.
    ________________________________
    ...
  • Profile Image
    Kevin_G
    Answered on May 17, 2018 at 12:41 PM

    Your screenshots did not reach this thread since the forum does not accept attached images via email responses, please kindly upload the images following this guide: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

    I have also checked your form and did not find any CSS code, please note that if you need to affect the timer widget you must inject the code to the widget instead, this guide will help you doing so: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    If this still does not work, please do not remove the code so we can see if it's indeed affecting the widget or not. 

    Thanks. 

  • Profile Image
    Caloykokoy
    Answered on May 17, 2018 at 01:51 PM

    This is my current timer:

    1526579384CHDCS_Calculator.JPG

    This is the timer i want to put. I have a code of this. I tried your suggestion here: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets its still not working.

    1526579397CSS_Result.JPG

  • Profile Image
    Jed_C
    Answered on May 17, 2018 at 03:58 PM

    I have checked your form and didn't find any css code. Make sure that you inject the code inside the widget CSS not the form's CSS code.

    1526587071timer_widget.png

    Let us know how it goes.

  • Profile Image
    Caloykokoy
    Answered on May 17, 2018 at 04:10 PM

    It doesn't have the code because i removed it since its not working.

  • Profile Image
    Kevin_G
    Answered on May 17, 2018 at 05:41 PM

    I was working with some CSS code and I got a result similar to your screenshot, please try this code: 

    div#clock {

        border: 1px solid #000000;

        width: auto;

        padding-left: 40px;

    }


    .flip-clock-wrapper ul{

        background: #FFFFFF !important;

        box-shadow: none !important;

    }


    .flip-clock-wrapper ul li a div div.inn, .flip-clock-after, .flip-clock-active {

        background: #FFFFFF !important;

    }


    .flip-clock-wrapper ul li a div.up:after{

        background: transparent !important;

    }

    You may inject the code to the widget directly following the guide I provided previously. Here's an example: https://www.jotform.com/81366647533968 

    Also, in case the code does not change the widget's layout, please kindly keep it, as I asked before, since that will help us to identify why it does not work. 

    You may also keep customizing the form if you want, my code is only an example, but you need to make sure you're using the correct classes and ids, if you're simply copying the code from an external source and pasting it into your form it may not work if it does not have the correct classes. 

    Thanks. 

  • Profile Image
    Caloykokoy
    Answered on May 17, 2018 at 05:44 PM

    Sorry. I need a smaller clock and I need a reset button looks exactly like this:

    1526593475CSS_Result.JPG


  • Profile Image
    Jed_C
    Answered on May 17, 2018 at 07:24 PM

    This is the closest size and design that I can give you https://form.jotform.com/81367814778976

    1526599352timer.png

    With regards to the buttons, unfortunately, that feature is not added to the widget itself. So you either have to download the form source or have those button added to the widget itself for it to work.

    Let us know if you have any questions.