Configure display settings

Edit online

You can upload a custom logo and background photo and configure login page instructions.

Go to Configurations > Display settings.

Login page

This tab contains configurable settings for your login page. You can customize your login page header, instructions panel title and message, and the option to include a custom logo.

Login page header

Enter the text that you want to display as the main header of the login page. The header is the title of the login form.

Instructions panel
Note: Markdown formatting is supported.
  • Instructions panel title (optional): Provide a short title for the instructions panel that appears on the login page.
  • Instructions panel message (optional): Write a detailed message or instructions for users logging in.
Branding
  • Custom logo: Click Add file to replace the default logo in the menu bar with your custom logo. The recommended resolution is 100x100 pixels. (60 KB max).
  • Custom background image: Click Add file to replace the default background image on the login page with a custom one. The recommended resolution is 1920x1080 pixels. (500 KB max).

Logo

In this tab you can customize the logo that is displayed on the header. You can choose between the following options:
  • Default: Maintains the default header logo.
  • Custom text logo: Replaces the default header logo with a custom text.
  • Custom image logo: Replaces the default header logo with a custom image. A rectangular image of 500 KB or less works best.
  • Custom text and image: Replaces the default header logo with a custom image and text. A square image of 500 KB or less works best.

Theme editor

The theme editor tab provides options to customize your theme, font, and UI header items.

To set a custom theme to use in other IBM Aspera apps or systems, you can choose to import or export one. Under Theme editor choose the appropriate option for your customization option.
  • Reset to default: Resets the theme back to default. You will be prompted to refresh the page to apply your changes.
  • Export current settings: Downloads your current theme as a JSON file.
  • Import: Upload a new theme, files must be in JSON format with the '.json' extension.
Themes

To enable the light and dark themes for the application, scroll to Themes and turn the slider to On. You can also lock the application to a single custom theme by turning the Enable light and dark custom themes slider to Off.

Font

To customize the UI font, go to Font and select a new one from the drop down.

Login page
In this section you can modify the color of the following login page items. You can either pick a color from the color box or enter a hex code in the text box:
  • Panel background
  • Panel text
  • Announcement background (in panel)
  • Announcement text (in panel)
  • Announcement background (floating)
  • Announcement text (floating)
Header
In this section you can modify the color of the following header items. You can either pick a color from the color box or enter a hex code in the text box:
  • Header background
  • Header text and icons
  • Header accent borders
  • Header active item background
  • Header active item color
  • Header item hover background
Left navigation
In this section you can modify the color of the following left navigation items. You can either pick a color from the color box or enter a hex code in the text box:
  • Left nav background
  • Left nav text color
  • Left nav item active background
  • Left nav item active background accent
  • Left nav item hover background
Buttons
In this section you can modify the color of the following button items, some special buttons may require you to make changes in the Advanced design tokens section. You can either pick a color from the color box or enter a hex code in the text box:
  • Primary button background
  • Primary button text
  • Primary button hover background
  • Primary button active background
  • Secondary button background
  • Secondary button text
  • Secondary button hover background
  • Secondary button active background
  • Tertiary button border
  • Tertiary button text
  • Tertiary button text for hover and active states
  • Tertiary button hover background
  • Tertiary button active background
Advanced design tokens

You can modify the color of all UI design tokens. For more information see the Carbon Design System documentation (Guidelines > Color > Tokens).