Edit the Login Theming for Next Experience UI

[Ashley Snyder]

 Center of Excellence / Next Experience / Edit the Login Theming for Next Experience

Administrators can customize Next Experience UI login illustrations, welcome text, and colors to reflect a company's branding. Visit the Edit login theming in Next Experience product documentation for an overview.

Note: The Login button will inherit the CSS Variables from the Core style of your theme. 

System Property	Corresponding CSS Variable
glide.ui.polaris.login.show_illustrations	N/A - Property uses true/false boolean values.
glide.ui.polaris.login.style.background	"--now-login-background": "138,48,127"
glide.ui.polaris.login.style.background_gradient_begin	"--now-login-background-gradient-begin": "255,255,255"
glide.ui.polaris.login.style.background_gradient_end	"--now-login-background-gradient-end" : "255,151,223"
glide.ui.polaris.login.style.mountain_primary	"--now-login-mountain-primary": "121,167,211"
glide.ui.polaris.login.style.mountain_secondary	"--now-login-mountain-secondary" : "138,48,127"

 

If you're looking to change the logo, this is actually controlled by the banner logo that is set. Follow the steps in the product documentation to set the logo for the instance, and you may need perform a cache.do to see the changes take effect on the login page.

[Rain Vaine]

Hello,
Do we use these property in these format?

Because I tried using this properties using "--now-login-background": "138,48,127" as values but it is not reflecting properly, but using only the RGB decimal value directly like 138,48,127 it is working. Is it the correct behavior?

glide.ui.polaris.login.style.background

"--now-login-background": "138,48,127"

not working

Working fine

Regards,
Vaine

[Billy3]

Hey Vaine, I would guess the css properties are in case you want to set them from the next ui themes.

[Rain Vaine]

Yes that is also what I found. But in the sys_properties itself it is only accepting the RGB decimal values like shown in the image above.

[Nuno99]

Hello @Ashley Snyder  wonderful article as always.

I just have one question, I know the logo used in the login page is the same that is set on My Company / Basic UI16, but its possible to remove the logo from the login page but not remove it from the banner once we log in to the instance?

Thanks

[Nkosikhona Mngo]

Hello @Ashley Snyder , thank you for your article.

How do I override the glide.ui.polaris.login.style.background property so that the glide.ui.polaris.login.style.background_gradient_begin and glide.ui.polaris.login.style.background_gradient_end can be applied?

[Michael Leone]

I've changed the colours as per above however it seems the secondary colours have a boarder.  Any idea how to get rid of this??

Looks quite terrible.

[Michael Leone]

Just to add to the above i have found a solution for this.  To get rid of the boarders you need to add an extra line to your theme.

    "--now-login_mountain--secondary--stroke-color": "163, 81, 155"

 Once you add this it will look correct.

Would be great to allow us to add our own graphics here.  Would really open up the ability to personalize the login experience.

[Winston]

@Michael Leone Where did you add that that line at? I added it to the UX Theme Styles for color and it didn't work.

[Michael Leone]

Hey Winston,

I added this in the Theme Colors UX Style.

I made sure to add it to the Base Style.

[Ashit1]

How do you change the illustration(mountain image) in the login box?

[Michael Leone]

You will need to clone the widget and replace the existing on on the page if you want to do that.  It's not currently supported.  

[AlejandraEsGFT]

Hello everyone it is possible to change the background to an image?

[amc0]

Hi, @Ashley Snyder and @Michael Leone 

I tried adding "--now-login-background": "138,48,127" to the Colors of the UX Style table but nothing changed. Can you explain what I'm missing?

Thanks

[Hamlet G_]

How can one change the background ad indicated by @AlejandraEsGFT? Specifically, can we adjust the size of the background to small or remove it to just have the login box showing?

[jnchristie]

Not sure what I might be doing wrong, but those system properties don't seem to exist in our instance. Am I missing something? 

[Michael Leone]

They won't exist.  You need to create them.  

[siddhi sawant]

Hi @Ashley Snyder ,
How to change login button color?