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 text colors 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 List Headers

If you’re displaying all your Appointment Types with the [ssa_booking] shortcode, you could change the text colors of all the Appointment Name headers.

Changing the colors of the Appointment Name Headers

Inactive Button

To change the color of the Appointment Name when the mouse isn’t hovering over the button, use this CSS snippet:

.md-card-header {
color: #2e3192;
}

Hovering Over the Button

To change the color of the Appointment Name when the mouse IS hovering over the button, use this CSS snippet:

.md-card-header:hover {
color: white;
}

“What Type of Appointment are You Booking?”

Changing the color of the “What Type of Appointment are You Booking?”

If you’re displaying all your Appointment Types with the [ssa_booking] shortcode, you could change the color of all the “What Type of Appointment are You Booking?” header. Use this CSS snippet:

.md-title.ssa-type-header {
color: #2e3192;
}

Day Headers in Weekly View

Change the color of the Day (Mon, Tues, Wed, etc) headers in the Weekly View.

Change the color of the Day Headers in the Weekly View

Inactive Button

Use this CSS snippet to change the color of the headers when the button is inactive:

.book-day .md-title {
color: #2e3192;
}

Hovering Over The Button

Use this CSS snippet to change the color of the headers when the button IS active:

.book-day button.md-whiteframe.selectable:focus, 
.book-day button.md-whiteframe.selectable:hover,
.book-day button.md-whiteframe.selectable:focus .md-title, 
.book-day button.md-whiteframe.selectable:hover .md-title  {
    color:white;
}

Timezone Information

Changing the color of the timezone information

Use this CSS to change the text colors of the timezone information. We’d suggest you use both, if you have a mix of Locked and Localized settings in your Appointment Types.

Locked Timezone

If you Appointment Types are set to a locked timezone, use this CSS snippet:

.timezone-local {
color:purple;
}

Localized Timezone

If your Appointment Types are set to a localized timezone, use this CSS snippet:

.timezone {
color:purple;
}

Subheading and Custom Field Titles

Change the color of the Morning, Afternoon, Evening, and Night Subheading and the color of the Custom Field Titles. Use this CSS snippet:

.md-subheading{
color: purple;
}

Related Guides