Back to Booking Forms Guides

Format and Colors for Text

This guide applies to:

  • Basic Edition
  • Plus Edition
  • Pro Edition
  • Business Edition

Introduction

This is a growing list of CSS snippets to help you change the font sizes of the headings and subheadings in the Booking Calendar. Find other ways to customize the Booking Calendar in the Style with the CSS Snippets guide.

Make sure to add the CSS in SSA Settings > Styles > Custom CSS field. If you’d like to learn more, see our guide on adding custom CSS to Simply Schedule Appointments.

CSS Properties Key

  • font-size: Change the size of the text.
  • line-height: Change the height of the text, and adjust the space between lines.
  • color: Change the color of the text.
  • background: Change the color behind the text.
  • fill: Change the color of an SVG (used for icons only).
  • max-width: Change the size of an element (used for icons only).

What type of appointment are you booking? Header

Screenshot depicting what type of appointment is being booked header.
/* Format "What type of appointment are you booking" header */
.book-type .booking-header .ssa-type-header { 
font-size: 20px; 
color: red;
}

Appointment Type Names

How to change the appearance of the Appointment Type titles.
/* Format listed Appointment Type Names */
.book-type .book-type-single .md-card .md-title { 
font-size: 24px; 
color: red;
}

On Hover: Appointment Type Names

/* Format listed Appointment Type names text on hover */
.md-card.selectable.light-green:hover h2 { 
color: blue;
}

Listed Appointment Type Duration

How to change the appearance of the duration of appointment types.
/* Format listed Appointment Type duration text */
.book-type .book-type-single .md-card .md-subhead { 
font-size: 14px; 
color: red;
}

On Hover: Listed Appointment Type Duration

/* Format listed Appointment Type duration on Hover */
.md-card.selectable.light-green:hover h3 { 
color: purple;
}

Appointment Type Title for Date and Time Screens

How to change font of the name of the appointment type once selected.
/* Format Appointment Type Title for choosing a date and time screens */
.booking .md-layout .md-title { 
font-size: 25px; 
color: red;
}

Appointment Type Duration for Date and Time Screens

How to change font of the duration once appointment type is selected.
/* Format Appointment Type Title subheading for choosing a date and time screens */
.booking .md-subheading .appointment-duration { 
font-size: 20px; 
color: red;
}

Timezone Information

Change font of the timezone.
/* Format the Timezone information */ 
.booking .timezone,
.booking .timezone-local { 
font-size: 16px; 
color: red;
}

‘Select a Date’ Header

Change 'Select a date' header.
/* Format 'Select a date' headline */
.date-select-headline { 
font-size: 24px; 
color: red;
}

Monthly View Day Names

Change the Days of the month in Monthly view.
/* Format Daily headers in the monthly view (Mo, Tu, We, etc.) */ 
.booking ul.week { 
font-size: 18px; 
color: red;
}

Format and Colors for Weekly and Monthly Views

Weekly date color changed based on availability
Weekly date color changed based on availability
Monthly date color changed based on availability

Monthly date color changed based on availability

Format Available Dates

/* Format AVAILABLE dates */
/* Change the background color and font color */
.book-day button.md-whiteframe.selectable{
	background: #E8F5E9;
	color: #4CAF50;
}

/* Change the font-size for the monthly view dates (1,2,3,...31) and the weekly view full date info (July 15, 2021) */
.book-day button.md-whiteframe.selectable .md-body-1 {
    font-size: 20px;
}

/* Change the font-size for the weekly view day (Fri, Sat, Sun, etc.) */
.book-day button.md-whiteframe.selectable .md-title {
    font-size: 24px;
}
/* ------------------------- */

On Hover: Available Dates

/* Format AVAILABLE dates when hovering */
.book-day button.md-whiteframe.selectable:not([disabled]):hover {
	background: purple;
	color: white;
}
/* ------------------------- */

Format Unavailable Dates

/* Format UNAVAILABLE dates */
/* Change the background color and font color */
.book-day button.md-whiteframe.disabled:not(.passive) {
	background: #FFEBEE;
	color: #F44336;
}

/* Change the font-size for the monthly view dates (1,2,3,...31) and the weekly view full date info (July 15, 2021) */
.book-day button.md-whiteframe.disabled .md-body-1 {
    font-size: 20px;
}

/* Change the font-size for the weekly view day (Fri, Sat, Sun, etc.) */
.book-day button.md-whiteframe.disabled .md-title {
    font-size: 24px;
}
/* ------------------------- */

‘Select a Time on …’ Header

Change font of the Select a time header.
/* Format 'Select a time on ...' headline */
.time-select-headline { 
font-size: 24px;
color: red; 
}

Time Categories

Change font of the morning, afternoon, evening titles.
/* Format the Time Categories (Morning, Night, etc) */ 
.time-select .md-subheading { 
font-size: 18px !important;  
color: red;
}

Time Category Icons

Format the icon categories.
/* Format the time category icons on the time selection screen */
.time-listing-icon {
fill: red;
max-width: 100px;
}

Format and Colors For Time Slots

Format the time slot fonts, color, sizes.

Format the Time Slot Fonts, Color and Sizes

/* Format time slots */

/* Change color time slots */
html .md-theme-default.time-select.md-button:not([disabled]).md-raised:not(.md-icon-button) {
    background: #E8F5E9; 
    color: #4CAF50; 
    padding: 16px 32px;
    margin: 5px;
 }

/* Change time slot font-size */
.time-listing .md-button.md-dense {
	font-size: 20px;
}

/* ------------------------- */

On Hover: Format the Colors and Sizing

/* Format time slots on hover */
html .md-theme-default.time-select.md-button:not([disabled]).md-raised:not(.md-icon-button):hover, 
html .md-theme-default.time-select.md-button:not([disabled]).md-raised:not(.md-icon-button):focus {
     background: white; 
     color: black; 
     padding: 16px 32px;
     margin: 5px;
 }
/* ------------------------- */

‘You are booking: …’ Header

Change the You are booking header.
/* Format the "You are booking:..." headline */
.confirm .md-title { 
font-size: 24px; 
color: red;
}

Date and Time Subheading on Booking Form

Change the time information on booking form.
/* Format the date and time of the appointment on the booking form */
.md-card-header-text p {
color: blue;
font-size: 12px;
}

Booking Form Instructions

Change the appearance of the form instructions.
/* Format the Instructions text */ 
.md-card-content p { 
font-size: 16px; 
color: red;
}

Field Icons on Booking Form

Change the field label icon appearance on the booking form.
/* Format the field label icons */
body .md-card-content i {
  color: purple !important;
  font-size: 36px;
  margin: 9px;
  margin-right: 16px;
  margin-left:0px;
}

/* Shift field labels to match icon new size */
body .md-input-container .md-icon:not(.md-icon-delete)~label {
left: 40px;
}
body .md-input-container .md-icon:not(.md-icon-delete)~.md-input {
margin-left: 40px;
}

/*------------------------*/

Field Titles/Labels on Booking Form

/* Format the customer information field labels */
.md-card-content label,
.md-card-content legend.md-subheading {
 color: red;
 font-size: 22px;
}

‘Thank you! Your appointment is booked: …’ Header

Change the confirmation font.
/* Format the "Thank you! Your appointment is booked:..." headline */
.confirm .cust-info .md-title { 
font-size: 24px;
color: red; 
}

‘What would you like to do next?’ Header

Change the 'what would you like to do next' appearance.
/* Format the "What would you like to do next?" headline */
.appointment-actions .md-subheading { 
font-size:14px; 
color: red;
}

Appointment Action buttons

Change button appearances.
/* Format the Appointment Actions button */
.appointment-actions .md-button { 
font-size: 14px !important;
color: red;
}

Highlighted Text

Change the color of the text and background color when any text in the booking calendar is highlighted. Use this CSS to change the highlight styling:

/* Change the color of the text and background color when any text in the booking calendar is highlighted. */
.md-theme-default ::selection { 
background: purple !important; 
color: yellow !important; 
}

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides