Setting a custom application color

Applies to version: 2020.1.x and above; author: Dawid Golonka

Introduction

WEBCON BPS provides tools for visual modification of the end-user interface that goes with your system, like customizing the Portal interface theme to match your company’s colors, or inserting your own logo. In version 2020.1.3.277, the application color can now be selected from a color picker, instead of a list of predefined colors – so that finding a color that matches your company color scheme should not be a problem.

Description

Default color and application color section settings

The screenshot below shows the default view of the form opened through the “My tasks” page, in this configuration the application color is orange.

Fig. 1. My tasks page/form view with orange as the application color

To change the application color, go to the WEBCON BPS Designer Studio, enter the selected application and select the “General” tab.

Fig. 2. Changing the application color

After expanding the list in the Color field, a widow with colors will open. It is divided into two sections “Custom” and “Predefined”.

Predefined colors

Below there is a panel for selecting predefined colors:

Fig. 3. The panel of the predefined colors

 Custom colors

The second tab allows you to set a custom color:

Fig. 4. The card allows you to set a custom color of the application

On this tab, there is the ability of selecting a color from two palettes – “Theme colors” and “Standard colors”. If none of the presented colors suit you – select the “More colors…” button.

In the window, the required color can be selected by using two models – RGB and HSB.

Fig. 5. The extended color change panel – a RGB model

Fig. 6. The extended color change panel – an HSB model

After selecting the color from the preview on the left and setting their brightness with the slider on the right, there is the ability to use the “Make Web-Safe” function, which sets the closest color from the safe Internet palette (it is a special palette of 216 colors, which are designed to look identical on all computers) for the selected color. The values of the color components can also be entered manually in the fields on the right.

Presentation of the changes on Portal

After selecting the color and saving the changes, the color accents on the form will change:

Fig. 7. The form view with a lime-green color set