OM Documentation Extending

How to Restyle the Close Icon in OptinMonster

Looking to customize the appearance of the close icon for your popup campaign? It’s easy with our Custom CSS feature! Follow this guide to get started restyling the close icon.

IMPORTANT: This guide assumes you’re already familiar with our Custom CSS tool.
You can use the following CSS Selector to target the close icon:

html div#om-SLUG .NAMESPACE-close { }
IMPORTANT: Be sure to replace the SLUG portion of the above example with your own specific campaign’s unique slug and NAMESPACE portion with your campaign’s namespace. You can see more about how to do this in our Custom CSS Guide.

 

For example, let’s say that you’d like to change the background color of the close link to a dark grey. The default CSS for the close link looks like this example:

html div#om-YOUR_OPTIN_SLUG .NAMESPACE-close {
    background-color: #222222;
}

You would replace YOUR_OPTIN_SLUG with your own campaign’s slug, and NAMESPACE with your own campaign’s namespace.

Let’s say your campaign’s opening slug declaration is html div#om-lvzadk574tz1rmr6. And let’s say that your Template Namespace is chicago as shown in the example image above. That means, your final Custom CSS would look like this:

html div#om-lvzadk574tz1rmr6 .chicago-close {
    background-color: #222222;
}

Troubleshooting

Custom styles not being applied as expected? You may need to use the !important declaration to override default styles of the close icon.

For example:
html div#om-lvzadk574tz1rmr6 .chicago-close { 
   background-color: #222222 !important; 
}