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-lvzadk574tz1rmr6 .om-close { } 
IMPORTANT: Be sure to replace the lvzadk574tz1rmr6 portion of the above example with your own specific campaign’s unique slug. This can be found on your dashboard by clicking the dots under Actions and copying the Unique ID or by hovering over the question mark next to Custom HTML
You can further target this campaign by using the template namespace. The template namespace used throughout your campaign for classes and IDs is helpful for ensuring your campaign displays on pages where an adblocker is present. You should change the namespace in your CSS from the default om to the custom namespace shown in your campaign Builder.

TemplateNamespace

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; 
}