How to Use OptinMonster’s Custom CSS Tool

Due to a high number of requests by our users, we introduced the custom CSS functionality to OptinMonster. Our custom CSS tool allows you to specify custom CSS and customize the look and feel of your optin.

  1. Create or Modify an Optin
  2. Customize Your Optin
  3. FAQs

Step 1 – Create or Modify an Optin

Create a new optin or modify an existing optin from OptinMonster Dashboard. Open the OptinMonster Builder by selecting the Edit link.

Select the edit button from your Dashboard to edit an optin you've already created.

Step 2 – Customize Your Optin

Select the Setup tab in the optin builder.

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

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

Custom CSS can be added to your optin in the Setup panel of the optin builder.

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

Hovering over the Question Mark icon will show you the optin’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 optin forms.


What is a Template Namespace?

One of the new additions to OptinMonster as of our 3.0 Update is the Template Namespace.

TemplateNamespace

Definition: The HTML namespace prefix used throughout your optin 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 Optin 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 Optin’s Slug Opening Declaration, you may find that your opening declaration is: html div#om-lvzadk574tz1rmr6. And 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;
}

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: