Helpful CSS Snippets

Please see our article on adding custom CSS 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;
}


Show the available appointment times in a single list (not broken into Morning, Afternoon, etc)

When the customer is asked to select a time, the available time slots are divided in up to 6 separate columns for morning, afternoon, evening, and night. If you’d rather display those as a single list, this CSS will combine all times into one list:

.time-select-headline + .md-layout.md-align-center {
  flex-direction: column;
}

.time-select-headline + .md-layout.md-align-center .md-subheading {
  display: none;
}

.time-listing-icon {
  display: none;
}

ul.time-listing {
  padding-bottom: 0;
}

Change colors of dates depending on availability

If you’d like to make the difference between dates available for appointments and those that are not, you can add some CSS styles to make those stand out more. For example, this CSS will give unavailable dates a pale red background with red text, while available dates have a pale green background and green text:

.book-day button.md-whiteframe.selectable {
	background: #E8F5E9;
	color: #4CAF50;
}

.book-day button.md-whiteframe.disabled {
	background: #FFEBEE;
	color: #F44336;
}

More to come soon!