Introduction

In this how to we will adapt the look and feel of the CoreOne Admin User Interface (V2). We will switch out the logo and adjust the coloring scheme.

Step 1 - Switch out the logo and favicon/app icon

Logo

On the CoreOne Admin User Interface file system, browse to the following directory.

C:\ProgramData\itsense\Templates\AdminUI2\

Simply replace the logo.png to change the logo.

Favicon/app icon

To change the favicon, create the favicon.ico file in the C:\ProgramData\itsense\Templates\AdminUI2 folder

To change the app icon that is used when you install the website as a browser, create the icon-192x192.png in C:\ProgramData\itsense\Templates\AdminUI2 folder

Step 2 - Adjust theme config

To easily customize the look and feel there is a theme config files you can simply change. The file is located here:

C:\ProgramData\itsense\Templates\AdminUI2\theme.js

In that file, you can simply change the coloring of the application as documented here.

The key elements are navigation-color, primary-color and tag-severity-*

{
    "navigation": {
        "background-color": "#38fcff",
        "item": {
            "color": null,
            "background-color": null,
            "active": {
                "color": null,
                "background-color": null,
                "hover": {
                    "color": null,
                    "background-color": null
                }
            },
            "hover": {
                "color": null,
                "background-color": null
            }
        },
        "group": {
            "header": {
                "color": null,
                "background-color": null
            },
            "color": null,
            "background-color": null
        }
    },
    "app": {
        "text-color": null,
        "text-color-secondary": null,
        "primary-color": "#38fcff",
        "primary-color-text": null,
		"tag-severity-default": "#ff38ee",
		"tag-severity-info": null,
		"tag-severity-warning": null,
		"tag-severity-danger": null,
		"tag-severity-success": null,
        "surface-a": null,
        "surface-b": null,
        "surface-c": null,
        "surface-d": null,
        "surface-e": null,
        "surface-f": null,
        "font-family": null,
        "surface-0": null,
        "surface-50": null,
        "surface-100": null,
        "surface-200": null,
        "surface-300": null,
        "surface-400": null,
        "surface-500": null,
        "surface-600": null,
        "surface-700": null,
        "surface-800": null,
        "surface-900": null,
        "gray-50": null,
        "gray-100": null,
        "gray-200": null,
        "gray-300": null,
        "gray-400": null,
        "gray-500": null,
        "gray-600": null,
        "gray-700": null,
        "gray-800": null,
        "gray-900": null,
        "content-padding": null,
        "inline-spacing": null,
        "border-radius": null,
        "surface-ground": null,
        "surface-section": null,
        "surface-card": null,
        "surface-overlay": null,
        "surface-border": null,
        "surface-hover": null,
        "focus-ring": null,
        "maskbg": null,
        "highlight-bg": null,
        "highlight-text-color": null
      }
}

Step 3 - Adjust the CSS files

Should you need additional adaptations you can edit the following CSS file.

Step 4 - Adjust subtitle

From C:\Program Files\ITSENSE AG\Admin UI 2.0\wwwroot copy the file manifest.json to C:\ProgramData\itsense\Templates\AdminUI2

In this file you can adjust the “short_name” to something other than CoreOne Suite, this gets added after the page title in the browser title bar:

Step 5 - Recycle

After you have applied your changes, recycle the application pool and check your changes.

CoreOne Suite Dokumentation

How-to customize the look and feel of the Admin User Interface