Как изменить цветовую схему формы записи для конкретной страницы?

Сейчас в меню Bookly > Appearance можно задать цветовую схему для всех пошаговых (классических) форм записи на сайте. Но что делать, если нужно изменить цветовую схему формы записи только для конкретной страницы?

К счастью, есть обходной способ.

Сначала нужно узнать ID страницы, для которой вы хотите настроить цветовую схему формы записи. ID страницы можно найти в консоли разработчика браузера.

photo_2020-03-24_12.45.21.jpeg

Скопируйте приведённый ниже код CSS и вставьте его в любой текстовый редактор. Замените ‘.page-id-13’ на ID страницы, для которой вы хотите настроить цветовую схему формы записи.

Задайте нужный цвет. В примере используется синий цвет #1012a3. Вы можете заменить его на любой цвет по своему вкусу. HEX-код цвета можно сгенерировать здесь.

После этого примените код CSS в Bookly > Appearance > Custom CSS.

photo_2020-03-24_12.45.32.jpeg

/* 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; }