Organizations may want to put instructions on the login page to inform users how to log in. 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 if the instructions are too lengthy 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 instructions to the login form:
- Go to Site Administration > Appearance > Themes > English > Settings
- Click on the "Login page" tab
- Enter your instructions:
- The instructions written in the "Top text box" field 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". 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;">For physicians, dentists, midwives, student placements, and external vendors please sign 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 a hospital account) please sign 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> |
