How to Restyle the Close Icon in OptinMonster

Looking to customize the appearance of the close icon for your popup optin? 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 optin’s unique slug (the unique CSS Selector is displayed below the Custom CSS field in the optin builder).

You can further target this optin by using the template namespace. The template namespace used throughout your optin for classes and IDs is helpful for ensuring your optin 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 optin 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 optin’s slug, and NAMESPACE with your own optin’s namespace.

Let’s say your optin’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 !important;
}

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 .om-close { 
   background-image: none !important; 
}