How to Style Multiple Campaigns at Once with Custom CSS

Are your website’s styles overwriting a lot of your campaign’s built-in styling? Would you like to easily change elements on all of your campaigns? With this guide, you can easily add custom CSS on your style.css (or equivalent) file and have your changes affect all or a subset of campaigns on your site.

IMPORTANT NOTE: This guide assumes you’re already familiar with our Custom CSS tool and namespaces. If not, please read that guide before preceding any further.
TIP: This guide will utilize some CSS called the “Attribute-Value Selector“, shown like [attribute^=value]. This selector targets the beginning of a Id’s name. If you’re unfamiliar with that selector, click the link above to learn more.

How to Target All Campaigns on Your Site

You can copy our code below and post it at the bottom of your site’s style.css file. Every campaign can be targeted with: [id^="om-"].

div[id^="om-"] {
  /* Anything inside here applies to any div ID that starts with om-  */

  font-family: "Times New Roman", Georgia, Serif !important;
}

The code above will target all your campaigns because all of OptinMonster’s campaigns have an ID that begins with om-. This could be useful to adding a certain font family (like in the code example above), or applying “Right-to-Left” styles, etc.


How to Target Specific Sections of Multiple Campaigns

Are you wanting to target a specific section of all of your OptinMonster campaigns? Do you need to edit the font-family or perhaps style all of your OptinMonster placeholders or input buttons? Then this section is what you need to focus on.

TIP: This section will utilize some CSS called the “Attribute-Value Selector“, shown like [attribute$=value]. This selector targets the end of a Id’s name. If you’re unfamiliar with that selector, click the link above to learn more.

For instance, if you want to apply some CSS changes to the form area of all your campaigns, then you could do something like the following example where all the forms have padding added:

div[id^="om-"] [class$="-form"] {
	padding: 2px !important;	
}

This method beneficial if you want to apply certain styles to campaigns without having to modify the CSS on every specific campaign.


How to Target Specific Namespaces

Every campaign on your site by default has a unique namespace. This is helpful for a variety of reasons. Some users forget to add the CSS Opening Declaration for each Custom CSS one adds. Therefore, one can unintentionally add Custom CSS that actually affects multiple campaigns. Having unique namespaces prevents that accident from occurring. It’s imperative that you do not have duplicate namespaces in your campaigns.

Therefore, most users will have multiple campaigns and therefore multiple namespaces. This means you can be very specific about the changes you would like to make.

For instance, if you want to apply some CSS changes to the h1 element of 3 of your campaigns, with the namespaces of: omaha, orlando, and rainbow, then you could do something like:

div[id^="om-"] div[class^="omaha-"] h1,
div[id^="om-"] div[class^="orlando-"] h1,
div[id^="om-"] div[class^="rainbow-"] h1 {
  line-height: 1 !important;
}

This method beneficial if you want to apply certain styles to multiple campaigns without having to modify the CSS on every specific campaign.

However, it would be easier if you just add a word to the beginning of each namespace. Then you could use the attribute selector CSS and target every namespace that is prepended with your new keyword.

Example: Multi-Lingual Sites

Perhaps you have a situation where you have a multi-lingual site and some of the languages available are Right-to-Left (RTL) languages. For these campaigns, you don’t want to have to add Custom CSS for each of your RTL campaigns.

In this scenario, you could consider modifying all of your RTL campaign’s namespaces so that they all are prepended with rtl-. You can do this by locating the namespace for your campaign. You can follow our CSS guide to locate the namespace for each campaign.

To keep the example namespaces used previously, you have 3 campaigns with the namespaces of: omaha, orlando, and rainbow. After you prepend them with rtl-, they now look like: rtl-omaha, rtl-orlando, and rtl-rainbow.

Once all of your site’s campaigns’ namespaces are updated, then you can go to your site’s style.css file.

At the bottom of your CSS file, you can then put your customized CSS. Since these campaigns are for a Right-to-Left language, we want all of the text on the campaign to also follow the RTL text-direction styling.

div[id^="om-"] div[id^="rtl-"] {
   direction: rtl !important;
}

If you followed the example above, this means that every campaign you have that has its namespace prepended with rtl- will have its text show Right-to-Left once it is on your live site.

NOTE: this means in OptinMonster’s Builder, it will still show as the standard Left-to-Right.

Looking to learn more? Check out more walkthroughs in Extending Section of OptinMonster’s Documentation.