Introduction

The CoreOne Self-Service Portal Look and Feel can easily be adjusted to your needs. This article describes what is possible and how this can be done.

Branding

You can override the logo area in the navigation and the footer on the button of the page by adding content to the following files:

C:\ProgramData\itsense\Templates\SelfService\Features\Shared\Layout\_Logo.cshtml
C:\ProgramData\itsense\Templates\SelfService\Features\Shared\Layout\_Footer.cshtml

Color theme

You can override specific colors within the CoreOne Self-Service Portal by overriding following file:

C:\ProgramData\itsense\Templates\SelfService\uicontrols\app-config.js

The content of the file should be in the following structure:

var appConfig = {
    themes: {
        light: {
            primary: '#0069b4', 
            secondary: '#424242',
            accent: '#82B1FF',
            error: '#FF5252',
            info: '#2196F3',
            success: '#4CAF50',
            warning: '#FFC107',
        }
    }
}

As you can see the color theme contains a primary color which is used as the navigation background, as the primary action button color and for various accents like the loader. Additionaly it contains other colors such as secondary, accent and others which are used throughout the user interface. You can easily adjust those color to match your companies CI/CD.

The UI currently only supports a light theme, but there will be support for a darktheme in coming versions.

Custom styling

Most of the styling you can override using the color theme. Should you require any additional changes you can add the following css file to add any other stylings:

Components

Various components can be over riden as well. For example the navigation:

Progressive Web Application

The user has the option to add the portal as a PWA (Progressive Web Application) to it’s home screen. If you would like to define a custom name, custom start path or other settings for that PWA, you can adjust the manifest file:

Below is a sample configuration that you can use as a template.

Translation

If you want to change any of the texts, you can do so by changing the appropriate translation files located in the following directory:

All the default translations are store in the following file. So just search for the text to find the appropriate key:

If you then want to change it, just add the appropriate value to the appropriate override file. So for example if you want to change the default text of the “Login” button in german, add the following entry to the following file: