CSS (Cascading Style Sheets) Adjustments

CSS can be used to customize certain elements of your booking page in terms of layout, color and size.

Below you will find some examples of CSS commands that you can store under Scheduling Page > Colors& Font > CSS. In principle, all CSS classes can be customized by your online booking site.

Note: Please only use CSS commands if you are an advanced user and your design wishes cannot be covered by the basic color and font settings under Scheduling Page > Colors & Font (more on this here).

Below you will find a list of the most frequently requested CSS customizations and instructions on how to integrate them into the booking page.

In general, you can find all CSS settings under Scheduling Page> Colors & Font > CSS. By default, this field is blank, but unlimited customization is possible.

Table of Contents

1. Color Adjustments on the booking page
2. Hide Items (on booking page)
3. Responsive Design (view of the booking page on mobile devices)
4. Service Groups (on the booking page)
5. Advanced CSS Commands (for the booking page)

1. Color Adjustments

1.1 Color selected service tiles

.ssel { background: #D8F6CE;}

Instead of #D8F6CE please enter your desired color as a hex code. You can find a color palette for this, for example here: https://html-color-codes.info/webfarben_hexcodes/

1.2 Colorize the fill color of the icons in the progress bar

Using this CSS code, you can adjust the fill color of the icons in the progress bar (1, 2, 3) to your desired color.

#divWizard .sumBookingsIcon {fill: #FF4000;}

1.3 Change the color of the icons in the booking summary

#sumBookings text {fill: #FF00FF;font-weight: 700;}

1.4 Color weekdays in calendar view

.ui-datepicker-calendar th {color: #FF0080;}

1.5 Color the background and font color of the calendar days

After "background" please add the desired background color (in our case green) while define the font color after "color" (in our case white).

.dayA .ui-state-default {background-color: #8BC34A!important;color: #fff;
padding: .4375em .625em;}
.dayWL .ui-state-default {background-color: orange!important;color: #fff;
padding: .4375em .625em;}
.ui-datepicker td {padding: 0.1em;}

1.6. Color arrows for month selection

If you use a dark background, you can use it to color the arrows for the month selection in the calendar view.

.ui-datepicker-next, .ui-datepicker-prev {
filter: invert(1);
}

2. Hide Items

2.1 Hide weekends (Sat and Sun) in the calendar view

With the following CSS code you can hide the weekend from your calendar view on your booking page. This makes sense, for example, if you do not offer any appointments at the weekend.

.ui-datepicker-week-end {display:none}

3. Responsive Design

3.1 Display employees (employee/resource selection) one below the other on mobile devices

With the following CSS code, you can make it easier for your customers to select your employees by not having to click on the employees individually horizontally in a slider (Image 1), but instead appear directly one below the other (Image 2).

Please include the following code in your CSS field:

@media (max-width: 34.375em /* 550px */ ) {

#calSelOverlay {flex-direction: column;}

.calImgName {display: flex !important;margin-bottom: 25px;}

#calSelPrev,  #calSelNext{display: none;}

}

3.2 Display all employees (employee/resource selection)

With the help of this CSS code, all available employees will be displayed on your booking page. As a customer, you do not have to use the arrow keys to search for the desired calendar.

#calSelOverlay {flex-wrap: wrap;}
.calImgName {display: flex !important;margin-bottom: 25px;}
#calSelPrev, #calSelNext{display: none;}

3.3 Show booking summary below

By using the following CSS code, the summary of the current booking ("Your appointment" area) appears below the service selection, appointment selection and contact details entry. This means customers booking via their mobile device don't always have to scroll down to make a selection.

@media (max-width: 62em) {
#divSumRight {
order: 2;
margin-bottom: 3em;
}
}

4. Service Groups

4.1 Display service groups in 2 columns

With the help of this CSS code, the performance groups are displayed in 2 columns. Depending on how much text the service group has or whether there are images, the value of the class .sg must be adjusted at min-height.

#services { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; }
.servicesSG { -ms-flex-preferred-size: 50%; flex-basis: 50%; }
.sg { min-height: 220px; }
@media (max-width: 650px ) { .servicesSG { -ms-flex-preferred-size: 100%; flex-basis: 100%; } }

5. Advanced CSS Commands

5.1 Import fonts from Google Fonts

The following CSS code imports a font from Google Fonts. This font can then be used on the booking page using HTML formatting or set as the standard font. Please note that a note must be made on this in the data protection regulations.

@import url('https://fonts.googleapis.com/css2?family=Spartan&display=swap');
html, body {
  font-family: 'Spartan', sans-serif !important;
}

Should you have any questions, feel free to contact us.