How to Use OptinMonster’s Custom CSS Tool

OptinMonster makes it easy to further customize your campaigns using CSS.

In this article, you’ll learn how to use OptinMonster’s custom CSS tool.

Before You Start

Here are some things to know before you begin:

  • We recommend using Chrome’s Dev Tools feature to inspect elements in your campaign to identify the specific selector to use when writing your CSS. Learn more about using Dev Tools here.

Custom CSS Tool

To use OptinMonster’s custom CSS tool, follow these steps:

  1. In the Design view of the campaign builder, select the Settings icon.
    Settings icon in the OptinMonster campaign builder
  2. Next, select the Advanced tab in the sidebar and expand the Custom CSS option.
    Add custom styling to your campaigns using the Custom CSS field in the campaign builder.
  3. Enter your custom CSS into the provided field.
  4. When you’re finished, click Save.


How should I format the CSS selectors to target just this campaign?

When writing your CSS, you should prefix each selector with the following to target the specific campaign you’re editing:

html div#om-{{id}}

When the CSS is generated by OptinMonster to show on your site, the {{id}} placeholder will automatically be updated to use the campaign’s specific ID.

For example, we could change the background color of the buttons in the campaign using CSS like this:

html div#om-{{id}} input[type=submit],
html div#om-{{id}} button {
    background: #ff6600 !important;
Using the Template Namespace

One important feature of your OptinMonster campaign is the Template Namespace. This can be found in the Advanced tab’s Display Settings option.

You can customize the campaign namespace to use in CSS and Javascript targeting.

The HTML namespace prefix is used throughout your campaign template for classes and IDs and can be useful for getting around things like ad blockers.

You can use the Template Namespace in your custom CSS with the placeholder {{ns}}, for example:

html div#om-{{id}} .{{ns}}-footer {
    // Your CSS code here

Just like the {{id}} placeholder, the {{ns}} placeholder will automatically be updated to use your campaign’s namespace when the CSS is generated to show the campaign on your site.

Be advised that changing the Namespace setting will force a page refresh on save.
How can I learn more about using Chrome’s DevTools or Firefox’s Firebug?

You might find the following helpful to get started using your browser’s dev tools to customize CSS:

Can I use SASS or LESS in the CSS tool?

No, at this time only vanilla CSS can be used. SASS or LESS will not be rendered properly and may corrupt / break your campaign.

My CSS isn’t working, why?

If the custom CSS you’ve entered isn’t showing in the builder’s preview of your campaign right away, check the following:

  • That your CSS is correctly formatted with all proper semi-colons and curly braces. If any are missing, you may find some styles work as expected but all styles after the missing semi-colon or curly brace aren’t applied to your campaign.
  • Your CSS selector may not be specific enough to target the desired element. In this case, it may be helpful to try using the !important declaration to force the style to be applied.
  • Still not working? Our support team would be happy to help!

If you’re serious about jumpstarting your website growth, then get started with OptinMonster today!

Get Started With OptinMonster Today!

BONUS: Done-For-You Campaign Setup ($297 value)
Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE! Click here to get started →