How do I change the background colours or text colours of particular widgets?

I'm new to all this and I have two widgets that I have added to my form which don't display well on my theme's colours.  How do I edit the colours on just the widget itself? 

The widgets I need to edit are Appointment Slots & Progress Bar.

You can use custom CSS code to customize the widget. Each widget has their own "Custom CSS" tab where you can insert a CSS code. 

1. Select the widget and then click the "Wizard" icon.

2. On the wizard, click the "Custom CSS" tab. Insert the CSS code in the box.

Here's an example:

.checklist label {

color: #ffffff;

background-color: green;

}

If you need help with CSS codes, let us know. We can help you with this. Please provide the background color of the element and the color of the fonts.

Thank you.

Thanks for this, that's just what I needed.  I'd also like to change the width but can't work out how.  When I look at the page I can see the item that controls the width of the iframe but can't work out how to reference this in the CSS. 

You do not need to change any CSS codes in order to tweak the width of your Appointment Slots widget. You can change the width directly in the Form Builder by clicking on the widget's gear-shaped icon, and then Edit Properties:

In properties, change the Width to anything you want, such as increasing it to 600 pixels, and the widget will automatically update to that width:

This is how the widget would display:

If you need assistance with anything else, please do open a new thread about it so that we can avoid any confusion with the topic of this thread, and we will be happy to help as always. :)

lol!!  I over thought that one didn't I?! 

The other widget that I mentioned I'd like to change the colours on was the progress bar but it doesn't seem to have a tab to add CSS.  Any ideas what I can do with it?

Our Progress Bar widget unfortunately doesn't support custom CSS, but it does have many predefined themes that you can use. To access and change the theme, please click on the wand-shaped icon of the Progress Bar widget:

It will open up the configuration of the widget, where you can select your theme:

I believe the Wisteria theme would fit in nicely with your overall design:

I hope this helps. :)

I spotted the colour option in the widget but it only changes the colour of the progress bar itself.  Underneath the progress bar is text that tells you how many questions there are to go but this doesn't show up as the colour is almost identical to the background it's on.

Sorry about missing the text color, you can change that color by injecting CSS directly to the form itself. Even though the widget doesn't have its own CSS option, it can be affected by CSS of the form:

.progressBarSubtitle { color: purple; }

The widget would appear like this:

I believe it will work to your satisfaction, and it looks very nice with the rest of your design. Let us know if you need further assistance in getting your form tweaked to your liking, we are here to help.