¿Cómo cambio el esquema de color del formulario de reserva para una página concreta?

Actualmente, en el menú Bookly > Apariencia puedes establecer el esquema de color para todos los formularios de reserva paso a paso (clásicos) de tu sitio. Pero ¿qué pasa si quieres cambiar el esquema de color del formulario de reserva solo para una página concreta?

Por suerte, hay una solución alternativa.

Primero, necesitas saber el ID de la página donde quieres personalizar el esquema de color del formulario de reserva. Puedes encontrar el ID de la página en la consola de desarrollador del navegador.

Copia el código CSS de abajo y pégalo en cualquier editor de texto. Sustituye “.page-id-13” por el ID de la página donde quieras personalizar el esquema de color del formulario de reserva.

Establece el color deseado. En el ejemplo se usa el color azul #1012a3. Puedes sustituirlo por el color que prefieras. Puedes generar el código de color hexadecimal aquí.

Después, aplica el código CSS en Bookly > Apariencia > 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; }