Articles on: Design

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-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

Was this article helpful?

Share your feedback

Cancel

Thank you!