Comment changer le jeu de couleurs du formulaire de réservation pour une page spécifique ?

Actuellement, dans le menu Bookly > Appearance, vous pouvez définir le jeu de couleurs pour tous les formulaires de réservation étape par étape (classiques) de votre site. Mais que faire si vous souhaitez changer le jeu de couleurs du formulaire de réservation pour une page spécifique ?

Heureusement, il existe une solution de contournement.

Tout d’abord, vous devez connaître l’ID de la page pour laquelle vous souhaitez personnaliser le jeu de couleurs du formulaire de réservation. Vous pouvez trouver l’ID de la page dans la console de développement du navigateur.

Copiez le code CSS ci-dessous et collez-le dans un éditeur de texte. Remplacez « .page-id-13 » par l’ID de la page pour laquelle vous souhaitez personnaliser le jeu de couleurs du formulaire de réservation.

Définissez la couleur souhaitée. Dans l’exemple, la couleur bleue #1012a3 est utilisée. Vous pouvez la remplacer par la couleur de votre choix. Vous pouvez générer le code couleur hexadécimal ici.

Ensuite, appliquez le code CSS dans 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; }