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 log
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.
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.
C:\ProgramData\itsense\Templates\AdminUI2\theme.css
Step 4 - Recycle
After you have applied your changes, recycle the application pool and check your changes.