Popup Custom CSS

The information in this article is valid for Theme version 3.1.0 or newer

To apply custom CSS to a specific popup you can target it using the unique popup class selector .pix-popup-ID (where ID is the popup WordPress post ID), you can also find this popup class in the Advanced tab inside the Custom CSS option note as following:

As an example, to customize the width of a specific popup (for example the popup with the ID 1234) via css you can use the following code snippet:

.pix-popup-1234 .pix-dialog-container {     --pix-dialog-width: 920px !important; 
}

In the same way, you can customize the launcher of a specific popup using the unique launcher class selector .pix-launcher-ID (where ID is the popup WordPress post ID).

For example, to customize the border radius of a specific launcher (for example the popup launcher with the ID 1234) via css you can use the following code snippet:

.pix-launcher-1234 {     --pix-launcher-border-radius: 15px;
}

Customizing default Popup and Launcher CSS variables

To customize the default popup css variables you can use the following variables to override the default values:

.pix-popup-ID {     --pix-dialog-border-radius: 0px;
    --pix-dialog-padding: 0px;
    --pix-dialog-close-left: initial;
    --pix-dialog-close-size: 35px;
    --pix-dialog-close-color: #eee;
    --pix-dialog-background-color: none;
    --pix-dialog-width: calc(var(--pix-container-width, 1140px) / 2);
    --pix-dialog-height: initial;
    --pix-dialog-shadow: none;
    --pix-dialog-margin: auto;
    --pix-dialog-enter-animation-duration: 300ms;
    --pix-dialog-exit-animation-duration: 200ms;
    --pix-dialog-backdrop-bg: rgba(0, 0, 0, 0.8);
    --pix-dialog-backdrop-filter: none;
}

To customize the default launcher css variables you can use the following variables to override the default values:

.pix-launcher-ID {     --pix-launcher-bottom-value: 20px;
    --pix-launcher-horizontal-value: 20px;
    --pix-launcher-background-color: #fff;
    --pix-launcher-color: #333;
    --pix-launcher-shadow: none;
    --pix-launcher-padding: 0;
    --pix-launcher-width: 50px;
    --pix-launcher-height: 50px;
    --pix-launcher-border-radius: 100%;   
}

*Please note that customizing the default css variables may affect the popup and launcher behavior and styling (please make sure that customizations are not breaking the site styling), also please note that customizations are out of the scope of item support.