Jump to content

Customisations for embedded scheduling block

Recommended Posts

Hi guys

So I spent HOURS yesterday trying to figure out how to change the background colours of the embedded scheduling block (Acuity). I looked at LOTS of help docs and tutorials and messed around in codepen. I was able to change the background to the iframe ( as that is what it is) but not the content of the iframe.

But I figured it out and so I'm sharing here in case anyone else wants to know.

The background to the iframe/embedded block can be changed within the iframe code (as can the border, width, height and one or two other things) but any content within the iframe cannot.

In order to change what's inside the iframe you need to make changes in custom css in Acuity and NOT within the iframe code.

I had already used it for some other colour changes and in the end it was pretty straightforward.

Using the inspect tool in Chrome, find the element you want to change and add the change you want.

This is my code:

.is-embedded .step-pane, .choose-date-time .date-heading, .form-control {

background-color: #EEE9E0; 

It's important to note that this change can be made in the area used for changing the client scheduling page but this is not the same as the embedded scheduler, hence I needed two separate bits of code.

Here is the before:


And this is the after:


Hope this can help someone who has a similar problem to me!


Link to comment
  • Replies 2
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.