...
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.
...
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
...
In that file, you can simply change the coloring of the application as documented here.
| Info |
|---|
The key elements are |
| Code Block |
|---|
{
"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
}
} |
...
| Code Block |
|---|
C:\ProgramData\itsense\Templates\AdminUI2\theme.css |
For example you can change the color of the navigation drawer.
| Code Block |
|---|
TBD |
...
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:
...
| Code Block | ||
|---|---|---|
| ||
{
"name": "CoreOne Suite Administration",
"short_name": "CoreOne Suite",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#213A5C",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
} |
Step 5 - Recycle
After you have applied your changes, recycle the application pool and check your changes.
...