Hoe wijzig ik het kleurenschema van het boekingsformulier voor een specifieke pagina?

Momenteel kun je in het menu Bookly > Weergave het kleurenschema instellen voor alle stapsgewijze (classic) boekingsformulieren op je site. Maar wat als je het kleurenschema van het boekingsformulier alleen voor een specifieke pagina wilt wijzigen?

Gelukkig is hier een workaround voor.

Eerst moet je de ID weten van de pagina waarvoor je het kleurenschema van het boekingsformulier wilt aanpassen. Je vindt de pagina-ID in de devconsole van je browser.

Kopieer de onderstaande CSS-code en plak deze in een tekstverwerker. Vervang ‘.page-id-13’ door de ID van de pagina waarvoor je het kleurenschema van het boekingsformulier wilt aanpassen.

Stel de gewenste kleur in. In het voorbeeld is de blauwe kleur #1012a3 ingesteld. Je kunt deze vervangen door de kleur van je keuze. Je kunt de hexadecimale kleurcode hier genereren.

Pas daarna de CSS-code toe bij Bookly > Weergave > Aangepaste 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; }