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, two customization options are available,

  1. Add a “logo”.
  2. Add your own CSS style sheet to change the look and feel

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

How to add a custom logo and CSS file?

Slot Value
logo module://mymodule/resources/images/mylogo.png
loginCss module://mymodule/resources/css/myCss.css

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

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.

Selector

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;
}

A sample customized login screen

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,

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

A sample customized login screen with a background web image

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