DEV Community

Cover image for Customize the Optimizely CMS Login Page
Martin Soderlund Ek
Martin Soderlund Ek

Posted on

Customize the Optimizely CMS Login Page

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

Image descriptionThe 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);
    });
});
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)