Index | Prev | Next

Login Screen Customization Overview

This document provides information on how to customize the Niagara 4 web login screen interface.

The look and feel of the Login screen can be customized entirely using CSS alone. Presently, three customization options are available,

1. Add a “logo”.
2. Add your own CSS style sheet to change the look and feel
3. Add a “favicon”, this icon will be used for both the login screen and most other pages you visit in the station. Browsers will display this icon as a visual reminder of the web site often in the address bar or in tabs.

The above customizations can be performed with relative ease as it consists only of adding your custom logo, favicon, and CSS references to the web server.

How to add a custom logo, favicon and CSS file?

• Create a new Niagara 4 module that bundles the required resources, logo image file, CSS file, and favicon file.
• Under the WebService component in your station, add up to three slots of type baja:String and name them “logo”, “loginCss” and “favicon”.
• Update the text values of the slots with Ords that refer to the corresponding files. For example,

On your web browser open the login screen and confirm that your logo and styles have applied to the login screen.

Starting in Niagara 4.10U3, login screen resources in the shared station home file:^ are no longer permitted. Starting in Niagara 4.10U4, login screen resources in a "public" subfolder of the private station home is allowed. This location can be configured in the properties above by entering an ord like this: file:^^public/myLogo.png" For more information on these file locations check out this link: Niagara 4 Directory Structure Change

Tips to CSS styling the login screen

CSS is no longer your tool to just play around with styles and fonts anymore. Depending on your CSS skill level, a whole lot of customizations ranging from changing colors and fonts to 2D/3D transformations, gradients, etc can be applied. This image below provides a screenshot of the default login form and some of the primary CSS selectors. Customizing only these elements through CSS should help achieve most of what you need.

Here is a sample CSS with customizations to the said elements and some of the standard html elements. A link to the screenshot of the end result of applying the customization is available at the bottom.

/*Login form container style*/
#login-form {
  float: right;
}
#login-form #username {
  margin-bottom: -1px;
}
#login-form #password {
  margin-bottom: 10px;
}

#login-form #login-submit{
  color: #fff;
  background-color: #0055aa;
  border-color: #2e6da4;
  line-height: 1.3333333;
  border-radius: 6px;
  display: block;
}

#login-form-container {
  background-color: white;
  font-size: medium;
  font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
}
#login-title-container #login-title {
  text-transform: uppercase;
  text-align: center;
  color: black;
}
#login-title-container {
  background: linear-gradient(to left, #1dade2, #bae6de);
}
#login-logo-container{
  margin-bottom: 1.5em;
}
/*End Login form container style*/

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background: linear-gradient(to right, #1dade2, #bae6de);
  background-position: center;
}

Limitations and workaround

A logo is the only image that can be added. If you want to change the background by applying an image bundled in one of your modules, there is no direct way of referencing it. Other options include,

• Direct reference to an image on the web. Note: This requires access to the internet when logging into the station. For example,

body {
  background-image: url("<image web url>");
  background-repeat: no-repeat;
}

• You can base64 encode an image and include it as a data url in the CSS file. Be warned that embedding an image via CSS, comes with its own limitations. The important one is a significant increase in the size of the CSS, directly impacting login screen load time.

body {
  background-image: url("data:image/png;base64,<Encoded image>");
  background-repeat: no-repeat;
} 

• Please ensure that the End User License Agreement and the Third Party License links are visible.

Index | Prev | Next