AJAX Login Modals Templates and Styling

AJAX Login Modals Templates and Styling

This page describes how to customize the templates and CSS styling for the AJAX Login Modals extension, available here.

For an introduction to AJAX Login Modals, read this doc. For the AJAX Login Modals live examples site, click here.

Templates

All of the forms and shortcodes are generated using the following customizable templates. You can easily override these to include your own custom forms, content, or HTML structures by creating a new folder in your theme called “popmake_templates”. You can then copy files from the included templates folder in the plugin to your new folder. The following templates are included:

  • 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 Profile Builder is active.

CSS Classes and Styling

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

Still need help? Contact Us Contact Us