{"id":6803,"date":"2023-05-03T21:09:00","date_gmt":"2023-05-03T21:09:00","guid":{"rendered":"https:\/\/essentials.pixfort.com\/knowledge-base\/?p=6803"},"modified":"2023-07-28T00:31:01","modified_gmt":"2023-07-28T00:31:01","slug":"popup-custom-css","status":"publish","type":"post","link":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/","title":{"rendered":"Popup Custom CSS"},"content":{"rendered":"\n

The information in this article is valid for Theme version 3.1.0<\/code> or newer<\/strong><\/p>\n\n\n\n

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

<\/p>\n\n\n\n

As an example, to customize the width of a specific popup (for example the popup with the ID 1234<\/strong>) via css you can use the following code snippet:<\/p>\n\n\n\n

.pix-popup-1234 .pix-dialog-container { <\/span><\/code>    --pix-dialog-width: 920px !important; <\/span>\n}<\/span><\/code><\/pre>\n\n\n\n

In the same way, you can customize the launcher of a specific popup using the unique launcher class selector .pix-launcher-ID<\/code> (where ID is the popup WordPress post ID).<\/p>\n\n\n\n

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

.pix-launcher-1234<\/span> { <\/span><\/code>    --pix-launcher-border-radius: 15px;\n}<\/span><\/code><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Customizing default Popup and Launcher CSS variables<\/strong><\/h5>\n\n\n\n

To customize the default popup css variables you can use the following variables to override the default values:<\/p>\n\n\n\n

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

To customize the default launcher css variables you can use the following variables to override the default values:<\/p>\n\n\n\n

.pix-launcher-ID<\/span> { <\/span><\/code>    --pix-launcher-bottom-value: 20px;\n    --pix-launcher-horizontal-value: 20px;\n    --pix-launcher-background-color: #fff;\n    --pix-launcher-color: #333;\n    --pix-launcher-shadow: none;\n    --pix-launcher-padding: 0;\n    --pix-launcher-width: 50px;\n    --pix-launcher-height: 50px;\n    --pix-launcher-border-radius: 100%;   \n}<\/span><\/code><\/code><\/pre>\n\n\n\n

*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.<\/em><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"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),…","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[120],"tags":[44,46,424,69,67],"yoast_head":"\nPopup Custom CSS - Essentials Knowledge base<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Popup Custom CSS - Essentials Knowledge base\" \/>\n<meta property=\"og:description\" content=\"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),...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Essentials Knowledge base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pixfort\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-03T21:09:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T00:31:01+00:00\" \/>\n<meta name=\"author\" content=\"pixfort\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pixfort\" \/>\n<meta name=\"twitter:site\" content=\"@pixfort\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"pixfort\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/\"},\"author\":{\"name\":\"pixfort\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\"},\"headline\":\"Popup Custom CSS\",\"datePublished\":\"2023-05-03T21:09:00+00:00\",\"dateModified\":\"2023-07-28T00:31:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/\"},\"wordCount\":234,\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"keywords\":[\"css\",\"custom\",\"launcher\",\"popup\",\"popups\"],\"articleSection\":[\"Developers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/\",\"name\":\"Popup Custom CSS - Essentials Knowledge base\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-05-03T21:09:00+00:00\",\"dateModified\":\"2023-07-28T00:31:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Popup Custom CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"name\":\"Essentials Knowledge base\",\"description\":\"made by pixfort\",\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\",\"name\":\"pixfort\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"contentUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"width\":322,\"height\":110,\"caption\":\"pixfort\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pixfort\",\"https:\/\/twitter.com\/pixfort\",\"https:\/\/www.instagram.com\/pixfort\/\",\"https:\/\/www.linkedin.com\/company\/pixfort\",\"https:\/\/www.youtube.com\/c\/Pixfort\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\",\"name\":\"pixfort\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"caption\":\"pixfort\"},\"description\":\"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub\",\"sameAs\":[\"http:\/\/hub.pixfort.com\"],\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Popup Custom CSS - Essentials Knowledge base","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/","og_locale":"en_US","og_type":"article","og_title":"Popup Custom CSS - Essentials Knowledge base","og_description":"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),...","og_url":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/","og_site_name":"Essentials Knowledge base","article_publisher":"https:\/\/www.facebook.com\/pixfort","article_published_time":"2023-05-03T21:09:00+00:00","article_modified_time":"2023-07-28T00:31:01+00:00","author":"pixfort","twitter_card":"summary_large_image","twitter_creator":"@pixfort","twitter_site":"@pixfort","twitter_misc":{"Written by":"pixfort","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/#article","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/"},"author":{"name":"pixfort","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6"},"headline":"Popup Custom CSS","datePublished":"2023-05-03T21:09:00+00:00","dateModified":"2023-07-28T00:31:01+00:00","mainEntityOfPage":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/"},"wordCount":234,"publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"keywords":["css","custom","launcher","popup","popups"],"articleSection":["Developers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/","name":"Popup Custom CSS - Essentials Knowledge base","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website"},"datePublished":"2023-05-03T21:09:00+00:00","dateModified":"2023-07-28T00:31:01+00:00","breadcrumb":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/popup-custom-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/essentials.pixfort.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Popup Custom CSS"}]},{"@type":"WebSite","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","name":"Essentials Knowledge base","description":"made by pixfort","publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization","name":"pixfort","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","contentUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","width":322,"height":110,"caption":"pixfort"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pixfort","https:\/\/twitter.com\/pixfort","https:\/\/www.instagram.com\/pixfort\/","https:\/\/www.linkedin.com\/company\/pixfort","https:\/\/www.youtube.com\/c\/Pixfort"]},{"@type":"Person","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6","name":"pixfort","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","caption":"pixfort"},"description":"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub","sameAs":["http:\/\/hub.pixfort.com"],"url":"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/"}]}},"_links":{"self":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/6803"}],"collection":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/comments?post=6803"}],"version-history":[{"count":54,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/6803\/revisions"}],"predecessor-version":[{"id":7082,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/6803\/revisions\/7082"}],"wp:attachment":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=6803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/categories?post=6803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/tags?post=6803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}