Customize the Optimizely CMS Login Page

The Optimizely CMS Login Page can be customized to fit your brand. Here's how.

The default one which we can modify..

For .NET Core based websites (Optimizely CMS 12 and later) this can be configured in the Startup.cs file and Configure method.

The simplest thing is to add a request delegate to the Configure method, looking for the default CSS file and background image, and replace them, like this:

app.Use(requestDelegate =>
{
    return new RequestDelegate(context =>
    {
        if (Regex.Match(context.Request.Path, "^\\/Util\\/styles\\/login\\.css", RegexOptions.IgnoreCase).Success)
        {
            context.Request.Path = new PathString("/ClientResources/Styles/EpiserverLogin.css");
        }

        if (Regex.Match(context.Request.Path, "^\\/Util\\/images\\/login\\/login-background-image\\.png", RegexOptions.IgnoreCase).Success)
        {
            context.Request.Path = new PathString("/ClientResources/Images/LoginImage.webp");
        }

        return requestDelegate(context);
    });
});

You can make this a separate middle ware class but I think this is pretty self-explanatory and clean. Note the paths.

For .NET framework based websites (Optimizely 11 and earlier), the same can be done with an InitializableModule and HttpContext.Current.RewritePath.