New Feature - Ignition & Perspective Co-Branding

Ignition Early Access
6

What I did:

After some testing, and this is likely not supported, I did manage to get a plant to show here!

image
image1738×996 65.7 KB

And on the loading, logout, and session timeout screens:

image
image1920×805 116 KB

How I did it:

The CSS To perform this dark magic 
/* This is whats needed  to replace the login panel content */
.client-login .brand-side-panel .gradient-background {
    background-image: url("https://cgaxisimages.fra1.cdn.digitaloceanspaces.com/2014/07/17-copy1.jpg") !important;
    background-position: center; 
}

.client-login .brand-side-panel .gradient-background.perspective {
    background-image: url("https://cgaxisimages.fra1.cdn.digitaloceanspaces.com/2014/07/17-copy1.jpg") !important;
    background-position: center; 
}

/* This is how I clear out the text "Log in" */
.login-header span, .login-header.perspective span {
    display: none;
}

/* And replace it with new text */
.login-header::after, .login-header.perspective::after{
    content: "Hello World!" !important;
    color: #000000;

    background-color: #E5E5E5E5;
} 

/* Here is how I Replace the background for the loading/logging pages */
.terminal-state-page.--standard, .terminal-login-page {
    background-image: url("https://c0.wallpaperflare.com/preview/652/943/804/close-up-fresh-freshness-garden.jpg") !important;
    background-size: cover;
}

/* And one again I give the loading section a background because my picture is too dark! */
.client-loading-page .loading-display .multi-stage-wheel {
    background-color: #E5E5E5E5;
}

/* And I give the logout message a background because my picture is too dark! */
.terminal-state-message {
    background-color: #E5E5E5E5;
}

However I did notice that one page in particular I can't seem to hack through and that's the page between "Continue to log in" and actually logging in.

image
image1790×872 73.2 KB

I believe this has to do with the fact that it uses a different style sheet than the perspective app itself. So no matter what I am adding into theming, it never makes its way to this page. Maybe someone smarter than me (@victordcq ?) can figure out how to hack through this one as well, but I have fiddled with it quite a while!

My thoughts:

I do think that this new feature is a fantastic one, I know many of us have been begging for it and I think it will really help the customization of client projects. I do think that making this a little easier to do would be nice, I really appreciate the built in config webpage to make this happen, but for "super users" it would be nice for it to be easier to manage.

I do understand why IA is treading carefully here, because at the end of the day the product is theirs and this is co-branding. Meaning they have to be careful about how much we can tweak, so that the product is still uniform and resembles the tool they have built. I would like to see something between what I have done, and what they have currently put out. Something where we could easily make some more "advanced" tweaks, even if they (understandably) need to leave logos and page structures mostly the same.

Thank you for coming to my TED talk. Nice new feature!

13 Likes