我要如何針對特定頁面變更預約表單的配色？

目前在 Bookly > Appearance 選單中，您可以為網站上所有逐步式（經典）預約表單設定配色。但如果您只想針對特定頁面變更預約表單的配色呢？

幸運的是，有一個替代方法可以做到。

首先，您需要知道想要自訂預約表單配色的頁面 ID。您可以在瀏覽器的開發人員主控台中找到頁面 ID。

複製下方的 CSS 程式碼並貼到任何文字編輯器中。將「.page-id-13」替換為您想自訂預約表單配色的頁面 ID。

設定您想要的顏色。範例中設定的是藍色 #1012a3，您可以將其替換為喜歡的顏色。您可以在這裡產生十六進位色碼。

之後，將這段 CSS 程式碼套用到 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; }