...
- 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 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" helps medical students, residents and hospital staff better understand which email address they should use in the screenshot below.
Adding instructions along with images to the "Bottom text box" helps new users understand where they can get their Employee ID to log in in the screenshot below.
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> |
