How to Change Color of Appointment Scheduler

Hello,

I am trying to update the colors on the appointment scheduler. I used the Advanced Designer and injected the appropriate CSS. In my builder the colors are correct as shown in the screenshot. On the live form they are still showing up differently with the blues. This is the CSS I used:

.form-label.form-label-auto {

  display : inline-block;

  float : left;

  text-align : left;

}

.appointmentCalendar .dayOfWeek {

  background-color : #F8F4F1 !important;

  color : #EF6A00!important;

}

.appointmentCalendar .calendarDay.isActive .calendarDayEach, .appointmentCalendar .calendarDay:not(.empty):hover .calendarDayEach {

  border-color : #000000;

}

.appointmentCalendar .calendarDay.isActive .calendarDayEach, .appointmentSlot.active, .appointmentFieldRow.forSelectedDate {

  background-color : #C63663 !important;

  color : #ffffff;

}

.appointmentSlot {

  border : 1px solid #000000;

  color : #000000;

}

.appointmentSlot:not(.disabled):not(.active):hover {

  background-color : #EF6A00 !important;

  border : 1px solid #FFFFFF;

  color : #FFFFFF;

}

.cancel.cancelSelectionBtn {

  color : FFFFFF;

  background : DCC7B7;

}

.appointmentCalendar .daysOfWeek {

  background-color : #F8F4F1 !important;

  color : #EF6A00!important;

}

Hi Margo,

Thanks for reaching out to Jotform support. I cloned your form and tested it to see if I could replicate the issue, and I ran into the same issue.

I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Hi Margo,

When I cloned and tested your form, the same thing happened for me. 

After investigating it a bit, I found a solution. It's really easy to fix. Let me show you how:

1. In Form Builder, click the Paint Roller icon.
2. Select Styles tab.
3. Scroll down and delete the injected CSS in the Inject Custom CSS.
4. Then, copy and paste this CSS below:

.form-label.form-label-auto {



  display : inline-block;



  float : left;



  text-align : left;



}









.appointmentCalendar .dayOfWeek {



  background-color : #F8F4F1 !important;



  color : #EF6A00!important;



}









.appointmentCalendar .calendarDay.isActive .calendarDayEach, .appointmentCalendar .calendarDay:not(.empty):hover .calendarDayEach {



  border-color : #000000;



}









.appointmentCalendar .calendarDay.isActive .calendarDayEach, .appointmentSlot.active, .appointmentFieldRow.forSelectedDate {



  background-color : #C63663 !important;



  color : #ffffff;



}









.appointmentSlot {



  border : 1px solid #000000;



  color : #000000;



}









.appointmentSlot:not(.disabled):not(.active):hover {



  background-color : #EF6A00 !important;



  border : 1px solid #FFFFFF;



  color : #FFFFFF;



}









.cancel.cancelSelectionBtn {



  color : FFFFFF;



  background : DCC7B7;



}









.appointmentCalendar .daysOfWeek {



  background-color : #F8F4F1 !important;



  color : #EF6A00!important;



}

It's the same CSS you used. But, when I tried to delete and paste the CSS it worked for me.

Here's the result:

Give it a try and let us know how it goes.

Hi Angelica,

Unfortunately this did not work for me and I received the same result where it looks correct in my builder, but not on the form preview/live form.

Hi Margo,

I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

We really appreciate your patience and understanding.

Hi Margo,

Please remove the existing CSS code you have added in your form and paste the CSS code given below:

.form-label.form-label-auto {

 display : inline-block;

 float : left;

 text-align : left;

}

.appointmentCalendar .dayOfWeek {

 background-color : #F8F4F1 !important;

 color : #EF6A00!important;

}

.appointmentCalendar .calendarDay.isActive .calendarDayEach, .appointmentCalendar .calendarDay:not(.empty):hover .calendarDayEach {

 border-color : #000000 !important;

}

.appointmentCalendar .calendarDay.isActive .calendarDayEach, .appointmentSlot.active, .appointmentFieldRow.forSelectedDate {

 background-color : #C63663 !important;

 color : #ffffff !important;

}

.appointmentSlot {

 border : 1px solid #000000;

 color : #000000 !important;

}

#input_49 > div > div > div.appointmentFieldRow.forCalendar > div.appointmentDates > div.appointmentSlots.slots > div > div.appointmentSlot.slot.active {

  background-color: #EF6A00 !important;

}



.appointmentSlot:not(.disabled):not(.active):hover {

 background-color : #EF6A00 !important;

 border : 1px solid #FFFFFF !important;

 color : #FFFFFF !important;

}

.cancel.cancelSelectionBtn {

 color : #FFFFFF !important;

 background : #DCC7B7 !important;

}

.appointmentCalendarContainer, .appointmentCalendarContainer .monthYearPicker, .appointmentSlot{

  border-color: #000000 !important;

}

#input_49 > div > div > div.appointmentFieldRow.forCalendar > div.calendar.appointmentCalendar > div > div.appointmentCalendarDays.days > div.daysOfWeek > div.dayOfWeek.sunday, div.dayOfWeek.monday, div.dayOfWeek.tuesday, div.dayOfWeek.wednesday, div.dayOfWeek.thursday, div.dayOfWeek.friday, div.dayOfWeek.saturday{

     background-color: #F8F4F1 !important;

   color : #EF6A00!important;  

}

Check out the screenshot below to see the result:

Here's the cloned version of the form that you can clone and test. 

Give it a try and let us know how it goes.

That worked! Thank you so much!