Theme Settings -- Container tab / Drop Shadow category

Overview

Figure 1 (above). View of the Container >> Drop Shadow option settings for the Default Theme.

The Container option tab controls the styling for the popup container.  This article addresses the Drop Shadow category which includes 7 properties to style a shadow effect around the popup container. 

Note: To set a drop shadow, the popup border style must be set to a value other than  'None'.  In the Theme Settings box, go to Container >> Border to select a value for Style.

Property Descriptions

• Color styles the drop shadow color.  Default (all themes): black / hex number: #020202.
• Opacity styles the color density of the drop shadow. An opacity of 100% is a fully saturated color, while a value of 0% is fully transparent. 
• Horizontal Position extends and shifts the drop shadow horizontally. A positive value extends the shadow to the right, while a negative value extends the shadow to the left.
• Vertical Position extends and shifts the drop shadow vertically. A positive value extends the shadow below the container, while a negative value extends the shadow above it.
• Blur Radius extends a color gradient outward from the edge of the popup container. The higher the value, the greater the width of the gradient. 
• Spread uniformly spreads the shadow effect away from the popup container. 
• Inset (inner shadow) controls the shadow effect inside the popup container. 

Property Default Values for Each Popup Theme

Container Option Settings

How to Edit Settings

1. Move the slider horizontally; or
2. Change the pixel value directly, or 
3. Select the '- / +' buttons to increment changes to pixels.

Preview Changes in the Theme Customizer

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

Select Update to Save Changes

Select the   Update button to save any changes to popup theme settings. Otherwise, any changes will be lost after you leave the page.