Customisations for embedded scheduling block

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!

Zoë 

I improved it further. By making the colour code rgba(0,0,0,0) I can make the block match whichever colour scheme is chosen for the section 😎

But if I need to switch one of the element colours to something else, I can!

@creedon here is my solution