AJAX Login Modals Templates and Styling

Customizable Form and Shortcode Templates

All of the forms and shortcodes generated by the AJAX Login Modals (ALM) plugin extension use the customizable templates listed below. Each template can be added to your site theme (or child-theme) and customized to include your own forms, content, or HTML structures.

If you intend to customize the plugin templates, begin by adding a new folder in the root directory of your theme (or child-theme) named 'popmake_templates'. Copy one or more of the plugin template files from  /popup-maker-ajax-login-modals/templates/*  and paste them into the newly added theme folder. 

The following templates are included in the ALM plugin:

• form-login.php -- Used in the login form shortcode.
• form-login-static.php -- Used for compatibility with plugins that modify the built in login forms.
• form-registration.php -- Used in the registration form shortcode.
• form-recovery.php -- Used in the recovery form shortcode.
• form-registration-profile-builder.php -- Used in the registration form shortcode when the Profile Builder plugin is active.

Plugin CSS Classes and Styles

Locating Styles

Go to:   /wp-content/plugins/popup-maker-ajax-login-modals/assets/css/site.css to view each of the plugin CSS styles.

Uses for Each Set of Styles

• .pum-login-form, .pum-registration-form, .pum-recovery-form -- Used to target the main popup container used for each of the forms.
• .pum-form -- Used on the wrapper for each of the forms included.
• .pum-form-wrapper .messages .message -- Used on the error/success message. Can further be styled using the following status states.

• .pum-form-wrapper .messages .message.error
• .pum-form-wrapper .messages .message.success
• .pum-alm-footer-links -- Used to style the quick change links below each form.

On top of these basic styles, each form field has its own unique wrapper class:

• .pum-form p.pum-field-user_login -- Used to target the Login Username field within your form.
• .pum-form p.pum-field-user_pass -- Used to target the User Password field within your form.
• .pum-form p.pum-field-user_pass2 -- Used to target the Confirm User Password field within your form.
• .pum-form p.pum-field-user_email -- Used to target the User Email field within your form.
• .pum-form p.pum-field-user_email2 -- Used to target the second User Email field within your form.