How to change the backdrop color of modal popups

In this guide, we will show you how to change the backdrop color for Modal popups and how to adjust the color transparency.

But first, let’s go over the general rules you should follow when using CSS to customize the design of your widget.

General instructions for using the CSS editor

1. Add the code snippets from this tutorial to the CSS editor when editing your widget in Getsitecontrol. You’ll find the CSS editor on the Design tab:

2. We recommend adding new code snippets at the very end of the existing CSS code to avoid interrupting any existing lines of code.

3. If you see a red X on the side, the CSS button is also red, and the platform doesn’t let you save the changes, something is wrong with the code you’ve added. Make sure you have not left out any part of the code or added any characters by mistake.

4. Similarly, when you copy and paste the code from this guide or from anywhere else, make sure that no extra dots have been automatically added to the code in the process. You can spot the unnecessary dots because they will appear in red and will be marked with a red X on the side:

Now that you know the basics, let’s edit the backdrop of your modal widgets.

Change the backdrop color of modal popups

It’s possible to change the backdrop color and transparency for modal-type popups only.

In case you are unsure what a modal popup looks like, here’s a modal popup in comparison with a sidebar popup:

To modify the backdrop color of your modal, set the necessary color for the property under the :host element.

:host {
  background: grey;
}

Feel free to adjust the color value depending on your preferences. You can use the following formats to express the color property:

• Color names: red, aqua, etc., as in the example above
• Hex color codes: #00FFFF or #0FF
• RGB and RGBa color values: rgb(0, 255, 255),
  rgba(0, 255, 255, .5), or rgba(0, 255, 255, 50%)
• HSL and HSLa color values: hsl(180, 100%, 50%) or hsla(180, 100%, 50%, .5).

If you’d like to set a semi-transparent color, use the RGBA color format, where the “A” value stands for color transparency. Express the “A” value in percentages:

:host {
  background: rgba(128, 128, 128, 50%);
}

And that’s all you need to know about editing the backdrop of your modal popups.

Now go ahead and try this method on your widgets, and if you have any issues, feel free to contact our Tech Support team for help.