How to Use OptinMonster’s Custom CSS Tool

Do you want to further customize your campaigns? With OptinMonster’s custom CSS feature it’s easy! This guide will show you the best way to apply custom CSS to your campaigns.

  1. Create or Modify a Campaign
  2. Customize Your Campaign

Step 1 – Create or Modify a Campaign

Create a new campaign or modify an existing campaign from OptinMonster Dashboard.

Edit Campaign

Step 2 – Customize Your Campaign

On the Design tab, go to the Display Settings panel.

Display Settings

Scroll down to the Custom CSS option.

Custom CSS

Opening CSS Line

When writing your custom CSS, you should prefix each statement with the following declaration:

html div#om-{{id}}

When the CSS is added to your site, the {{id}} will automatically be updated to the campaign’s specific ID.

An example CSS code would be:

html div#om-{{id}} input[type=submit],
html div#om-{{id}} button { background: #ff6600; } 

You can target each element individually by using DevTools (Chrome) or Firebug (Firefox) in your browser. You will need to have a working knowledge of CSS to use this tool in customizing the entire layout of your campaign forms.

What is a Template Namespace?

One of the important parts of your OptinMonster campaign is it’s Template Namespace.

Namespace

Definition: The HTML namespace prefix used throughout your campaign template for classes and IDs. This is useful for getting around things like ad blockers. Changing this setting will force a page refresh on save.

For example, you may target an element like this:

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

Like {{id}}, {{ns}} will automatically be replaced by your campaign’s namespace when the code is added to your site.

Do you want to create your own custom campaigns? With our Drag and Drop Builder you can create completely custom campaign designs while still enjoying all of OptinMonster’s advanced page targeting tools.


FAQs

Q: Do you have any tips on how to use DevTools or Firebug?

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


Q: How do I find my campaign’s unique slug ID?

A: You can find this on the Dashboard. First, click the dots for more options.

More Options

Then, copy the Unique ID.

Copy Unique ID