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 campaign builder’s Design view, select the Display Settings panel in the sidebar.
    Display Settings
  2. Scroll down to the Custom CSS option.
    Custom CSS
  3. Enter your custom CSS.
  4. When you’re finished, click Save.

Troubleshooting

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 Display Settings panel just above the Custom CSS.

Namespace

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 isn’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!