appointment table font colour change, logo removal and locking position on screen

hi there, i have an appointment table on my form and i'm wondering how i can change the font to black?

Hello

Thanks for using Jotform. You can inject this CSS code to modify the text color of the appointment widget:

.timezonePickerWrapper {    

display: none !important;

}

.input.currentDate {    

color: black;

}

.appointmentCalendarContainer {    

border: none;

}.

appointmentSlot {    

border: 1px solid white;    

background-color: ;    

color: black;

}

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

background-color: #a0a2a7;

}

.appointmentCalendarContainer .monthYearPicker .pickerItem select {    

color: white;

}

.appointmentCalendar .calendarDay {   

position: relative;

color: #757474;

}

Here's a guide on how to do that:

1. Click on the Form Designer icon on the right part of the Form Builder page.
2. Then select Styles from the tabs on the top of the window that appears on the right.
3. Scroll down and look for the Inject CSS section then paste the code to the CSS text area.
4. Click on the Save button to apply the changes.

Give it a try and reach out to us again if you need more help.

hi there, it is saying there are multiple errors in the CSS, can you please run the CSS and then send to me once it has no errors? i am not able to fix it myself.

also, can you please advsie in regards to the second part of my questions regarding the removal of the logo? even though i have removed the picture from the form it still appears at the top when i preview the form.

Hi,

I found the error in the last CSS, here is a new version:

.timezonePickerWrapper {   

display: none !important;

}

.input.currentDate {   

color: black;

}

.appointmentCalendarContainer {   

border: none;

}

.appointmentSlot {   

border: 1px solid white;   

background-color: ;   

color: black;

}

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

background-color: #a0a2a7;

}

.appointmentCalendarContainer .monthYearPicker .pickerItem select {   

color: white;

}

.appointmentCalendar .calendarDay {   

position: relative;

color: #757474;

}

Reach out again if you have any other questions.

its still showing there are errors, when i delete the semi colon its continues to show an error in the next row

Hi jmartinrise,

Thanks for getting back to us.

The reason there's an error there is there's no background-color set there even though you've made a call to it. You can delete the whole background color or add in a color there to remove the error. Here's the CSS with the background-color call removed since it didn't have anything there anyway.

.timezonePickerWrapper {   

display: none !important;

}

.input.currentDate {   

color: black;

}

.appointmentCalendarContainer {   

border: none;

}

.appointmentSlot {   

border: 1px solid white;   

color: black;

}

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

background-color: #a0a2a7;

}

.appointmentCalendarContainer .monthYearPicker .pickerItem select {   

color: white;

}

.appointmentCalendar .calendarDay {   

position: relative;

color: #757474;

}

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

thanks that works perfectly!