Tutorial 18

TS2 login Screen Customisation

About this tutorial

Contents

Tutorial 18. 1

About this tutorial 1

Copy the Shipped Logon Screen to Make your own Version. 1

Set Up a Desktop Short Cut to Test Your Custom Sign On Screen. 1

Customizing the aXes Logon Screen in aXes-TS2. 1

Starting Point – The Shipped Logon Screen. 1

Result – Your Customized Logon Screen. 1

Have a quick look at the structure of MyTest_Login.html 1

Change The Background Images. 1

Changing the Login Detail Box. 1

Add a custom text under the logo. 1

 

 

Copy the Shipped Logon Screen to Make your own Version

On your IBMI makes copies of /ts/ts2/login.html and /ts/ts2/login.css and name them respectively MyTest_Login.html and MyTest_Login.css

Using the IBM i WRKLNK command check that user *PUBLIC has *R rights only to the new files MyTest_login.html and MyTest_Login.css.

 

Set Up a Desktop Short Cut to Test Your Custom Sign On Screen

Set up a desktop short cut to test your custom logon. The URL it uses should be like this:

http://<axeshost>:<axesport>/ts/ts2/index.html?login=mytest_login

 

This will start an aXes basic terminal session using your custom log in screen instead of the standard shipped one. 

Test your desktop shortcut. The result should look like this (ie: exactly like this shipped log on):

 

Customizing the aXes Logon Screen in aXes-TS2

Note that the following section applies to aXes-TS2 version 4.10.

 

Starting Point – The Shipped Logon Screen

Result – Your Customized Logon Screen

 

The first steps are the same as customising logon screen in TS-2. The only difference is the css classes used.

Have a quick look at the structure of MyTest_Login.html

Open your MyTest_Login.html document with a source editor, for example NOTEPAD.

This logon screen does not use the jQueryTheme anymore.

Below is the HTML required to build the logon page.  The part that is of interest to us are the first few lines and the footer div:

<div id="loginPage">

<div id="loginLogo">

    <div id="centerLogo"></div>

</div>

<div class="lansaGroupCopyright">

    &#169; <span ax_txtscope="core" ax_txt="LANSA Group"></span>

</div>

Now have a look at MyTest_Login.css to see how these elements have been styled:

#loginPage {

     width:100%;

     height: 100%;

     position: relative;

     top: 0px;

     left: 0px;

     background-color: #415064;

     font-family: "Trebuchet MS",Tahoma,Verdana,Arial,sans-serif;

     font-size: 10pt;

     overflow: auto;

     display: table;

}

#centerLogo {

    background: transparent no-repeat center center;

    width: 300px;

    height: 90px;

    margin-left: auto;

    margin-right: auto;

}

#loginPage .lansaGroupCopyright {

    color: white;

    font-size: 11px;

    font-weight: bold;

    font-family: arial, san-serif;

    text-align: center;

    display: table-row;

    height: 20px;

}

The first <div> (id="loginPage") wraps all the content of the login page. It has been sized and positioned to fill the entire terminal area. It has been given a background color and sets the font settings for the whole div.

The logo<div>(id=”centerLogo”) has been given a transparent background color, does not repeat the background image and has margins set to auto to position it to the center of this <div>.

Since the first div’s display is set to table, the footer<class=”lansaGroupCopyright”>  display is set to table-row. This allows the footer to not overlap the login box and stays at the bottom when the window is resized smaller.

Change The Background Images

In this tutorial, we will use a background image for the whole login page, replace the logo with text and create a new div for the logo with some text, then change the login box’s elements color and opacity to adapt to the background-image.

The background image used is downloaded from https://kbdevstorage1.blob.core.windows.net/asset-blobs/19050_en_1.

Name this image as “loginBg.jpg” and put it in ts2\css\images folder.

Change the html as follows:

<div id="loginPage">

<div id="logoArea">

    <div id="newLogo"></div>

</div>

<div id="loginFieldsWrapper">

    <div id="loginLogo">

        <div id="centerLogo">Welcome to LANSA</div>              

    </div>

...

Look at the <script> section in MyTest_Login.html and comment out the following line:

</script>

//$("#centerLogo").css("background-image", "url(css/images/centerlogo.png)");

</script>

Add the style entries as follows:

#loginPage {

    width:100%;

    height: 100%;

    position: relative;

    top: 0px;

    left: 0px;

    /*background-color: #415064;*/

    font-family: "Trebuchet MS",Tahoma,Verdana,Arial,sans-serif;

    font-size: 10pt;

    overflow: auto;

    display: table;

    background: url(css/images/loginBg.jpg) no-repeat center center;

}

#newLogo {

    background: url('http://www.lansa.com/img/lansa-logo.png') no-repeat center center;

    width: 200px;

    height: 100px;

    float: left;

}

#centerLogo {

    /*background: transparent no-repeat center center;*/

    width: 300px;

    height: 50px;

    margin-left: auto;

    margin-right: auto;

    color: white;

    text-align: center;

    font-size: 30px;

}

Save your changes, clear your browser cache and reload the page. The result should be like this:

 

Changing the Login Detail Box

We will change the login box background color so that the background image can still be seen underneath it.

Add the style entries as follows:

To position the login box to the right and change the opacity of the background color:

#loginFieldsWrapper {

    padding: 10px;

    width: 340px;

    /*margin-left: auto;

    margin-right: auto;

    display: block;

    overflow: hidden;*/

    margin-top: 40px;

    /*background-color: #798593;*/

    background-color: rgba(121, 133, 147, 0.7);

    float: right;

    margin-right: 40px;

}

#loginLogo {

    /*display: block;

    height: 95px;*/

}

To change the background and text color of  Reconnect checkbox:

#loginPage input[type='checkbox'] + label:before {

    content: "\00a0";

    background: rgba(0,0,0,0.6);

    color: white;   

    height: 16px;

    width: 16px;

    display: inline-block;

    margin-right: 5px;

    padding: 0;

    vertical-align: top;

    margin-left: 2px;

}

#loginPage input[type="checkbox"]:checked + label:before {

  content: "\2713";

  text-align: center;

  color: white;

}

To change the background  and its opacity and text color of input and select boxes:

#loginPage input, #loginPage select {

    margin: 2px;

    background-color: rgba(0,0,0,0.6);

    color: white;

}

To change the color of the button when hovered:

#loginPage .btnFields:hover,

#loginPage .btnFields:active {

    background-color: #f9cb69;

    border-color: #f9cb69;

    -webkit-appearance: none;

    -moz-appearance: none;

}

To change the background color of the select box on different media:

@media screen and (max-device-width: 600px) {

    #loginPage #advancedLoginFields select {

        background-color: rgba(0,0,0,0.6);

        height: 36px;

    }

}

@media screen and (min-device-width: 601px) {  

    #centerLogo {

        background-image:none;

    }

    #loginPage #advancedLoginFields select {

        background-color: rgba(0,0,0,0.6);

        height: 36px;

    }

}

To not display the background image in mobile and other short screen, add the following:

@media screen and (max-device-width: 600px) {

    body.mobile #logoArea {

       display: none;

    }

    body.mobile #loginLogo {

        /* height: 10px;*/

    }

}

#loginPage.shortScreen #logoArea {

       display: none;

}

 

 

 

Save your changes, clear your browser cache and reload the page. The result should be like this:

 

Add a custom text under the logo

Insert these new  lines to add a custom text in the logo area: 

<div id="logoArea">

    <div id="newLogo"></div>

    <br /><br />

    <div id="customText">At LANSA we attempt to achieve the best for our customers.<br />

        We do this by diligence, hard work and attention to detail.<br />

        Just ask our customers!

    </div>

...

Add the following declaration to MyTest_Login.css:

#customText {

    margin-top: 70px;

    margin-left: 20px;

    color: white;

    font-style: italic;

}

Save your changes, clear your browser cache and reload the page. The result should be like this:

Click the arrow button to expand the login details and hover the mouse on the button:

 

Now do whatever you like

This example should give you enough basic information to create the look you want in your own custom logon screen. All you have to do is make sure to test your changes.  For the best visual results we strongly recommend that you consult with a professional graphic designer.