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.
Create a new campaign.
Add a CTA block to your popup.
Select the "Design" section in the far left column, then click "CSS" in the top column.
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;
}