With the release of Episerver 7 comes a brand new log-in screen, as seen below
With the out-of-the-box new log-in screen, we have 3 background images and the 'Digital Experience Cloud' logo. A nice touch when developing a project in Episerver for a client is to customize this screen for their branding. Customizing the log-in screen is very simple. In today's tutorial, I will guide you through the process
How To Customise The Background Image
The first thing I'm going to cover is how to switch the background images. In order to change the screens, we will need to create an initialization modules.
In the initialization modules, we will use a VirtualPathMappedProvider to intercept the login screens URLs and customise them to a location of our choosing. In Episerver, a lot of CMS based config parameters are available in a NameValueCollection which the VirtualPathMappedProvider gives us access to. In the log-in screen the Url to the log-in pages images are:
So in order to override these URLs we need to inject/override the default ones with custom ones:
In this code, we use the IHostingEnvironment which is an Episerver API that mocks of the System.Web.Hosting.HostingEnvironment class. This will be used to register our new Urls. Create a new VirtualPathMappedProvider giving it a unique name and an empty NameValueCollection. Next, map a virtual path from the default Episerver Url structure to a new structure. The new structure points to images within my webroot. When we load the site you will now see the new images:
How To Customize The Logo
Now we have updated the background images, it's time to change the logo. In the login screen, this is the bit that says 'Digital Experience Cloud'. You will need an image in SVG format in order for this to work. Using the code above all you need to do is intercept the logo URL, like so:
That wraps up everything you need to know in order to change the Episerver 9 log-in screen. Using an InitializableModule, a IHostingEnvironment and a VirtualPathMappedProvider. We can change the Episerver Url's to point to a custom route.