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 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:

/* Change color of the Appointment list headers when they're inactive */
.md-card-header {
color: orange;
}

Hovering Over the Button

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

/* Change the color of the Appointment list headers when the mouse hovers over */
.md-card-header:hover {
color: red;
}
After changing the appointment type name headers

“What Type of Appointment are You Booking?”

Before we apply the CSS

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:

/* Change the color of the 'what type of appointment are you booking'?' header */
.md-title.ssa-type-header {
color: purple;
}
After we apply the CSS the header changes color

Day Headers in Weekly View

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

Weekly Day headers by default

Inactive Button

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

/* Change the color of the day headers in weekly view */
.book-day .md-title {
color: red;
}

Hovering Over The Button

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

/* Change the color of the day headers in weekly view when the mouse hovers over the button */
.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:orange;
}
After changing the Weekly Day headers

Timezone Information

Timezone subhead by default

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:

/* Change the color of the locked timezone information */
.timezone-local {
color:purple;
}

Localized Timezone

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

/* Change the color of the localized timezone information */
.timezone {
color:purple;
}
Timezone subheading after changing the color

Time Categories

Each time slot in the booking calendar get categorized into one of four sections pertaining to the time of day: Night, Morning, Afternoon and Evening.

Time Categories by default

Subheadings

Change the color of the Morning, Afternoon, Evening, and Night Subheadings. Use this CSS snippet:

/* Change the color of the Morning, Afternoon, Evening, and Night Subheadings */
body .md-layout.md-align-center .md-column-center.md-column.md-flex-25.md-flex-xsmall-50 > .md-subheading {
color: purple;
}
After changing the time category subheadings color

Icons

Change the color of the Morning, Afternoon, Evening, and Night Icons. Use this CSS snippet:

/* Change the color of the Morning, Afternoon, Evening, and Night Icons. */
body .time-listing-icon {
  fill: blue !important;
}
After changing the time category icon color

Booking Form Text

Booking Form Text by default

Change the color of the booking form text titles.

‘You are booking:’ and Appointment Type Name

Use this CSS snippet to change the colors of the heading at the top of the booking form:

/* Change the colors of the heading at the top of the booking form */
.md-card-header-text .md-title {
color: green;
}

Appointment Date and Time

Use this CSS snippet to change the colors of the date and time of the appointment on the booking form:

/* Change the colors of the date and time of the appointment on the booking form */
.md-card-header-text p {
color: blue;
}

Instructions

Use this CSS snippet to change the colors of the appointment type instructions:

/* Change the colors of the appointment type instructions */
.md-card-content p {
 color: pink;
}

Name, Email and Other Basic Fields

Use this CSS snippet to change the colors of the basic field labels:

/* Change the colors of the basic field labels */
.md-card-content label {
 color: red;
}

Icons

Use this CSS snippet to change the colors of the label icons:

/* Change the colors of the label icons */
body .md-card-content i {
  color: purple !important;
}
After changing the text and icon colors in the booking form

Note: Send us an email at support@simplyscheduleappointments.com and we’d be happy to help you find a custom set of CSS to change the more complex text on your booking form.


Highlighted Text

The highlight styling by default

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-color: purple !important; 
background: purple !important; 
color: yellow !important; 
}
  • color: Change the color of the text when it’s highlighted
  • background-color and background: change the color of the text’ background. Make sure to set these to the same value
Highlight styling after applying the CSS

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