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.
List of available selectors
Selectors on containers
These selectors target structural containers:
wisepops-popup
wisepops-overlay
wisepops-close
wisepops-tab
wisepops-column
Selectors on block type
As seen in the example above, you can target blocks by type. The following classes are available:
wisepops-block-2cta
wisepops-block-cta
wisepops-block-countdown
wisepops-block-discount
wisepops-block-dismiss
wisepops-block-html
wisepops-block-iframe
wisepops-block-image
wisepops-block-push-cta
wisepops-block-recommendation
wisepops-block-signup
wisepops-block-spacing
wisepops-block-text
wisepops-block-video
Selectors 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:
Make sure that your campaign is saved after creating the block
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
Selectors 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;
}Some blocks expose children classes, making it easy to stylize these nested elements.
Selectors inside Countdown block
wisepops-countdown-days
wisepops-countdown-hours
wisepops-countdown-minutes
wisepops-countdown-seconds
wisepops-countdown-value
wisepops-countdown-unit
Selectors inside Signup block
wisepops-field-wrapper
wisepops-field
wisepops-field-option
wisepops-signup-disclaimer
And selectors by field type:
wisepops-field-email
wisepops-field-first_name
wisepops-field-last_name
wisepops-field-phone
wisepops-field-text
wisepops-field-textarea
wisepops-field-radios
wisepops-field-checkboxes
wisepops-field-select
wisepops-field-date
wisepops-date-year-gt
wisepops-date-year-e
wisepops-date-year-lt
Selectors inside Recommendation block
wisepops-block-recommendation-step-1
wisepops-block-recommendation-step-2
wisepops-block-recommendation-step-3
wisepops-block-recommendation-product
wisepops-block-recommendation-product-link
wisepops-block-recommendation-product-image
wisepops-block-recommendation-product-name
wisepops-block-recommendation-product-price
wisepops-block-recommendation-product-discounted-price
wisepops-block-recommendation-product-price-separator
wisepops-block-recommendation-add-to-cart-btn
wisepops-block-recommendation-back-btn
wisepops-block-recommendation-options-label
wisepops-block-recommendation-checkout-btn
wisepops-block-recommendation-continue-btn
Selectors inside Cart block
wisepops-block-cart-container
wisepops-block-cart-product-section
wisepops-block-cart-product-image
wisepops-block-cart-product-name
wisepops-block-cart-product-price
wisepops-block-cart-order-summary
wisepops-block-cart-summary-row
Selectors on step ID
For multi-step campaigns, you can specify the style of a single step by using the step ID class: wisepops-step-id-42, where 42 is the ID of the step. It works the same as for blocks. Make sure to save your campaign after having created the step, and you'll be able to find its ID in the preview.
Here's an example of how you can define a different inset shadow for your steps:
/* Setting gold shadow for the step with ID 42 */
.wisepops-step-id-42 {
box-shadow: inset 0 0 50px gold;
}
/* Setting cyan shadow for the step with ID 50 */
.wisepops-step-id-50 {
box-shadow: inset 0 0 50px cyan;
}