Як змінити колірну схему форми бронювання для конкретної сторінки?

Наразі в меню Bookly > Зовнішній вигляд можна встановити колірну схему для всіх покрокових (класичних) форм бронювання на вашому сайті. Але що робити, якщо ви хочете змінити колірну схему форми бронювання лише для конкретної сторінки?

На щастя, є обхідний спосіб.

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

Скопіюйте наведений нижче код CSS і вставте його в будь-який текстовий редактор. Замініть «.page-id-13» на ID сторінки, для якої ви хочете налаштувати колірну схему форми бронювання.

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

Після цього застосуйте код CSS у Bookly > Зовнішній вигляд > Користувацький 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; }