Como alterar o esquema de cores do formulário de reserva para uma página específica?

Atualmente, no menu Bookly > Aparência, pode definir o esquema de cores para todos os formulários de reserva passo a passo (clássicos) do seu site. Mas o que fazer se quiser alterar o esquema de cores do formulário de reserva apenas para uma página específica?

Felizmente, existe uma solução alternativa.

Primeiro, precisa de saber o ID da página onde deseja personalizar o esquema de cores do formulário de reserva. Pode encontrar o ID da página na consola de programador do navegador.

Copie o código CSS abaixo e cole-o em qualquer editor de texto. Substitua ‘.page-id-13’ pelo ID da página onde quer personalizar o esquema de cores do formulário de reserva.

Defina a cor desejada. A cor azul #1012a3 é usada no exemplo. Pode substituí-la pela cor da sua preferência. Pode gerar o código hexadecimal da cor aqui.

Depois disso, aplique o código CSS em Bookly > Aparência > CSS personalizado.

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