Color themes

Applies to version: 2022.1.x and above; author: Dominika Stelmach

This article is an update of the already existing article -> WEBCON BPS Portal - Website look customization. 

Introduction

In WEBCON BPS, it is possible to personalize the appearance of the platform by changing the logo and color theme of the website.

To be able to modify a color theme, a user must have appropriate privileges which are granted in WEBCON BPS Designer Studio. In the System configuration -> Global parameters -> Global privileges in the System administrators window, add the appropriate users. 

Fig. 1. Granting privileges - system administrator

Configuration of the color theme

To change the WEBCON BPS Portal appearance, expand the user’s menu and select Administration.

Fig. 2. User's profile - Administration

Fig. 3. Color themes

A list of defined themes will appear on the screen. WEBCON BPS Portal has three built-in color themes that cannot be edited -  WEBCON Light, WEBCON Dark, WEBCON White. The user has the option to create a theme based on the existing ones or create new styles. 

To add a new color theme, just click the New theme button. 

Fig.4. Configuration of the color theme

Below is a configuration window that will allow you to adjust the color theme to your specific needs.

Fig. 5. Theme configuration -  basic information

The key parameter to be configured is the way in which the color theme will be used in the system. 

• Is active – a color theme marked as active will be visible in the list of available themes in the user's profile. The user can select any theme from the list. If the theme selected by the user is deactivated by the System Administrator, the system will use the theme marked as Default. 

Fig. 6. List of available color themes on the user's profile

• Is default – the default theme is used when the user logs into the system for the first time, or the color theme that the user has used so far will be deactivated or removed.
• Is embed default – a theme marked in this way will be used when displaying system embeds, if no other color theme has been specified in the embedding configuration.

Additionally, for each theme it is possible to define the name of the theme and a short description. Each color theme is also associated with a logo file displayed in the left corner of WEBCON BPS Portal. This file can be changed to match the corporate logo and colors.

The other options concern the appearance and colors of individual page elements. Next to each option in the “i” button, there is a description informing the user of exactly which page element is being edited.

Fig. 7. Theme configuration - configuration of the individual system elements

The user can choose any color from the color palette - the color code can be saved in HEX, RGB, HSL formats.

Fig. 8. Color selection

Color theme selection

Fig. 9. User's profile

Fig. 10. Theme selection

Sample color themes

WEBCON Light theme

Fig. 11. WEBCON Light theme

WEBCON Dark theme

Fig. 12. WEBCON Dark theme

Transferring themes between environments

The theme created in one environment: development, test, or production can be easily transferred to other using the import/export functionality.

Fig. 13. The import/export option

After clicking the export button, a file in the JSON format will be generated. This file can be imported into the selected environment.

Fig. 14. The exported file in the JSON format