Overview #

Figure 1 (above). View of the Overlay option settings for the Default Theme.

The Overlay option tab controls the styling of the popup overlay layer. This layer covers the entire screen and surrounds the popup container. ( It’s actually a layer that’s positioned between the screen content and the popup. ). The Overlay option has two properties; color and opacity.

Property Descriptions #

• Color styles the color of the overlay layer. 
• Opacity styles the density of the applied color.  An opacity of 100% is a fully saturated color, while a value of 0% is fully transparent. 

The Overlay Theme Settings in Action #

The overlay layer can be used to limit visitor access to the page content, and focus visitor attention on the popup itself.  The example above uses a semi-transparent red overlay that draws attention to the popup contents.  

For those that prefer  not to display the overlay layer, see the following related article.

Related article: ‘Display – Advanced’ option settings

Overlay Option Settings #

When editing the Overlay option settings, use the customizer located to the right of the Theme Settings box to preview your changes. . 

Color #

Set the background color for the popup overlay layer. Click on the button labeled ‘Select Color’ to display a colorpicker. Each custom color targeted within the colorpicker is represented by a unique hex number. 

The overlay color field also accepts any specific hex number as input. This feature assists users who want to apply a custom color palette on a site. 

Table 1. Overlay Layer Background Color — Default Settings by Theme

Theme Name	Default Color ( name / hex number )
Default Theme	white / #ffffff
Light Box	black / #000000
Enterprise Blue	black / #000000
Hello Box	black / #000000
Cutting Edge	black / #000000
Framed Border	white / #ffffff

Opacity #

Range: 0 – 100%.  Set the color opacity (density) of the overlay layer.  

Edit the opacity value either by:

1. moving the range slider horizontally; or
2. changing the percent value directly, or 
3. selecting the ‘- / +’ buttons to increment changes to percentage.

Table 2. Overlay Background Opacity — Default Settings by Theme

Theme Name	Default Opacity ( percentage )
Default Theme	100
Light Box	60
Enterprise Blue	70
Hello Box	75
Cutting Edge	50
Framed Border	50

Replace the Overlay Color with a Custom Image #

The overlay color can be replaced with a custom background image using the Advanced Theme Builder extension to Popup Maker.  The plugin requires a paid license which is valid for a term of 1-year.  Licensees are eligible to receive support and upgrades during the license term.