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 Optin tab in the campaign Builder.

Optin Tab

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

Custom CSS Box

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.

Campaign ID Prefix

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.

Template 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, 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: