Back to Booking Calendar Guides

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. Copy and paste these CSS snippets into Styles Settings > Custom CSS

Find other ways to customize the Booking Calendar in the Style with CSS Snippets guide.


Appointment Type Listing

Appointment Type Listing Screen

What type of appointment are you booking? Header

/* Change the size of "What type of appointment are you booking" header */
.book-type .booking-header .ssa-type-header { font-size: 20px; }

Appointment Type Names

/* Change the size of listed Appointment Type Names */
.book-type .book-type-single .md-card .md-title { font-size: 24px; }

Listed Appointment Type Duration

/* Change the size of listed Appointment Type duration text */
.book-type .book-type-single .md-card .md-subhead { font-size: 14px; }

Choose a Date and Time

Appointment Type Title for Date and Time Screens

/* Change the size of Appointment Type Title for choosing a date and time screens */
.md-layout .md-title { font-size: 20px; }

Appointment Type Duration for Date and Time Screens

/* Change the size of Appointment Type Title subheading
for choosing a date and time screens */
.md-subheading .appointment-duration { font-size: 14px; }

Timezone Information

/* Change the size of the Timezone information */ 
.booking .timezone { font-size: 16px; } 

Pick a Date Only

‘Select a Date’ Header

/* Change the size of 'Select a date' headline */
.date-select-headline { font-size: 24px; }

Weekly View Day Names

/* Change the size of Day Names in Weekly View */
.book-day .md-title { font-size: 20px;}

Weekly View Day Details

/* Change the size of Day Details in Weekly View */
.book-day .md-body-1 { font-size: 14px; }

Monthly View Day Names

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

Monthly View Day Details

/* Change the size of the Monthly view calendar days */ 
.md-body-1, .md-body-2, body { font-size: 16px; } 

Pick a Time Only

Choose a Time Screen

Time Categories

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

Time Slot Times

/* Change the size of the Time slot times */ 
.md-button.md-dense { font-size: 14px; } 

‘Select a Time on …’ Header

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

Booking Form

Booking Form Screen

‘You are booking: …’ Header

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

Date and Time Subheading

/* Change the size of the Date and Time subheading in confirmation screen */
.confirm .md-subhead { font-size: 14px; }

Instructions

/* Change the size of the Instructions text */ 
.md-card-content p { font-size: 16px; }

Confirmation

Confirmation Screen

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

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

‘What would you like to do next?’ Header

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

Appointment Action buttons

/* Change the size of the Appointment Actions button */
.appointment-actions .md-button { font-size: 14px !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