Customising the colour of the blue ‘price’ box in the Book Now widget for external websites

Suzy B
Feb 8, 2026 6:39 PM
Member for 6 months 3 posts

Hello!

Does anyone know if there’s a way to customise the colour of the blue ‘price’ box that appears once you’ve added dates to the BOOK NOW box please?

If it can be achieved with CSS, I’d dearly love to know the code please. I’m on an external website (Squarespace). 

I also wonder if it’s possible to remove the ‘see details’ drop down in this same box, as it doesn’t really add anything in my case. 

Many thanks in anticipation.


Suzy 

Katie W
Jul 29, 2026 10:22 AM
OR Team Member Member for 3 years 288 posts

Hi Suzy!

Sorry for the late reply! You should be able to change the color of the price box by adding the following CSS to your hosted website or booking/inquiry widget if your not using our hosted website: 

.alert {

background: #add hex color code here !important;

}

In the section where it says 'add hex color code here', you'll want to replace that with the code of the color you want it to be. This website lets you choose a color and gives you the code: https://htmlcolorcodes.com/

If you're only using widgets and not a hosted website, you can insert it by going to Settings > Widgets > click into the Booking/Inquiry Widget > click Change. On the following page, scroll to the bottom, insert it into the CSS box, and save the changes.

If you're using our hosted website, go to Settings > Hosted Websites > click on the site name > click Theme and Layout > go to the CSS tab. From there, insert the CSS code and save the changes.