Organizations may want to put login instructions on the log in login page to inform users how to log in. For example, you may want to tell users to login using their regular credentials that they use at the hospital, or perhaps medical students are required to enter their school's email address as username.
Step-by-step guide
The instructions for short vs. long instructions are almost identical, except that we generally recommend that brief instructions be above the login form, and long instructions below the login form. Having The strategy you should use to display instructions largely depends on the length of the instructions. Having the instructions above the login form increases the likelihood that people will read the instructions . But but if the instructions are too longlengthy or contain images and you try to insert them at the top of the login page, people will have to scroll down to see the login form, which is not recommended for usability purposes.
Step-by-step Guide
To add short instructions to the login form:
- Go to Site Administration > Appearance > Themes > English (or French) > Settings
- Click on the "Login page" tab
- Enter your instructions:
- The instructions written in the "Top text box" field
- Click on the "Save changes" button.
To add long instructions:
- Go to Site Administration > Appearance > Themes > English (or French) > Settings
- Click on the "Login page" tab
- Enter your instructions
- will appear above the login form
- The instructions written in the "Bottom text box" field
- will appear above the login form
- Click on the "Save changes" button.
...
Examples
...
Below are a few examples, with sample code that you can enter in the "Top text box" or "Bottom text box".
...
| special | @authenticated |
|---|---|
| spacePermission | edit |
...
These examples are in HTML format, which means that the editor should be in HTML mode.
DISCLAIMER: The examples are presented for illustrative purposes only. Given the nature of HTML and CSS, Dual Code cannot guarantee that the HTML code presented here in will work on your current release, or continue to work in a future release. Please use at your own risk.
| Description | Screenshot | HTML Code |
|---|---|---|
This example inserts HTML code in the "Top text box" setting. |
| <p>Medical Students and Residents must use their college / university email address to log in. Other hospital staff may use their work email address.</p> |
This example also inserts HTML in the "Top text box" setting but uses icons. It is significantly more complex than the previous example. It is designed for organizations that allows users to login using their Active Directory credentials. |
| <div class="row m-4"> <div class="d-flex justify-content-end flex-column col-12 col-md-6"> <div class="text-center"> <b style="color:#003E7A;">Physicians, medical students, volunteers and external vendors, please log in here.</b> </div> <div class="d-none d-sm-block text-center ml-auto mr-auto mt-4 rounded-circle" style="background-color:#003E7A;color:rgb(255,255,255);width:40px;height:40px;line-height:40px;font-size:28px;margin-bottom:-40px;"> <i class="fa fa-arrow-down"></i> </div> <div class="d-sm-none text-center ml-auto mr-auto mt-1 rounded-circle" style="background-color:#003E7A;color:rgb(255,255,255);width:40px;height:40px;line-height:40px;font-size:28px;margin-bottom:-20px;"> <i class="fa fa-arrow-down"></i> </div> </div> <div class="d-none d-md-flex justify-content-end flex-column col-md-6" style="border-left: solid 1px rgba(51,51,51,0.6)"> <div class="text-center"> <b style="color:#003E7A;">For employees (with an Active Directory account), please log in here.</b> </div> <div class="text-center ml-auto mr-auto mt-4 rounded-circle" style="background-color:#003E7A;color:rgb(255,255,255);width:40px;height:40px;line-height:40px;font-size:28px;margin-bottom:-40px;"> <i class="fa fa-arrow-down"></i> </div> </div> </div> |
This example inserts HTML code in the "Bottom text box" setting. Note that in this case, an image (referenced as "image.jpg" in the HTML) was uploaded using the editor. |
| <table style="text-align: center; width: 100%"> <tbody> <tr valign="top"> <td width="100%"> <h4><strong>For Hospital Staff ONLY</strong><br>Use your imprivata username and password to log into the system</h4> </td> </tr> <tr valign="top"> <td width="100%"><img src="image.jpg" alt="" width="814" height="456" role="presentation" class="img-fluid atto_image_button_text-bottom"></td> </tr> </tbody> </table> |
