Popup Close Theme Settings Pane

Close Settings Pane

If you would like to disable and remove the Close Button from any/all of your popups, check out our Force Interaction Extension (documentation).

The Close Button is how a user will exit your popup most of the time. This is also the most customizable element of your popup. You can customize your close button in an unlimited amount of ways by editing the following settings:

Close Button Settings

  • Text - Insert your text for the Close Button - you can use regular text, HTML entities and even HTML itself.
  • Padding - Adjust the padding within the close <div>.
  • Height - You can adjust the height of the close <div> to suit your needs.
  • Width - You can adjust the width of the close <div> to suit your needs.
  • Location - Choose from four Close Button locations: Top Right, Top Left, Bottom Right, and Bottom Left.

Position - Depending on which Location Setting you choose, you will have a combination of the following settings for the Close Button Position. For instance, if you choose Top Right for your Close Button Location, then the two Position Settings generated will be Top and Right. Bottom Left Location would generate Bottom and Left Position Settings.

  • Top - This setting refers to the "top" CSS property - it will increase/decrease the gap between the top of the Close Button and the edge of the Popup Container.
  • Bottom - This setting refers to the "bottom" CSS property - it will increase/decrease the gap between the bottom of the Close Button and the edge of the Popup Container.
  • Left - This setting refers to the "left" CSS property - it will increase/decrease the gap between the left edge of the Close Button and the edge of the Popup Container.
  • Right - This setting refers to the "right" CSS property - it will increase/decrease the gap between the right edge of the Close Button and the edge of the Popup Container.

Font

  • Color - Change the color of your Popup Close Font using the color picker.
  • Size - Edit the size of your Popup Close Font using the color picker.
  • Line Height - Change the Line Height of your Popup Close Font using the color picker.
  • Family - Change the Font Family of your Popup Close Font using the color picker.

Background

  • Color - Change the color of your Popup Close Background using the color picker.
  • Opacity - Change the transparency of your Popup Close Background using our sliders and/or input fields. 
  • Background Images - Only available via our  Advanced Theme Builder Extension (documentation here).

Border

  • Radius - If you rounded borders best suits your needs, modify the Close Button Border Radius to achieve these results.
  • Style - You can choose between eight different styles of borders: Solid, Dotted, Dashed, Double, Groove, Inset, Outset, and Ridge.

Drop Shadow - You can customize and create any type of shadow you can imagine on your Close Button! Use the following different settings to customize your box shadow in an infinite amount of ways:

  • Inset
  • Horizontal Position
  • Vertical Position
  • Blur Radius
  • Spread
  • Color
  • Opacity

Text Shadow - You can also create a drop shadow for your Close Button Text using the following settings:

  • Horizontal Position
  • Vertical Position
  • Blur Radius
  • Color
  • Opacity

Still need help? Contact Us Contact Us