How to customize Perspective login/logout pages with CSS (partial success - Ignition v8.1.18)

[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:

image

“Logged out” Page:

image

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.

FWIW co-branding was released: New Feature - Ignition & Perspective Co-Branding

1 Like

Of course… thanks :nerd_face:.

Has that been included in a stable build as of yet, not present in v8.1.18 (that I am running) and I don’t see mention of it in the Ignition 8.1.19 release notes.

Update: Co-branding appears to be mentioned in the Ignition 8.1.20 Release Candidate (RC) release notes.

Ah yeah, looks like the target release is 8.1.20. So, almost released :slight_smile:

8.1.20 is scheduled for this week.