Helpful CSS Snippets

Please see our article on adding custom CSS stylesheets to Simply Schedule Appointments.

Hide icons on booking form

After customers have selected the date and time for their appointment, they are asked for information, including name and email address. Here’s how to hide the icons on that form.

body .md-input-container .md-icon {
display: none;
}

body .md-input-container .md-icon:not(.md-icon-delete)~label {
left: 0;
}

body .md-input-container .md-icon:not(.md-icon-delete)~.md-input {
margin-left: 0;
}


Hide action buttons on booking form

After customers finish booking their appointment, they are given options to edit/cancel/reschedule. Here’s how to hide those options:

.confirmation-actions .appointment-actions {
display: none;
}


Hide the “What type of appointment are you booking?” header

When a customer is booking an appointment, if you have more than one appointment type to choose from, this header appears above the appointment type choices. If you’d prefer it not display, you can hide it with CSS:

.md-title.ssa-type-header {
display: none;
}


More to come soon!