Hi, Martin

Thanks for reaching out to us

- Yes. I just wanted to point out you can also use the Customize section of Amelia to manipulate most of the colors, as I can see you have acquainted with this, because of the other ticket regarding the styling of the Service Booking flow.

But if you wish, you can still add custom CSS to the page. Our support can not cover custom work of a high level, but for some basic CSS adjustments, we can provide advise to get you started in the right direction.

- For example, the lower panel background color can be changed like this, I will give you a CSS selector for that DIV :

.amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-form-catalogForm-packageSetupForm.am-select-date {
    background: linear-gradient(135deg, #d7121e 0%, #0454a2 100%);
}

I have changed it to a bit of a random color, just so you can see the change :

Of course, you can change the style properties as you need, to fit your design ideas.

-

For the upper blue area, here is the CSS selector you can use to manipulate its styles :

.amelia-app-booking #am-service-booking .am-service-gallery {
    min-height: 80px;
    background-image: linear-gradient(90deg, rgba(0, 173, 215, 0.65) 0%, #00add7 100%);
}

I have shrunk the height, just to see the difference, but of course, you can change, or add new properties as you need, such as width, and so on :

Let me know if that is what you needed, and if I can provide further assistance. Thanks.

Hi, Martin

I forgot to say, just to add - in case you need help adding custom CSS to the page, please take a look at this article.

Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways.