Making a custom login dialog

Availability

XS version 26.4 or later

Related articles

Infradox XS tags, functions and conditions

Building a custom header and menu

Building a custom footer

Custom pages

Adding Custom CSS

Adding Javascript to your pages

XS Widgets

Custom cookie message HTML

Introduction

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 CSS and HTML, then you can create your own login box. There's also a code example included.

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.

  1. 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.
  2. The password input:
    <input name="password" id="modalloginboxpassword" type="password" />
  3. The submit link (must be a href element and its id must be modalsubmitlogin
    <a id="modalsubmitlogin" class="button" href="#">
  4. 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.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk