How to Restyle the Close Icon in OptinMonster

Your OptinMonster campaign’s design is fully customizable, including the close button.

In this article, you’ll learn how to style the close button.

Style Close Button

To style the close button in your campaign, follow these steps:

Basic Settings

  1. In the campaign builder, select the Settings icon.
    Settings icon in the OptinMonster campaign builder
  2. Next, within the Basic tab expand the View Styling option and locate the Close Button Styling section.
    Close button styling in the campaign builder.
  3. (Optional) You can choose whether to apply the changes to all views of your campaign (Yes/No, Optin, and Success) or just the current view by toggling the Global View Styling option in the same panel section.
    Apply campaign styling to all views or just the current view.
  4. When you’re finished, click Save.

Advanced Settings

  1. In the campaign builder, select the Settings icon.
    Settings icon in the OptinMonster campaign builder
  2. Next, within the Advanced tab expand the View Styling option and locate the Close Button Styling section.
    Advanced Close Button settings can be configured for your OptinMonster campaign.
  3. (Optional) You can choose whether to apply the changes to all views of your campaign (Yes/No, Optin, and Success) or just the current view by toggling the Global View Styling option in the same panel section.
  4. Apply advanced styles globally.
  5. When you’re finished, click Save.

Troubleshooting

Can I change the close button styling for an individual view only?

The settings in the builder are applied globally to all views for that individual campaign.

However, you can use Custom CSS to manually change the style of the close button in a specific view.

Use the following CSS Selectors to add your custom styling with our Custom CSS tool.

Yes/No View

#om-{{id}}-yesno button.{{ns}}-CloseButton {
    /* Your Custom Styles */
} 

Optin View

#om-{{id}}-optin button.{{ns}}-CloseButton { 
    /* Your Custom Styles */
} 

Success View

#om-{{id}}-success button.{{ns}}-CloseButton {
    /* Your Custom Styles */
}