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.
...
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:
...
| Code Block |
|---|
{
"navigation": {
"background-color": "#11a6ba",
"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": "#11a6ba",
"primary-color-text": 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.
...
For example you can change the color of the navigation drawer.
| Code Block |
|---|
TBD |
Step 4 - Recycle
After you have applied your changes, recycle the application pool and check your changes.
...