Add a warning message to the Iguana login dialogue page

Introduction

It is very easy to to add a custom message your Iguana Login page. Just follow the Instructions in the next section, it only takes 5 minutes to create a page like the one below. After that it is a simple matter to change the message text to match your requirements.

Our sample message talks about HIPAA compliance, which is one of the main reasons for a Login message. But you can say whatever you like so there is no need to mention HIPAA.

It’s also really easy to change how the message looks, check out the Customize the message section for some ideas.

If you have any questions please contact us at support@interfaceware.com.

Instructions [top]

 

  1. Find the login.cs file that contains the code for the Iguana login page:
    • Find your Iguana install directory
    • The login.cs file is in <iguana install>\web_docs\templates\
  2. Make a copy of the login.cs file called login _original.cs (or similar).

    Note: It is always a good idea to copy system/code files before making changes — then you can always revert to the original if there is a problem.

  3. Insert this code inside the style section at the top of the file, we put it after the last div definition in the file:
    /*------------- custom <div> login_message definition (for login message) -------------*/
    div.login_message {
     position: absolute;
     top: 10px;
     }
     
    /*------------- custom <div> login_message_content definition (for login message) -------------*/
     div.login_message_content{
     text-align: center;
     width :60%;
     margin : auto;
     background-color: white;
     border-radius: 4px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    The file should look like this:

    Tip: Because this is a C file (not a C++ file) you can only use C style comments — not the newer C++ double slash (//) comments:

  4. Insert this code inside the body section at the end of the file, we put it at the end of the body (near the end of the file):
    Note: This is simply HTML code so we used a paragraph tag <p> to separate the first line from the remaining text.

    <!-- ------------- display custom login message ------------- --> 
    <div class="login_message">
     <div class="login_message_content">
     This is a sample message that you can change to match your requirements.<p> 
     This application gives access to highly sensitive patient data. Please abide with the HIPAA
     protocols with respect to care of patient privacy. By logging into this application you acknowledge
     that you have legal responsibility for any data breaches arising from your behavior. 
     </div>
    </div>

    The file should look like this:

  5. Your login page should now look something like this:
    Note: Remember to refresh the web browser to see the changes.
  6. To customize the message simply replace the text in the login_message_content div:
    Note: Because this is simply HTML you can format with html tags if you wish.

    And remember to refresh the web browser to see your changes.

Customize the message [top]

As we are using standard HTML it is easy to change how the message looks. You can change the look in either the style section or in the login_message_content div, that we added earlier.

We will start by changing the style, and then we will modify the message content. The changes made are not intended to be recommendations for how a message should look, they are just showing how things works.

Changing the style:

  1. We will makes several changes to try and improve the look:
    • Move the the message dialogue down the page a little
    • Change the text colour to blue
    • Add some padding around the text
    • Change the dialogue background to light grey
  2. Here are before and after pictures:
    Before the changes:

    And after:
  3. And here are the code changes:

Changing the login_message_content div:

  1. Once again we will make several changes:
    • Increase the font size for the first line of the message
    • Change the colour of the first line to red
    • Change the rest of the message to italics
  2. This is the results in a much bolder message:

    Note: As we said earlier this is not a recommendation just a demonstration what is possible.
  3. And here are the code changes:

Don’t like that look, so let’s tone it down a bit:

  1. Change the text colour to green, in the style section.
  2. Change colour of of the first line of text to brown, in the login_message_content.
  3. Here is the result:
  4. And here are the code changes:

    Tip: Because this text is actually HTTP code embedded (within C code)  we need to use HHTP style comments (<‐‐ comment ‐‐>) — not C comments like we did above:

    :

Leave A Comment?