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

  • Buzzcom
    Asked on January 29, 2016 at 2: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

     

  • Kevin Support Team Lead
    Replied 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.

    How to customize the appointment slots widget using custom CSS codes? Image 1 Screenshot 20

    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.