How to customize the appointment slots widget using custom CSS codes?

  • Profile Image
    Buzzcom
    Asked on January 29, 2016 at 02:52 AM

    Hi
    I have built my form and used the appointment slot widget.
    There are several problems -

    1 - I want to remove the green colour of the available text and the green tick - I can't seem to do this in the design editor.


    2 - It is also odd that I entered a certain number of appointment times and the system adds an additional one at the bottom - with no name - how do I remove this additional un-named option? I has done it in both instances.


    3 - Also is there any way I can make some changes to the STRIPE payment area - the type alignment is a bit confusing and I again I can't seem to change the active background colour in the design editor.


    Many thanks in advance

     

    https://www.jotform.com//?formID=60278536789876

     

  • Profile Image
    Kevin_G
    Answered on January 29, 2016 at 10:00 AM

    To change the available text color, you can add use this CSS code:

    span.items-left {

        color: #000000;

    }

    Use this CSS code to change the color when checking an option:

    .checklist label.checkbox .after{

    background:none;

    }

     

    .checklist .checkbox.checked .after:before{

    content: '\2713';

        display: inline-block;

        color: orange;

        padding: 10px 10px 10px 10px;

        font-size: 1.5em;

    }

     

    .checklist li.hover label .after{

    background:none;

    }

     

    .checklist li.hover label .after:before{

    content: '\2713';

        display: inline-block;

        color: orange;

        padding: 10px 10px 10px 10px;

        font-size: 1.5em;

    }

    Replace the color property with the color that you want, it should be the same in both parts, I mean, both color properties should have the same color.

    Paste all the CSS code provided above in the custom CSS tab, in the widget.

    You can see my result here: https://form.jotform.com/60283528239964.

    Your other questions have been moved to these threads:

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

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

    We will assist you there.