Login Page with custom background image and custom css

Universal Dashboard Universal Dashboard Show Off
1

Hi all,

not directly a “Universal Dashboard Show Off”, but there is no “PowerShell Universal Show Off” ;-).

We are currently in the migration process from Universal Dashboard 2.9.0 (hugh dashboards with more than 180 pages and a lot of customizations and custom components) to PowerShell Universal (3.1).

–

I’m not allowed to show too much of it unfortunately but I can share some useful integrations we put in (or migrate from 2.9.0) during the migration here. I also cannot share the used picture file, font-family or the logo, but i can share the source code.

–

Login Page with custom background picture and a little more CSS

In Universal Dashboard, customizing the login screen was still a lot of effort, in PowerShell Univeral it has become very, very easy, thanks @adam @adamdriscoll. Special customizations like the color change on mouseover of the login button or similar I left out in the example below.
But it might be a good start for those who still want to look into it:

image
image1920×982 92.2 KB

Background Image (Browser window resizing, different resolutions, etc. are covered), Card has rounded corners and box shadow and some color adjustments.

loginPage.ps1

$Parameters = @{
	Image = "https://<PowershellUniversalURL>/assets/logo.png"
	Title = "Automation and Reporting Cockpit"
	SecondaryColor = "#38393e"
	PrimaryFontColor = "black"
	HeaderFontColor = "white"
	HeaderColor = "#38393e"
	Copyright = "© Branding"
	CssStylesheet = @('<PowershellUniversalURL>/assets/loginPage.css')
}
New-PSULoginPage @Parameters

You also need a Pulibshed Folder for the assets folder where the background image and the custom loginPage CSS file are located . Without Authenticaton, so the files can be used on the login page for unauthenticated users.

publishedFolders.ps1:

New-PSUPublishedFolder -RequestPath "/assets" -Path "D:\universal\assets"

loginPage.css:

.ant-layout {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/assets/background1.jpg);
}

.ant-card {
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0), 0 3px 1px -2px rgb(0 0 0), 0 1px 5px 0 rgb(0 0 0);
}

Currently this will only work in the light theme with these colors defined above.
Has anyone changed the colors on the loginPage for the dark theme?
(Without hacking or manipulating the dark.css (https://PowerShellUniversalURL/admin/dark.css)

@adam @adamdriscoll Is this currently possible?

René

6 Likes
2

This is gorgeous! Thank you for sharing.

3

Thank you for sharing. I like this.