A list of all the classes that can be changed or added while adding Custom CSS?
In this help article, we will try to list out all the HTML classes that can be used when you are adding Custom CSS to a popup.
In order to add Custom CSS to a popup, just go to Advanced settings > Additional CSS setting in the Design Settings of the popup:
Here are the classes with a small description that can be added or changed while adding Custom CSS to a popup:
Poptin main containter class, all other poptin classes can be inherited within this class
Poptin background overlay
Poptin container for desktop/mobile
Poptin container for thank you screen
Texts/labels within poptin
Submit button container- can be used to set height/width/position/z-index of submit button
Submit button- can be used to set submit button
Close button container- can be used to set height/width/position/z-index of close button
Close button. can be used to set close button color/line-height/font style etc
Link button container- can be used to set height/width/position/z-index of link button
Link button- can be used to set close button color/line-height/font style etc
Close icon container to set close icon position
To style poptin close icon
Image container to set image position
To style images used in poptin
Used for shapes used within poptin, can be used to customise width/height/position of shapes
Can be used to change shape color
Used for videos used within poptin, can be used to customise width/height/position of videos
Used for icons used within poptin, can be used to customise position/width/height/color etc of icons
Used for news ticker used within poptin, can be used to customise position/width/height/size etc of news ticker
Used for input form used within poptin, can be used to customise potition/width/index of input group
Used for input container used within poptin, can be used to customise input container
Used for inputs fields used within poptin, can be used to customise input fields style like font/background/color/height/margin etc
Here are some examples of how the CSS changes can be utilized for the popups:
An example of the Background Overlay CSS on the popup
An example of the Submit Button CSS on the popup
An example of the Input Fields CSS on the popup
In order to add Custom CSS to a popup, just go to Advanced settings > Additional CSS setting in the Design Settings of the popup:
Here are the classes with a small description that can be added or changed while adding Custom CSS to a popup:
Poptin main containter class, all other poptin classes can be inherited within this class
.poptin-popup{}
Poptin background overlay
.poptin-popup-background{}
Poptin container for desktop/mobile
.draggable-container{}
Poptin container for thank you screen
.poptin_thank_you_screen{}
Texts/labels within poptin
.froala-editor-text{}
Submit button container- can be used to set height/width/position/z-index of submit button
.poptin-form-submit-button{}
Submit button- can be used to set submit button
.poptin-form-submit-button .froala-editor-button{}
Close button container- can be used to set height/width/position/z-index of close button
.poptin-form-close-button{}
Close button. can be used to set close button color/line-height/font style etc
.poptin-form-close-button .froala-editor-button{}
Link button container- can be used to set height/width/position/z-index of link button
.poptin-form-link-button{}
Link button- can be used to set close button color/line-height/font style etc
.poptin-form-link-button .froala-editor-link{}
Close icon container to set close icon position
.close-x-button{}
To style poptin close icon
.close-x-button .close-icon{ }
Image container to set image position
.froala-image-wrapper{}
To style images used in poptin
.froala-image-wrapper img{}
Used for shapes used within poptin, can be used to customise width/height/position of shapes
.shape-wrap{}
Can be used to change shape color
.shape-wrap .froala-editor-shape{}
Used for videos used within poptin, can be used to customise width/height/position of videos
.froala-video-wrapper{}
Used for icons used within poptin, can be used to customise position/width/height/color etc of icons
.froala-editor-icon{}
Used for news ticker used within poptin, can be used to customise position/width/height/size etc of news ticker
.poptin-newsticker-element{}
Used for input form used within poptin, can be used to customise potition/width/index of input group
.inputs-container{}
Used for input container used within poptin, can be used to customise input container
`.inputs-container .form-input-class{}`
Used for inputs fields used within poptin, can be used to customise input fields style like font/background/color/height/margin etc
.inputs-container .form-input-class input{}
Here are some examples of how the CSS changes can be utilized for the popups:
An example of the Background Overlay CSS on the popup
An example of the Submit Button CSS on the popup
An example of the Input Fields CSS on the popup
Updated on: 15/11/2024
Thank you!