This feature allows you to choose a design template for your authentication pages (register, login, forgot password, and reset password). You can then customize Favicon, Logo, and Labels for the selected template. The default design theme remains applicable even if you do not choose a template option.
Login to your LoginRadius Dashboard account, from the left navigation panel, click Auth Page (IDX) and then navigate to the Auth Page (IDX) section. Click the CUSTOMIZE button given on the selected theme as highlighted in the screen below:
By clicking on SWITCH TO ADVANCED EDITOR, You can see an advanced editor section showing several files and their source codes, as shown in the screen below:
The IDX consists of two main pages-Authentication and Profile.
The Authentication page has the following interfaces:
- Forgot Password
The Profile page has the following interfaces:
- Profile Editor
- Reset Password
Both pages allow you to add your custom CSS and JS by adding the properties or direct from the URL along with the below categories.
The HTML layout of both Authentication and Profile page is customizable. Go into the
The HTML interfaces are set to some default containers to handle different authentication functionalities. Below is the list of default interfaces and their corresponding containers.
|Interface||Default Container ID||Related Section|
|Social Linking Interface||lr-linked-social and lr-not-linked-social||Profile|
Note: While changing the markup, you need to change the corresponding IDs for the interfaces.
default-auth-before-script.js using this variable
You can customize the CSS styling applied to the page by making changes to the provided
hosted-auth-default.css according to your design/branding requirements.
You can control some additional functionality from
The following customizations are included in the provided JS files:
To change the messages: Find the object
To change the loading image: Find function
To change form settings:
- Find functions
showLogin, showRegister, showForgotPasswordin default-auth-before-script.js and customize it for your requirements. You can add the custom code just below the default code.
- Find functions
LoginRadiusRaaS.\$hooks.setRenderProfileEditorin default-profile-before-script.js and customize it for your requirements. You can add the custom code just below the default code.