How to change the booking form color scheme for a specific page?

Currently, in Bookly > Appearance menu you can set the color scheme for all booking forms on your site. What if you want to change the booking form color scheme for a specific page?

Fortunately, there is a workaround.

First, you need to know the ID of this page. You can find the page ID in the browser dev console:


Then, copy CSS below in any text editor and replace '.page-id-13' with the ID of the page where you want to customize the booking form color scheme.

Also, set the color. The blue color #1012a3 is set here, you can replace #1012a3 with the color you want. You can generate the hex color code here

After that apply the CSS code in 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, .bookly-repeat-step .bookly-week-days { background: #1012a3 url( 0 0 no-repeat!important; }

    .page-id-13 .bookly-columnizer-wrap .bookly-pagination >, .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; }

Was this article helpful?
0 out of 0 found this helpful

Articles in this section