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.

Step 2 – Customize Your Campaign

Select the Setup tab in the campaign Builder.

Choose the Setup Tab when editing your campaign to setup your campaign.

In the Setup panel, scroll down to the Custom CSS option.

Custom CSS can be added to your campaign in the Setup panel of the campaign Builder.

Where to Find Each Campaign’s Required Opening CSS Line?

Hovering over the Question Mark icon will show you the campaign’s unique ID that you’ll want to use when writing custom CSS.

The Custom CSS Slug is shown in the question mark icon's popup dialog window.

Now when writing your custom CSS, you need to prefix each statement with that declaration. An example CSS code would be:

html div#om-jk2jfc9zdulyv598 input[type=submit],
html div#om-jk2jfc9zdulyv598 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.

TemplateNamespace

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, your template for doing something like the “Make an Campaign a Clickable Button or Image” has some of its CSS template looking like the following:

html div#om-YOUR_OPTIN_SLUG .NAMESPACE-footer {
    background-color: transparent !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0px !important;
}

Per Your Campaign’s Slug Opening Declaration, you may find that your opening declaration is: html div#om-lvzadk574tz1rmr6. Furthermore, let’s say that your Template Namespace is chicago as in the example image above. That means, your Custom CSS would look like:

html div#om-lvzadk574tz1rmr6 .chicago-footer {
    background-color: transparent !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0px !important;
}

Do you want to start making your own custom campaigns? With out canvas technology you can start with a blank canvas modal and create your own unique campaigns with HTML and CSS 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: