Write Your Own CSS Rules into Your Popups

Lisa Fockens Updated by Lisa Fockens

What is a CSS rule?

To follow this guide, you will need basic knowledge of CSS. 

In short, there are two parts in a CSS rule:

  • The selector: to indicate which part of the popup you want to style
  • The declaration: the style you want to apply on the selected elements

In this example, we target  <p>  elements (with the selector p ) to apply the style color: red; .

Let's test this out.

  1. Create a new campaign.
  2. Add a CTA block to your popup.
  3. Select the "Design" section in the far left column, then click "CSS" in the top column.
  4. Add the following rule into the CSS customization box:
    .wisepops-block-cta {
      transform: rotate(3deg);
    }

You should immediately see the rule being applied on your button:

Use classes starting with "wisepops"

In the selector in the previous example (.wisepops-block-cta ), the leading dot indicates that wisepops-block-cta  is a class.

Wisepops provides various classes to help you select the elements to stylize.

You should not use other classes in selectors, such as bLXhPG, Block__BlockContainer-jPTcrl, etc. These are generated classes, that might change at any time. We ensure that the classes starting with "wisepops" are persistent. All other classes are not recommended.

Selector on block type

As seen in the previous example, you can target blocks by type. The following classes are available:

  • wisepops-block-2cta
  • wisepops-block-cta
  • wisepops-block-dismiss
  • wisepops-block-html
  • wisepops-block-iframe
  • wisepops-block-image
  • wisepops-block-like
  • wisepops-block-separator
  • wisepops-block-signup
  • wisepops-block-spacing
  • wisepops-block-text
  • wisepops-block-video

You can also target the tab with the following class:

wisepops-tab

Selector on block ID

You might need to select a unique block among other blocks of the same type. To do so, you can use its unique class, based on a unique ID. Such classes look like this: wisepops-block-id-42 . A block will keep its unique class until it is deleted, and no other block will ever have the same unique class.

To find this unique class, complete the following:

  • Open the preview of your popup
  • Right-click on the block you want to target and click on "Inspect"
  • Find the class related to the block type on the selected element, or its parents
  • The block type class should be immediately followed by the unique class

Selector on elements inside a block

You might want to select elements inside a block. For example, if you want to stylize the submit button of a signup block, you will have to use a descendant combinator in your selector, such as the following:

.wisepops-block-signup button {
  text-shadow: 0 0 5px white;
}

Selector on steps

For multi-step campaigns, you can specify the style of a single step by using the step classes: wisepops-step-<index>, where <index> is the step index, starting at 1. Here's an example of how you can define a different inset shadow for your steps:

CSS

/* Setting gold shadow for the first step */
.wisepops-step-1 {
  box-shadow: inset 0 0 50px gold;
}

/* Setting cyan shadow for the second step */
.wisepops-step-2 {
  box-shadow: inset 0 0 50px cyan;
}

Adding a Countdown Timer

Contact