The client application uses a _config folder to allow customization of the application.

Important: The _config folder is not published

This folder is meant to be installation specific meaning that this file contains settings that apply to the specific installation and therefore is not updated via publish operations.

There's a __templates/_config folder that contains default files that you can copy to the server and then modify.

There are 3 files to customize in the _config folder:

• logo.png
  This is the icon file for the top left corner. This should preferably be a square icon or a rectangular one that is wider than tall. It needs to be exactly logo.png so if you have a jpg file convert to png. png is used in order to support transparency optionally.

• config.json
  This config file contains various configuration settings that specify the base Url of the current application and the redirect Url after login has succeeded. You can also specify a theme and an application title.

• custom.css
  Allows additional customization of the Web UI via CSS customization. The stock file contains commented styles that affect common settings. This file overrides any previously defined styles.

logo.png

The logo file is the icon that is displayed in the title bar. For a new installation you basically copy any existing logo files to logo.png and copy it into the _custom folder. It's icon so keep it small (128x128 is a good size).

config.json

The main file is _custom/config.json file to hold a few key configuration settings that are loaded when the application starts up:

Local Setup

{
    "serviceUrl": "https://localhost:5200/",
    "mainAppUrl": "https://localhost:5000/login/",
    "appName": "Reserve Study Manager",
    "theme": "dark" 
}

Online Setup

{
    "serviceUrl": "https://api.wjp-dev.com/",
    "mainAppUrl": "https://wjp-dev.com/login/",
    "appName": "Reserve Study Manager",
    "theme": "light"
}

• serviceUrl
  This is the Url to the API REST Service that handles the actual login requests. The service handles the login operations, email verification, password recovery etc.

• mainAppUrl
  This is the Url that we redirect to - adding a t=<tokenid> to the querystring - when the application successfully logs a user in.

• appName
  The name that is displayed in the login form header and in the browser title bar. This is also what search engines will pick up as the title.

• theme
  Determines whether the client runs in light or dark mode. You can further customize specific colors via _config/custom.css.

config.json is installation specific, meaning every installation - dev, staging, production - all have their own custom versions of this file that contains their appropriate values.

The file exists in the .NET Project but is not published so each installation has to explicitly created this file.

custom.css

The custom.css file allows you to customize the styling of the page beyond light and dark themes. You can change colors and backgrounds and anything else.

The process is reasonably straight forward and the template file provided shows some of the settings that are typically changed.

.banner {
    color: #222;
    background: white;
}

.background-canvas {
    background: #999 !important;
} 

/* login 'dialog' card */
.card {
    color: steelblue;
    background: #ddd;
}