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.
| Code Block |
|---|
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:
| Code Block |
|---|
C:\ProgramData\itsense\Templates\AdminUI2\theme.js |
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
}
} |
Step 3 - Adjust the CSS files
Should you need additional adaptations you can edit the following CSS file.
| Code Block |
|---|
C:\ProgramData\itsense\Templates\AdminUI2\theme.css |
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.