Wie ändere ich das Farbschema des Buchungsformulars für eine bestimmte Seite?

Aktuell können Sie im Menü Bookly > Darstellung das Farbschema für alle Schritt-für-Schritt (klassischen) Buchungsformulare auf Ihrer Website festlegen. Aber was, wenn Sie das Farbschema des Buchungsformulars für eine bestimmte Seite ändern möchten?

Glücklicherweise gibt es dafür einen Workaround.

Zunächst müssen Sie die ID der Seite kennen, deren Buchungsformular-Farbschema Sie anpassen möchten. Sie finden die Seiten-ID in der Entwicklerkonsole des Browsers.

Kopieren Sie den folgenden CSS-Code und fügen Sie ihn in einen beliebigen Texteditor ein. Ersetzen Sie „.page-id-13“ durch die ID der Seite, deren Buchungsformular-Farbschema Sie anpassen möchten.

Legen Sie die gewünschte Farbe fest. Im Beispiel ist die blaue Farbe #1012a3 eingestellt. Sie können sie durch die Farbe Ihrer Wahl ersetzen. Den Hex-Farbcode können Sie hier erzeugen.

Wenden Sie anschließend den CSS-Code unter Bookly > Darstellung > Benutzerdefiniertes CSS an.

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