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,
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.
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.
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;
}
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;
}
body {
background-image: url("data:image/png;base64,<Encoded image>");
background-repeat: no-repeat;
}
Copyright © 2000-2019 Tridium Inc. All rights reserved.