Customize Modal Login Form

Hi saemosaemo,

Thanks for downloading and using the plugin. Glad its working and you’re customizing it. Check below for my responses:

1. Adding a key icon
This css snippet should do it for you:

.ui-button-text {
    background: url('http://phoogoodev.com/southpark/wp-content/themes/phoogoo/lib/img/login-key.png') no-repeat left 6px;
    padding-left: 40px;
    }

2. Replacing close link
To add a key icon you can add the following css:

.ui-button-text {
    background: url('my-custom-x-icon.jpg') no-repeat;
    text-indent: -999em;
    display: block;
    width: 20px; // make this the width of your icon
    height: 20px; // make this the height of your icon
    }

3. Placeholders
Currently the only way to add placeholders is to edit the core plugin or add this snippet of JS to your current theme, as we have not yet added an option for custom JS.

$('.ajax-login-default-form-container input[name="user_login"]').attr('placeholder', 'User Login');
$('.ajax-login-default-form-container input[name="password"]').attr('placeholder', 'User Login');
$('.ajax-login-default-form-container input[name="login"]').attr('placeholder', 'User Login');
$('.ajax-login-default-form-container input[name="email"]').attr('placeholder', 'Email');
$('.ajax-login-default-form-container input[name="confirm_password"]').attr('placeholder', 'Confirm Password');

You’ll then need this line of CSS to hide the form labels:

.ajax-login-default-form-container label {
    display: none;
    }

P.S., To make customization easier I’m [adding an option for custom JS](https://github.com/zanematthew/zm-ajax-login-register/issues/47) in the next version. Currently the only filter is zm_ajax_login_redirect, which allows you to filter the redirect. The next release will include the following filters.

do_action( 'zm_ajax_login_after_successfull_registration', $user_id );
do_action( 'zm_ajax_login_register_below_email_field' );
do_action( 'zm_ajax_login_register_below_settings' );

apply_filters( 'zm_ajax_login_register_status_codes', $status );
apply_filters( 'zm_ajax_login_register_localized_js', $defaults );
apply_filters( 'zm_ajax_login_not_a_member_text', __('Not a member?', 'ajax_login_register') );
apply_filters( 'zm_ajax_login_register_already_registered_text', __('Already registered?','ajax_login_register') );

If there are any additional filters you’ll want added fill free to let me know.

Hey,

I didn’t mention that the forms are loaded after the page is fully loaded, thus you’ll want to wrap them in the window.load function, see below:

$j( window ).load(function(){
        $j('.ajax-login-default-form-container input[name="user_login"]').attr('placeholder', 'User Login');
        $j('.ajax-login-default-form-container input[name="password"]').attr('placeholder', 'Password');
    });

I tested this and it does work.

You should still be able to set an image next to place holder text by adding the following (similar to my first css snippet).

.ajax-login-default-form-container input[name="user_login"] {
    padding-left: 50px; // This can be about the width of your image
    background: url('my-image.jpg') no-repeat 0 0; // path to image, do not repeat, and position it left/right top/bottom
    }

Hi,

Unfortunately you cannot override the passwords being saved in the web browser with placeholders.

Glad it helped.