Popup CSS Customization Glossary

Tip: Select any of the images in this article for a closer look.

Popups are a powerful way to grab attention and engage users who visit your website on either a desktop or mobile device.

About This Glossary


Postscript makes it easy to customize both desktop and mobile popups to match the look and voice of your brand. For those wishing to take this customization a step further, Postscript allows you to edit your popups' cascading style sheets (CSS). 

We designed this glossary as a reference to help you understand and locate the various HTML and CSS elements present in our popups. Once you know which elements you can customize, it's much easier to get started.

Common CSS Properties


CSS properties allow you to define how specific elements should display on your website, or in this case, your popup.

Some of the properties listed below appear in the above example of code, highlighted in gold. 

  ID Function
color Sets the color of your text
background-color Specifies the background color of an element
background-image Specifies one or more background images for an element
font-size Specifies the font size of your text
font-family Specifies the font family for your text
font-weight Specifies the weight of your font
padding Shorthand property for all the padding properties
margin Sets all the margin properties in one declaration
width Sets the width of an element
height Sets the height of an element
border Shorthand property for border-width, border-style and border-color
position Specifies the type of positioning method used for an element

Common HTML Elements in Popups


HTML elements help inform which parts of a webpage, or in this case your popup, the CSS code should impact.

For example, if I wanted to change the color of my text but have it only affect my h3 header and not other headers and smaller text, I would use the following code:

h3 {
    color: purple;
}
Common HTML Elements HTML Elements in Postscript Popups
Element Function
body Refers to the body of HTML document
h1 Heading 1
h2 Heading 2
h3 Heading 3
h4 Heading 4
p Paragraph
button Defines a clickable element
div

A division or a section in an HTML document

span An in-line element used to mark up a part of a text, or a part of a document

Desktop Popup ID Elements


We've included a list of common desktop popup elements that you can customize using CSS. Use the image to locate an element you wish to customize, then locate the corresponding ID in the table below.

Desktop Popup Minimized Popup

Image Item ID
1 #ps-desktop-widget__logo-image
2 #ps-desktop-widget__pre-headline
3 #ps-desktop-widget__headline
4 #ps-desktop-widget__post-headline
5 #ps-desktop-widget__disclaimer-text
6 #ps-desktop-widget__phone-input
7 #ps-desktop-widget__email-input
8 #ps-desktop-widget__submit
9 #ps-desktop-widget__close-link

Mobile Popup ID Elements


We've included a list of common mobile popup elements that you can customize using CSS. Use the images to locate an element you wish to customize, then locate the corresponding ID in the tables below.

Partial Popup Full Popup Minimized Popup

Image Item ID
1 #ps-mobile-widget-partial__logo-image
2 #ps-mobile-widget-partial__headline
3 #ps-mobile-widget-partial__sub-headline
4 #ps-mobile-widget-partial__terms
5 #ps-mobile-widget-partial__phone-input-wrapper
6 #ps-mobile-widget__email-input
7 #ps-mobile-widget-partial__accept-button
8 #ps-mobile-widget-partial__accept-button-text

What's Next?


Customize the above elements in your desktop and mobile popups. Check out the below resources which provide additional information and copy & paste code.

Get Support


Have questions? Please feel free to reach out to our wonderful Support team at support@postscript.io or via live chat. You can also submit a support request here!

Need ongoing channel strategy guidance? Please fill out this form and we'll connect you to one of our certified partners.

Was this article helpful?
0 out of 0 found this helpful