Custom login dialogs

The login dialog is the window that pops up when user clicks the login link or when the user tries to access a function that requires one to be logged in. If you know how to use CSS and HTML, then you can create your own login box. There’s also a code example included. Note that there’s also a full page login version that you can get to with the url /loginpage. You can create a custom version of the full page too (in XS 31.2 or later).

Note that you can disable the login popup dialog if you want to always display the full screen login page (its url is /loginpage). You can find this setting in Site configuration, General settings, Sessions.

About the code

You can make the dialog look like anything you want. Some of the elements must however exist and their id’s/names may not be changed.

The login input:
<input name=”login” id=”modalloginboxlogin” type=”text” value=”<?xs var(‘cookieloginname’) ?>” />
The xs tag cookieloginname will output the user’s login name if he/she logged in before.
The password input:
<input name=”password” id=”modalloginboxpassword” type=”password” />
The submit link (must be a href element and its id must be modalsubmitlogin
<a id=”modalsubmitlogin” class=”button” href=”#”>
A div with id modalloginboxMessage where any user feedback will be inserted
<div id=”modalloginboxMessage”></div>

Loading the example code

In the code editor, select “Login dialog” in the dropdown box. In the toolbar at the top, click load example. A dialog will appear. Check the radio button in front of the first file in the list and then click the “Use code” button. The html will load into the editor.
Note that many of the examples have embedded CSS. Once you are done customising your code, remove the CSS and paste it in the Custom CSS.

Don’t forget to tick the “Enable” checkbox at the top before you save your code. Once you save it with this checkbox selected, the custom dialog will become active on your website.

Note that the example code is in English. You can of course localise it as described in the other articles in this forum.

Below is a complete example that you can paste into the code editor.

<div id="modalloginbox" class="modaldialogbox">
    <table>
        <tbody>
            <tr>
                <td class="loginform">
                    <h1>Existing users</h2>
                </td>
                <td class="registercolumn">
                    <h1>New here?</h2>
                </td>
            </tr>
            <tr>
                <td class="loginform">
                    <div>
                        Login to your account<br /><br />
                    </div>    
                    <label for="login">Login</label><br />
                    <input name="login" id="modalloginboxlogin" ln="<?xs var('cookieloginname') ?>" type="text" value="<?xs var('cookieloginname') ?>" /> <br />
                    <label for="password">Password</label><br />
                    <input name="password" id="modalloginboxpassword" type="password" /> <br />
                </td>
                <td class="registercolumn">
                    <div>
                        Signup to buy images, create lightboxes and more. Please note that this website is for professional image buyers only.<br /><br />
                    </div>    
                    <ul class="links">
                        <li class="loginregister"><a href="/register">Signup</a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="loginform">
                    <div id="modalloginboxMessage"></div> <!-- user feedback is inserted in this div -->
                </td>
                <td class="registercolumn">
                    <br />
                </td>
            </tr>    
            <tr>
                <td class="loginform">
                    <ul class="colorbuttons">
                        <li><a id="modalsubmitlogin" class="button" href="#"><span>login</span></a></li>
                    </ul>
                    <ul class="links">
                        <li class="loginforgotpw"><a href="/forgot-your-password"><?xs locale('loc_fpass') ?></a></li>
                        <li class="logincontactus"><a href="/contact-us">Need help?</a></li>
                    </ul>
                </td>
                <td class="registercolumn">
                </td>
            </tr>
            <tr>
                <td class="loginform">
                    <br />
                </td>
                <td class="registercolumn">
                    <br />
                </td>
            </tr>    
        </tbody>
    </table>
</div>

And here’s the CSS that you can paste into the custom CSS file.

    #modalloginbox {
        padding:0px;
        margin:0px;
        width:auto;
        height:auto;
    }
    #modalloginbox table {
        margin:0px;
        padding:0px;
    }
    td.loginform {
        width:400px;
        background-color:#d5d5d5;
        padding:0 20px 0 20px;
    }
    td.registercolumn {
        width:250px;
        background-color:#fff;
        padding:0 20px 0 20px;
    }    
    #register label {
        width:100%;
    }

Custom login dialogs

About the code

Loading the example code

Share this

Related Posts

Buy now function

Working with synced sub websites

Configuring Stripe for online payments

Responsive images slideshow with WebP support

WebP support

Customizing the admin dashboard and toolbar