[Update] This information may be relevant to Ignition v8.1.19 and earlier. Perspective Co-branding is built into Ignition v8.1.20, if you are reading this after v8.1.20 is available as a stable release (only a release candidate at the time of writing) then I suggest using the built-in co-branding functionality and ignoring the content below.
I was able to achieve a partial implementation of customized (corporate branded) login pages using CSS. Most other forum entries on this topic seem to indicate there is no ability to customize login pages without using an external identity provider (IdP) so I thought Iād share my findings here in case others are able to expand on it. Though it seems āPerspective co-branding is on the roadmapā for 2022.
Specifically I was able to customize the page presented after logout and the āContinue to Loginā page presented when initially attempting login. Unfortunately this customization capability via CSS does not extend to the actual pages used for username/password entry as those do not reference customizable CSS files.
I noted that the āContinue to Loginā page referenced the data/perspective/themes/light.css file which can be customized, and then I investigated means to perform image and background replacement using CSSā¦ initially thinking this would apply to all the similarly styled login/logout pages (I was wrong).
In the example CSS (below) I replaced the existing logos and icons with other images from inductive automationās own website and replaced the gradient image used with CSS gradient. However you can use images that you have uploaded to Ignition Designers Image management interface by specifying the path to that file in the url declaration, e.g. url(ā/system/images/[path to image file]ā).
Here is some example CSS added to the end of the existing data/perspective/themes/light.css fileā¦
/* Override ignition logo on ācontinue to login pageā and ālogged outā page */
.logo-wrapper .logo-container {
content:url(https://inductiveautomation.com/static/images/edge/IgnitionEdgeLogo_%402x.png);
max-width: 317px;
height: auto;
}
/* Override ignition icon on ācontinue to login pageā */
.client-login .login-section .login-panel-wrapper .login-panel .icon-wrapper .panel-icon.project-icon {
background: blue;
background-image: url(https://inductiveautomation.com/static/images/edge/IgnitionEdge-Panel.png);
border-radius: 5px; */
}
/* Override gradient background of large (wide) client login page side panel - using corporate colors*/
.client-login .brand-side-panel .gradient-background {
background: blue;
background-image: linear-gradient(to bottom left, green 40%, blue);
}
/* Override gradient background of small (narrow) client login page - using corporate colors*/
.client-login.āsmall.āstandard {
background: blue;
background-image: linear-gradient(to bottom left, green 40%, blue);
}
/* Override gradient background of client logout state page - using corporate colors*/
.terminal-state-page.āstandard {
background: blue;
background-image: linear-gradient(to bottom left, green 40%, blue);
}
Here are the resultsā¦
āContinue to loginā page:
āLogged outā Page:
The same strategy could be applied to the actual password/username entry fields if Ignition developers were to add CSS customization capability to those pages by referencing a customizable CSS file.
.
