{"id":5221,"date":"2022-04-24T18:59:32","date_gmt":"2022-04-24T22:59:32","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&#038;p=5221"},"modified":"2025-08-02T05:40:07","modified_gmt":"2025-08-02T09:40:07","slug":"how-to-use-optinmonsters-custom-css-tool","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/","title":{"rendered":"How to Use OptinMonster&#8217;s Custom CSS Tool"},"content":{"rendered":"\n<p>OptinMonster makes it easy to further customize your campaigns using CSS.<\/p>\n\n\n\n<p>In this article, you&#8217;ll learn how to use OptinMonster&#8217;s custom CSS tool.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before You Start<\/h2>\n\n\n\n<p>Here are some things to know before you begin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We recommend using Chrome&#8217;s Dev Tools feature to inspect elements in your campaign to identify the specific selector to use when writing your CSS. <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/css\">Learn more about using Dev Tools here<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create\">Custom CSS Tool<\/h2>\n\n\n\n<p>To use OptinMonster&#8217;s custom CSS tool, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the\u00a0<strong>Design<\/strong> view of the campaign builder, select the<strong>\u00a0Settings<\/strong> icon.<br><img decoding=\"async\" width=\"800\" height=\"369\" class=\"wp-image-205112\" style=\"width: 800px;\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_45.png\" alt=\"Open the campaign settings from the footer toolbar in OptinMonster.\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_45.png 1878w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_45-300x138.png 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_45-1024x472.png 1024w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_45-768x354.png 768w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_45-1536x708.png 1536w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n\n\n\n<li>Next, select the\u00a0<strong>Advanced<\/strong> tab in the sidebar and expand the <strong>Custom CSS<\/strong> option.<br><img decoding=\"async\" width=\"800\" height=\"479\" class=\"wp-image-205113\" style=\"width: 800px;\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_46.png\" alt=\"Add custom styling to your campaigns using the Custom CSS field in the campaign builder. - OptinMonster\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_46.png 1461w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_46-300x179.png 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_46-1024x613.png 1024w, https:\/\/optinmonster.com\/wp-content\/uploads\/2022\/04\/Screenshot_46-768x459.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n\n\n\n<li>Enter your custom CSS into the provided field.<\/li>\n\n\n\n<li>When you&#8217;re finished, <strong>Save<\/strong> your campaign.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Using Placeholders<\/h2>\n\n\n\n<p>Within the campaign builder you have access to a few placeholders you can use when writing your CSS selectors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Campaign ID<\/h3>\n\n\n\n<p>When writing your CSS, we recommend you prefix each selector using the campaign ID. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html div#om-{{id}} { \/* your styles here *\/ }<\/code><\/pre>\n\n\n\n<p>When the CSS is generated by OptinMonster to show on your site, the <code>{{id}}<\/code> placeholder will automatically be updated to use the campaign&#8217;s unique ID.<\/p>\n\n\n\n<p>In this example, we could change the background color of the buttons in the campaign using CSS like this:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/j57n7q42.js\/\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"namespace\">Campaign Namespace<\/h3>\n\n\n\n<p>Another important feature of your OptinMonster campaign is the <strong>Campaign Namespace<\/strong>. This can be found in the Advanced tab&#8217;s Display Settings option.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"772\" height=\"632\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/09\/campaign-namespace-1.jpg\" alt=\"You can customize the campaign namespace to use in CSS and Javascript targeting.\" class=\"wp-image-164884\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/09\/campaign-namespace-1.jpg 772w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/09\/campaign-namespace-1-300x246.jpg 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/09\/campaign-namespace-1-768x629.jpg 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><\/figure>\n\n\n\n<p>The HTML namespace prefix is used throughout your campaign template for classes and IDs and can be useful for getting around things like ad blockers.<\/p>\n\n\n\n<p>You can use the Campaign Namespace in your custom CSS with the placeholder <code>{{ns}}<\/code>, for example:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/e50kqymo.js\/\"><\/script>\n\n\n\n<p>Just like the <code>{{id}}<\/code> placeholder, the <code>{{ns}}<\/code> placeholder will automatically be updated to use your campaign&#8217;s namespace when the CSS is generated to show the campaign on your site.<\/p>\n\n\n\n<div class=\"alert-box alert-yellow\">\n<p class=\"alert-box-title\"><\/p>\n\n\n\n<p>Be advised that changing the Namespace setting will force a page refresh on save.<\/p>\n\n\n\n<p class=\"is-style-arrow-link has-link-color\"><\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Examples<\/h2>\n\n\n\n<p>The following examples are ways you can target CSS to specific elements in a campaign.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Target All Elements<\/h3>\n\n\n\n<p>This selector allows you to target all elements within all OptinMonster campaigns appearing on your site:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/qo96l7yo.js\/\"><\/script>\n\n\n\n<p>This selector is useful to apply a <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-a-custom-font\/\">custom font family<\/a> or <a href=\"https:\/\/optinmonster.com\/docs\/how-to-make-your-optins-appear-right-to-left-rtl\/\">applying \u201cRight-to-Left\u201d styles<\/a>, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"target-sections-of-campaigns\">Target Specific Sections<\/h3>\n\n\n\n<div class=\"alert-box alert-blue\">\n<p class=\"alert-box-title\">Pro Tip<\/p>\n\n\n\n<p>This section will utilize some CSS called the &#8220;<a href=\"http:\/\/www.w3schools.com\/cssref\/sel_attr_begin.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Attribute-Value Selector<\/a>&#8220;, shown like <code>[attribute$=value]<\/code>. This selector targets the <strong>end<\/strong> of an ID&#8217;s name. If you&#8217;re unfamiliar with that selector, click the link above to learn more.<\/p>\n\n\n\n<p class=\"is-style-arrow-link has-link-color\"><\/p>\n<\/div>\n\n\n\n<p>For instance, if you want to apply some CSS changes to the form area of your campaign you could use this selector:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/y26ldgg2.js\/\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">FAQs<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\">How can I learn more about using Chrome&#8217;s DevTools or Firefox&#8217;s Firebug?<\/h5>\n\n\n\n<p>You might find the following helpful to get started using your browser&#8217;s dev tools to customize CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=Z3HGJsNLQ1E\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Chrome DevTools for CSS (video)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/six-tips-for-chrome-devtools\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Six Tips for Chrome DevTools<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=xGuFWL3v8Fo\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Firebug for CSS (video)<\/a><\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Can I use SASS or LESS in the CSS tool?<\/h5>\n\n\n\n<p>No, at this time only vanilla CSS can be used. SASS or LESS will not be rendered properly and may corrupt \/ break your campaign.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\">My CSS isn&#8217;t working, why?<\/h5>\n\n\n\n<p>If the custom CSS you&#8217;ve entered isn&#8217;t showing in the builder&#8217;s preview of your campaign right away, check the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>That your CSS is correctly formatted with all proper semi-colons and curly braces. If any are missing, you may find some styles work as expected but all styles after the missing semi-colon or curly brace aren&#8217;t applied to your campaign.<\/li>\n\n\n\n<li>Your CSS selector may not be specific enough to target the desired element. In this case, it may be helpful to try using the <code>!important<\/code> declaration to force the style to be applied.<\/li>\n\n\n\n<li>Still not working? <a href=\"https:\/\/optinmonster.com\/docs\/getting-support-for-optinmonster\/\">Our support team would be happy to help<\/a>!<\/li>\n<\/ul>\n\n\n","protected":false},"excerpt":{"rendered":"<p>OptinMonster makes it easy to further customize your campaigns using CSS. In this article, you&#8217;ll learn how to use OptinMonster&#8217;s custom CSS tool. Before You Start Here are some things to know before you begin: Custom CSS Tool To use OptinMonster&#8217;s custom CSS tool, follow these steps: Using Placeholders Within the campaign builder you have&nbsp;&hellip;<\/p>\n","protected":false},"author":4657,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[96],"documentation\/tags":[31399,31457,31409,31411],"class_list":["post-5221","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-extending"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/5221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/types\/optinmonster_docs"}],"author":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/users\/4657"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=5221"}],"version-history":[{"count":20,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/5221\/revisions"}],"predecessor-version":[{"id":205115,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/5221\/revisions\/205115"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=5221"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=5221"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=5221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}