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).
Recommended reading: Using the code editor, Infradox XS customisation, Infradox URL’s explained.
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
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.
And here’s the CSS that you can paste into the custom CSS file.