Currently, in Bookly > Appearance menu you can set the color scheme for all booking forms on your site. 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 this page. You can find the page ID in the browser dev console:
Then, copy CSS below in any text editor and replace '.page-id-13' with the ID of the page where you want to customize the booking form color scheme.
Also, set the color. The blue color #1012a3 is set here, you can replace #1012a3 with the color you want. You can generate the hex color code here https://www.google.com/search?q=color+picker
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; }