Skip to main content

Customize the User interface

The User interface can be customized using attributes configured in Brands.

To add, remove, or modify attributes for a brand, log in as an administrator and navigate to System > Brands > Other global settings > Attributes.

Most attributes defined in a brand apply to both the User and Admin interfaces. However, any settings that are specific to only one interface are explicitly noted as such below.

The following screenshot shows the syntax for setting several attributes for a brand: light mode, a 3-column display of applications on My applications page, hiding the API drawer and the Notification drawer from the tool bar, and disallowing users to edit the applications on My applications page.

Custom settings​

The following settings for attributes are grouped by:

  • enabledFeatures settings
  • General attributes (used on both the Admin interface and the User interface)
  • User interface only

Enabling/disabling features​

The features listed below can be enabled or disabled through attributes set on the Brand. By default, all of the listed features are enabled. To disable a specific feature, set its value to false.

settings.enabledFeatures.apiDrawer​

Display the API Request drawer in the upper tool bar.

settings.enabledFeatures.notificationDrawer​

Display the Notification drawer in the upper tool bar.

settings.enabledFeatures.settings​

Display the Settings link in the upper tool bar.

settings.enabledFeatures.search​

Display the Search bar in the upper tool bar.

settings.enabledFeatures.applicationEdit (User interface only)​

Display the Edit option for each application on the My applications page (only shown when user is superuser).

General settings (both Admin and User interfaces)​

settings.navbar.userDisplay​

Configure what is shown in the top right corner. Defaults to username. Available options: username, name, email

settings.theme.base​

Configure the base color scheme or toggle between dark and light modes. The default setting is automatic, which adapts based on the user’s browser preference. Available options: automatic, dark, light.

Example:

settings:
  theme:
    base: dark

settings.theme.background​

Optional CSS that is applied to the background of the User interface, for example to set a custom background color, gradient, or image.

settings:
    theme:
        background: >
            background: url('https://picsum.photos/1920/1080');
            filter: blur(8px);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

settings.locale​

The locale which can be configured in the user settings by default. This can be used to preset locales for groups of users, but still let them choose their own preferred locale.

Settings for the User interface only​

settings.layout.type​

Which layout to use for the My applications page. Defaults to row. Choices: row, 2-column, 3-column

Global customization​

To customize the following brand settings, log in to the Admin interface and navigate to System > Brands > Brand settings.

  • Title
  • Logo
  • Favicon
  • Default flow background image
  • Custom CSS

For more details, see the Brand settings documentation.