Currently, in the Bookly > Appearance menu, you can set the color scheme for all step-by-step (classic) booking forms on your site. But what if you want to change the booking form color scheme for a specific page?
Fortunately, there is a workaround.
First, you need to know the ID of the page where you want to customize the booking form color scheme. You can find the page ID in the browser dev console.
Copy the CSS code below and paste it into any text editor. Replace '.page-id-13' with the ID of the page where you want to customize the booking form color scheme.
Set the desired color. The blue color #1012a3 is set in the example. You can replace it with the color of your choice. You can generate the hex color code here.
After that, apply the CSS code in Bookly > Appearance > Custom CSS.
/* replace page-id-13 with your ID: page-id-XX; */
/* replace #1012a3 with color you want */
/* Color */
.page-id-13 .bookly-form-group > label,
.page-id-13 .bookly-label-error,
.page-id-13 .bookly-progress-tracker > .active,
.page-id-13 .bookly-form .picker__nav--next,
.page-id-13 .bookly-form .pickadate__nav--prev,
.page-id-13 .bookly-form .picker__day:hover,
.page-id-13 .bookly-form .picker__day--selected:hover,
.page-id-13 .bookly-form .picker--opened .picker__day--selected,
.page-id-13 .bookly-form .picker__button--clear,
.page-id-13 .bookly-form .picker__button--today,
.page-id-13 .bookly-columnizer .bookly-hour span.bookly-waiting-list {
color: #1012a3!important;
}
/* Background */
.page-id-13 .bookly-progress-tracker > .active .step,
.page-id-13 .bookly-form .picker__frame,
.page-id-13 .bookly-service-step .bookly-week-days label,
.page-id-13 .bookly-repeat-step .bookly-week-days label,
.page-id-13 .bookly-columnizer .bookly-hour:hover .bookly-hour-icon span,
.page-id-13 .bookly-btn,
.page-id-13 .bookly-btn:active,
.page-id-13 .bookly-btn:focus,
.page-id-13 .bookly-btn:hover,
.page-id-13 .bookly-btn-submit,
.page-id-13 .bookly-round,
.page-id-13 .bookly-square {
background-color: #1012a3!important;
}
.page-id-13 .bookly-triangle {
border-bottom-color: #1012a3!important;
}
/* Border */
.page-id-13 .bookly-form input[type="text"].bookly-error,
.page-id-13 .bookly-form input[type="password"].bookly-error,
.page-id-13 .bookly-form select.bookly-error,
.page-id-13 .bookly-form textarea.bookly-error,
.page-id-13 .bookly-extra-step div.bookly-extras-thumb.bookly-extras-selected {
border: 2px solid #1012a3!important;
}
/* Other */
.page-id-13 .bookly-form .picker__header { border-bottom: 1px solid #1012a3!important; }
.page-id-13 .bookly-form .picker__nav--next:before { border-left: 6px solid #1012a3!important; }
.page-id-13 .bookly-form .picker__nav--prev:before { border-right: 6px solid #1012a3!important; }
.page-id-13 .bookly-service-step .bookly-week-days label.active, .bookly-repeat-step .bookly-week-days label.active { background: #1012a3 url(http://slastenovd.ru/bookly/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/images/checkbox.png) 0 0 no-repeat!important; }
.page-id-13 .bookly-columnizer-wrap .bookly-pagination > li.active, .page-id-13 .bookly-columnizer .bookly-day, .page-id-13 .bookly-schedule-date { background: #1012a3!important; border: 1px solid #1012a3!important; }
.page-id-13 .bookly-columnizer .bookly-hour:hover { border: 2px solid #1012a3!important; color: #1012a3!important; }
.page-id-13 .bookly-columnizer .bookly-hour:hover .bookly-hour-icon { background: none; border: 2px solid #1012a3!important; color: #1012a3!important; }